Adding a Contact Form to Footer or Sidebar

Please follow these steps to add a Contact Form to one of the Footer Columns or a Page Sidebar:

  • Create a Form on any page and customize it to your needs. (training video below)
  • Copy the code generated by the form builder.
  • Access the Widgets section and drag the Text (html) Widget into the desired Footer Column or Sidebar. (Appearance > Widgets)
  • Paste the code into the Widget area and click Save.

Custom Form Builder Training Video: Video 12: Contact Forms + Form Builder If the Contact form is not styled properly, kindly add the following code to the Custom CSS area in Site Options > Styling Options:

For the Footer:

#footer .footer-holder .contact-form textarea {height:60px !important;padding:6px !important;width:200px !important;}  #footer .footer-holder .contact-form input {padding:6px !important;width:100px !important;}  #footer .footer-holder .contact-form input[type="text"] {padding:6px !important;width:200px !important;}  #footer .contact-form {padding-top:2px;} #footer .contact-form label {color:#F9F9F9 !important;} 

Adjust the width property in the CSS code above depending on the amount of Footer Columns you are displaying. You may also need to adjust the with of the reCaptcha input area. To do so, add the following code as well:

#footer .footer-holder .contact-form #recaptcha_area input[type="text"] {width:130px !important;height:10px !important;}

For the Sidebar:

#sidebar .contact-form input[type="text"] {margin-bottom:6px !important;width:126px !important;}  #sidebar .contact-form textarea {margin-bottom:6px !important;width:146px !important;height:80px !important;}

(Adjust any of the above as needed) If you have created a Custom Menu and have added a Contact Form to the same Sidebar then add the following code instead:

#sub_nav .contact-form input[type="text"] {margin-bottom:6px !important;width:126px !important;}  #sub_nav .contact-form textarea {margin-bottom:6px !important;width:146px !important;height:80px !important;}

(Adjust any of the above as needed)

Please Note:

The above is meant to be an optional customization. Unfortunately it is not possible to have multiple forms on a Page. If you add the form to the Footer as well as a Page the form will not work on that Page. Important: If you have added reCaptcha, the Sidebar and Footer Contact Form will automatically display the reCaptcha form. It is not possible to re-size reCaptcha since it uses Google’s API to pull in its functionality and design into your site and all its dimensions are already preset. If you prefer to remove reCaptcha from Sidebar, add the following CSS code to your Custom CSS area in Site Options > Styling Options:

#sidebar #recaptcha_widget_div {display:none !important;}

…or from the Footer:

#footer #recaptcha_widget_div {display:none !important;}

(click screenshot for a full-size view)