Open a WordPress Form by Clicking on a Menu Link

Open a WordPress Form by Clicking on a Menu Link

Some websites make it really hard to contact them. The “Contact Us” page is hidden in the footer. The social media icons, if there any, lead to accounts where no-one ever replies.

Why not make it as easy as possible to contact you?!?

One good idea is to place a “Contact Us” in your menu. As soon as people click on it, they’ll get a pop-up box with a contact form. Your visitors don’t even need to visit a different page. That’s as easy as it gets.

In this post, I’ll show you how to open a WordPress form directly from a menu ink.

Step #1. Install Gator Forms

Install the Gator Form plugin. This is a very useful plugin, even in the free version. But to really take advantage of these pop-ups, get Gator Forms Pro.

gator forms

Step #2. Create your form

Now that Gator Forms is active, let’s create a form.

  • Go to the “Gator Forms” link in your WordPress admin menu.
  • Create a new Gator Form.
  • Choose “Hidden before opening” as the way you want to display your form.
gator forms hidden before opening
  • Make sure that the form will display “On all pages”.
  • Look for the ID number for the form. In the image below the ID number is 1. This will be very important for loading your form.
gator forms on all pages

Step #3. Create the menu link

Now let’s create the menu link that will trigger your form.

  • Go to Appearance > Menus.

We need to enable a WordPress feature that is not enabled by default:

  • Click the “Screen Options” tab in the top-right corner.
  • Check the “CSS Classes” box.
gator forms css classes
  • Now we enter the URL using this structure. Replace “1” with the ID number that you found in the previous step. Also, please make sure to include the full domain name and URL.
http://example.com/#pwebcontact1_toggler
  • Put your menu link name into “Navigation Label”.
  • Put #pwebcontact1_toggler in the CSS Classes box. Again, replace “1” with the ID number.
gator forms menu link

Step #4. Test the menu link

Setting up your contact form really was as easy as that! Let’s go and see it in action!

  • Go to the front of your site.
  • Click the “Contact Us” link.
gator forms menu link form
  • You will now see your form inside a pop-up. If anyone wants to get in touch with you, it’s going to be super-easy!
gator forms form inside popup

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
2 Comments
Oldest
Newest
Inline Feedbacks
View all comments
sjohnson
5 years ago

I like this idea and very cool!

Do you know of any real-world examples?

2
0
Would love your thoughts, please comment.x
()
x