PopUp Menu Link – WordPress Tutorial – Contact Me

PopUp Menu Link – WordPress Tutorial – Contact Me

Posted by on Jun 6, 2013 in Blog, Web Development

PopUp Menu Link – WordPress Tutorial – Contact Me

WordPress Tutorial

Would your rather have a popup menu link and page for your “Contact Me” in your menu.  Well, here is a pretty cool way to to accomplish that task.

You will need 2 plugins an optional 3rd.

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

 

“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 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 (Appearance > Editor > Templates – Header  – header.php)

<>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 to “OnClick Javascript “:

<>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!

Post a Reply

Your email address will not be published.