Avada Contact Form

Avada Contact Form

04/10/2018

Avada includes a Contact page with a built-in contact form. We also have included integration with reCAPTCHA that gives users protection against spam. Users need to setup their reCAPTCHA key, as well as other items for the Contact Us page.

Overview

How To Set Up The Contact Page

Step 1 - Create a new page, and give it any name you wish.

Step 2 - In the Page Attributes box on the right hand side, set the Template option to Contact from the dropdown menu. View screenshot here.

Step 3 - Insert your content into the editor or Fusion Builder, such as a heading and text.

Step 4 - Choose to use a sidebar or have no sidebar. Please refer to the Assigning Sidebars section of our documentation for instructions on how to use sidebars.

Step 5 - Save the page.

Step 6 - Navigate to Avada > Theme Options > Contact Form, and make sure to set the email address the form should be sent to on the Email Address field.

Step 7 - To show your Google Maps on your Contact page, go to Avada > Theme Options > Google Map, and insert your Google Maps API Key on the Google Maps API Key field. To get your API Key, please read the instructions in our Setting Up Google Maps API Key documentation.

Step 8 - The Contact Form tab on Avada > Theme Options holds various options for you to set up reCAPTCHA, display Data Privacy confirmation box, and customize the map. Please check the "Contact Form Options" section below to know more about these options.

How To Set Your reCAPTCHA Keys

Step 1 - Click here to register your Domain in reCAPTCHA.

Step 2 - Fill in the necessary fields in the form. Once you register your website using the form, it will give you a Site key and a Secret key.

Step 3 - Under the reCAPTCHA section in Avada > Theme Options > Contact Form > Contact Form, copy the Site key into the ReCaptcha Site Key field, and the Secret key into the ReCaptcha Secret Key field.

Step 4 - Save your settings when done, then the reCAPTCHA box will show up directly below your contact form.

Contact Form Options

You can customize the Contact form and Google Map in Avada > Theme Options > Contact Form using various options. There are three sub-panels in the Contact Form tab: Contact Form, Google Map, and Google Map Styling. Please continue reading below to know more about each option.

IMPORTANT NOTE: The options on this tab are only for the contact form that displays on the “Contact” page template except for the Google Map API Key.

Email Address - Illustrated as A. Allows you to enter the email address the form should be sent to. This only works for the form on the contact page template.

Contact Form Comment Area Position - Illustrated as B. Allows you to set the position of the comment field with respect to the other fields. Choose from Above or Below.

Display Data Privacy Confirmation Box - Illustrated as C. Allows you to display a checkbox and custom label that has to be checked in order to confirm data privacy terms and that the form can be sent.

Data Privacy Checkbox Label - Illustrated as D. Allows you to enter the contents that should be displayed as label for the data privacy checkbox. Can contain HTML.

ReCaptcha Site Key - Illustrated as E. Allows you to enter the reCaptcha Site Key. To get the Site Key, please read the steps above on “How To Set Your reCAPTCHA Keys” section.

ReCaptcha Secret Key - Illustrated as F. Allows you to enter the reCaptcha Secret Key. To get the Secret Key, please read the steps above on “How To Set Your reCAPTCHA Keys” section.

ReCaptcha Color Scheme - Illustrated as G. Allows you to set the reCaptcha color scheme. Choose from Light and Dark.

IMPORTANT NOTE: The options on this tab are for the google map that displays on the “Contact” page template. The only option that controls the Fusion Builder google map element is the Google Maps API Key.

Google Maps API Key - Illustrated as H. Allows you to insert the Google Maps API Key that is required for the Google Maps to show up. Follow the steps in the Google docs to get the API key. This key applies to both the contact page map and Fusion Builder google map element.

Google API Type - Illustrated as I. Controls the Google API type that should be used to load your map. Choose between JS API, Embed API, or Static API. The JavaScript API allows for more options and custom styling, but could be charged for by Google depending on map loads, while the Embed and Static API can be used for free regardless of map loads. For more information please see the Google Maps Users Guide.

Google Map Address - Illustrated as J. Allows you to set the address to the location you wish to display. This is for the JS API Type. For single address, ex: 775 New York Ave, Brooklyn, Kings, New York 11203. If the location is off, please try to use long/lat coordinates with latlng=, ex: latlng=12.381068,-1.492711. For multiple addresses, separate addresses by using the | symbol, ex: Address 1|Address 2|Address 3.

Google Map Type - Illustrated as K. Allows you to set the type of google map that displays. Choose from Roadmap, Satellite, Hybrid, or Terrain.

Google Map Dimensions - Illustrated as L. Allows you to set the width and height of the google map. Note: Height does not accept percentage value. Enter values including any valid CSS unit, ex: 100%, 415px.

Google Map Top Margin - Illustrated as M. Allows you to set the distance to menu/page title. This is only applied to google maps that are not 100% width.

Map Zoom Level - Illustrated as N. Allows you to set the zoom level of the google map. Higher number is more zoomed in.

Address Pin - Illustrated as O. Allows you to display the google map address pin.

Address Pin Animation - Illustrated as P. Allows you to enable or disable address pin animation.

Map Popup On Click - Illustrated as Q. Allows you to display the popup graphic with address info for the pin on the map on click.

Map Zoom With Scrollwheel - Illustrated as R. Allows you to use the mouse scrollwheel to zoom the google map.

Map Scale - Illustrated as S. Allows you to display the google map scale.

Map Zoom & Pan Control Icons - Illustrated as T. Allows you to display the google map zoom control icon and pan control icon.

IMPORTANT NOTE: The options on this tab are only for the google map that displays on the “Contact” page template, they do not control the google map element. These options are only available for the JS API type.

Select the Map Styling - Illustrated as U. Allows you to set the google map styles. Choose from Default Styling, Theme Styling, or Custom Styling. Default is google style, Theme is our style, or choose Custom to select your own style options.

Map Overlay Color - Illustrated as V. Allows you to set any overlaying color for the map besides pure black or white. Works best with "roadmap" type. Note: This option is only available for Custom Styling setting.

Info Box Styling - Illustrated as W. Allows you to set the styling of the info box. Choose from Default Infobox or Custom Infobox. Note: This option is only available for Custom Styling setting.

Info Box Content - Illustrated as X. Allows you to insert custom info box content to replace the default address string. For multiple addresses, separate info box contents by using the | symbol, ex: InfoBox 1|InfoBox 2|InfoBox 3. Note: This option is only available for Custom Styling setting.

Info Box Background Color - Illustrated as Y. Allows you to set the info box background color. Note: This option is only available for Custom Infobox setting.

Info Box Text Color - Illustrated as Z. Allows you to set the info box text color. Note: This option is only available for Custom Infobox setting.

Custom Marker Icon - Illustrated as AA. Allows you to insert full image urls for custom marker icons or input “theme” for our custom marker. For multiple addresses, separate icons by using the | symbol or use one for all, ex: Icon 1|Icon 2|Icon 3. Note: This option is only available for Custom Infobox setting.

Troubleshooting

1. Google Map Will not Display

There could be a few reasons for this, please see this post for each one.

2. Ensure Content Is Correct

Use a correct address and not a Google Map embed code, or longitude/latitude. It has to be a written address. For example, 775 New York Ave, Brooklyn, Kings, New York 11203.

3. Valid Copyright Information

The copyright text has to have complete, valid HTML markup. Valid HTML is required for the theme to function properly. Please make sure to format the HTML correctly anywhere so that issues like this don’t happen.

4. 3rd Party Plugin Conflict

Third party plugins may be conflicting with the map feature. Please disable any plugins that were not included with Avada to see it if fixes the issue. If it does, enable the plugins one by one to find the culprit.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept