PopUp Menu Link – WordPress Tutorial – Contact Me

Filed in Technology, Tutorial by on June 6, 2013 26 Comments

Would you like to make the “Contact Me” link on your WordPress Sites’s navigation bar a popup menu link instead.  Well, here is a pretty cool way to to accomplish that task.

You will need 2 plugins and optional 3rd.

  1. Popup Contact Form from gopiplus
  2. Jin Menu by Buffernow
  3. Configure SMTP by Coffee 2 Code (optional I use because I run WordPress on Windows server and php mail is funky)

I strongly suggest you create a Child Theme because you will need to modify header.php.  Here are a few tutorials for that:


1.  Under Settings > Popup contact form – Configure the plugin as you desire but be sure to remove the image link form “Link Button/Text”  If you don’t this then the button will show up at the top of all your pages, and we don’t need that to happen.

Screen Shot 2013-06-06 at 1.23.49 PM

2.  Click “Update Settings”

3.  Past the following into your header.php file

PopupContact(); ?>


1.  Open Appearance > Menus and be sure to select the menu you want to add the popup to.

Screen Shot 2013-06-06 at 12.24.37 PM

2. In “Custom Links” configure as shown below “Contact Me” or  “Contact Us” whatever your desired link name is.

Screen Shot 2013-06-06 at 12.18.47 PM

3. Click “Add To Menu”

4.  You will notice your menu link is added under the select menu.  Click on the down arrow next to “Custom”

Screen Shot 2013-06-06 at 12.30.16 PM

5.  Now you will add the following code to “OnClick Javascript Code”:


Screen Shot 2013-06-06 at 12.44.20 PM

6.  Now click “Save Menu”

Screen Shot 2013-06-06 at 12.55.18 PM

7.  Go to your site and presto…

Screen Shot 2013-06-06 at 12.57.39 PM

***Popup Contact Form doesn’t come exactly with that look I did some styling.  You can also!

[easyazon-image asin=”1481130501″ locale=”us” height=”160″ src=”http://ecx.images-amazon.com/images/I/51ftOKi0AvL._SL160_.jpg” width=”107″]  [easyazon-image asin=”111844227X” locale=”us” height=”160″ src=”http://ecx.images-amazon.com/images/I/511VPA9H3ZL._SL160_.jpg” width=”127″]  [easyazon-image  asin=”1449309844″ locale=”us” height=”160″ src=”http://ecx.images-amazon.com/images/I/41%2B5vclYLCL._SL160_.jpg” width=”122″]

[easyazon-cta align=”center” height=”28″ keywords=”wordpress” key=”amazon-us-wide-light” locale=”us” width=”176″]

Tags: , , , ,

Leave a Reply