PopUp Menu Link – WordPress Tutorial – Contact Me

Filed in Technology, Tutorial by on June 6, 2013 7 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:

“POPUP CONTACT FORM”
CONFIGURATION

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(); ?>

“CONTACT ME MENU LINK”
CONFIGURATION

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”:

PopupContact_OpenForm(
'PopupContact_BoxContainer','
PopupContact_BoxContainerBody',
'PopupContact_BoxContainerFooter');

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: , , , ,

Comments (7)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. hod-korolevy-2020 | November 20, 2020
  2. real estate | September 7, 2021
  3. Darknet Links | September 15, 2021
  4. Buy Glo Extracts | October 19, 2021
  5. where to buy weed online | October 28, 2021
  1. Joe says:

    Can someone help me with where I should place the in the header.php

  2. Joe, this stopped working for me a while ago. So I changed to the ubermenu. I am not sure why it stopped working.

Leave a Reply