Contact Form

Overview

Contact forms are the easiest way to let your website visitors get in touch with you. The Enfold theme has a built-in contact form element and it can be used any number of times to add multiple forms to any post, page or widget with options to fully customize the form fields and style.

View some of the contact form examples.

Contact form setup

To set up a contact form you will need a working e-mail address. Drag and drop the contact form element on to your page or post and click on it to open the form options and enter your e-mail address in the e-mail address field.

Other options you can customize are:

  • Form Title
  • Add/Edit form elements like input fields or text area. Clicking on the form element will further let you customize it to choose the width, type etc.
  • Labels
  • E-mail Subject
  • Autorespond Text
  • Captcha
  • Alignment
  • Color Scheme

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

 [av_contact email='' title='Send us mail' button='Submit' on_send='' sent='Your message has been sent!' link='manually,http://' subject='' autorespond='' captcha='active' form_align='' color='' custom_class='' admin_preview_bg='' av_uid='av-hroj83']
[av_contact_field label='Name' type='text' options='' check='is_empty' width='element_half' multi_select='' av_contact_preselect='' av_uid='av-hkvmv7'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' check='is_email' width='element_half' multi_select='' av_contact_preselect='' av_uid='av-hhfwe3'][/av_contact_field]
[av_contact_field label='Subject' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-hac6df'][/av_contact_field]
[av_contact_field label='Message' type='textarea' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-h5d55n'][/av_contact_field]
[/av_contact] 

Customization

NOTE: Contact Form and the Mailchimp Newsletter Form share a common class name. This will result in changes being applied to both the elements form fields, which is perfectly fine if you like the fields to look consistent.

If you intend to not apply the same styles to the newsletter element, we recommend enabling and adding the custom CSS class name to contact form element in the backend and use the custom class with the custom code provided below.

Contact form color

By default, the form field colors are inherited from the theme . You can also select Light or Dark transparent form style. To change the form field color to custom color please use the below CSS. Feel free to add your own CSS properties to make any additional changes 🙂

The below contact form element has a custom class name “av-contact-form-color” assigned.

Send us mail

Code snippet

Shortcode

[av_contact email='vinaynkashyap@gmail.com' title='Send us mail' button='Submit' on_send='' sent='Your message has been sent!' link='manually,http://' subject='' autorespond='' captcha='' form_align='' color='' custom_class='av-contact-form-color' admin_preview_bg='' av_uid='av-eqm6gj']
[av_contact_field label='Name' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-enbsvv'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' check='is_email' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-eiz7jf'][/av_contact_field]
[av_contact_field label='Subject' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-e91xnn'][/av_contact_field]
[av_contact_field label='Message' type='textarea' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-e69e23'][/av_contact_field]
[/av_contact]

CSS

/*----------------------------------------
----------------------------------------
----------------------------------------
// CSS -  Contact form color
----------------------------------------
----------------------------------------
//--------------------------------------*/

/* custom style form fields */
#top .av-contact-form-color .input-text,
#top .av-contact-form-color input[type='text'],
#top .av-contact-form-color input[type='input'],
#top .av-contact-form-color input[type='password'],
#top .av-contact-form-color input[type='email'],
#top .av-contact-form-color input[type='number'],
#top .av-contact-form-color input[type='url'],
#top .av-contact-form-color input[type='tel'],
#top .av-contact-form-color input[type='search'],
#top .av-contact-form-color textarea,
#top .av-contact-form-color select {
/* Text color */
color:#333;
/* Background color */
background-color: #fffae8 !important;
/* Border color*/
border-color: #b0a696 !important;
}

Styling conatct form title

The contact form title text can be updated from the pop-up options and it’s style get’s inherited from the styles set up in the theme options.

In case you need to custom style the form title start by adding a custom CSS class name “av-contact-form-title” to the form element and use the below CSS snippet:

Send us mail

Code snippet

Shortcode

[av_contact email='email@gmail.com' title='Send us mail' button='Submit' on_send='' sent='Your message has been sent!' link='manually,http://' subject='' autorespond='' captcha='' form_align='' color='' custom_class='av-contact-form-title' admin_preview_bg='' av_uid='av-17rzk3']
[av_contact_field label='Name' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-by79vv'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' check='is_email' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-btjg7v'][/av_contact_field]
[av_contact_field label='Subject' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-bmnrjv'][/av_contact_field]
[av_contact_field label='Message' type='textarea' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-bgxfb7'][/av_contact_field]
[/av_contact]

CSS

/*----------------------------------------
// CSS - Contact form title
//--------------------------------------*/


.av-contact-form-title fieldset h3 {
font-size: 24px;
text-transform: uppercase;
}

Add icons to contact form label

To add icons to contact form label. First, enable the custom CSS class name support and add a custom class “cf-label-icons” to the contact form and use the below CSS code.

Send us mail

Code snippet

We make use of the pseudo elements to target the form labels and add icons::

CSS

/*----------------------------------------
// CSS - Contact form label icons
//--------------------------------------*/
#top .avia_ajax_form.cf-label-icons label{
padding-left: 20px;
}
#top .avia_ajax_form.cf-label-icons label::before {
position: absolute;
left:0;
font-family: 'entypo-fontello';
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(2) label:before{
content:"e80a";
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(3) label:before{
content:"e805";
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(4) label:before{
content:"e826";
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(5) label:before{
content:"e83b";
}
/* Input field do not support pseudo elements so we target the last p in the fieldset which is usually the submit button */
#top .avia_ajax_form.cf-label-icons fieldset p:last-child:before{
content:"e844";
color:#FFF;
font-family: 'entypo-fontello';
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}

Styling contact form labels

Form field labels inherit the styles from the theme options. However, you can customize the style of the labels using CSS:

Code snippet

CSS

/*----------------------------------------
// CSS - Contact form Lable
//--------------------------------------*/

.avia_ajax_form label {
color:#00a8e0;
}

/* Required field (Styling the asterisk ) */
.avia_ajax_form label .required {
color:red;
}

Styling Placeholder text

The code below will clear the placeholder text “onfocus” and also change the placeholder font style.

NOTE: This code will change the placeholder text sitewide.

Code snippet

CSS

/*----------------------------------------
// CSS - Placeholder text
//--------------------------------------*/

/* Place holder text color */
::-webkit-input-placeholder {
color: #bbb!important;
}
::-moz-placeholder {
color: #bbb!important;
}
::-moz-placeholder {
color: #bbb!important;
}
::-ms-input-placeholder {
color: #bbb!important;
}


/* Clear placeholder text on focus*/
[placeholder]:focus::-webkit-input-placeholder {
transition: opacity 0.15s 0.15s ease;
opacity: 0;
}

Styling submit button

Styling the form submit button:

Code snippet

CSS

*----------------------------------------
// CSS - Contact form submit button
//--------------------------------------*/

#top .avia_ajax_form input[type='submit'] {
border: none;
background: #eb5424;
color: #f6f6f5;
}
#top .avia_ajax_form input[type='submit']:hover {
background: #000000;
}

Styling validation error

The form validates all fields when the submit button is clicked. Sometimes if the user leaves a required field empty or a enters a wrong input, the form fields will have a red border. In case you like to highlight this in a different way you can use some custom CSS:

Code snippet

CSS

/*----------------------------------------
// CSS - Form validation error indicator
//--------------------------------------*/

#top .avia_ajax_form .error input[type='text'],
#top .avia_ajax_form .error .text_area {
background: red!important;
}

Styling conformation message

After the email is successfully sent the confirmation message can be styled using the below CSS:

Code snippet

CSS

/*----------------------------------------
// CSS - Form success message
//--------------------------------------*/

#top .avia-form-success {
background: gold;
color:#FFF;
}

Styling contact form 7 to look like Enfold form

If you are using a plugin like “Contact form 7” and would like to make it look similar to Enfold form to maintain design consistency. Please use the below CSS:

Code snippet

CSS

/*----------------------------------------
// CSS - Styling contact form 7
//--------------------------------------*/

/* Textarea email and input fields */
#top .wpcf7-form input[type='text'],
#top .wpcf7-form input[type='email'],
#top .wpcf7-form .wpcf7-textarea {
/*border-color: #d0d2d3;*/
/*background: #dbebfa;*/
/*color: #00334e;*/
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1em;
padding: 13px!important;
border-radius: 2px;
}

/* Submit button */
#top .wpcf7-form .wpcf7-submit {
padding: 15px 30px;
border-radius: 2px;
}

Customization

How to set form field width

Each form field can be set to take a specific width of it’s parent container, allowing us to design custom inquiry forms with the Enfold theme.

Using contact form in widget area

The form element can be placed in a sidebar, footer, as part of a slider, or anywhere else on the site with the help of shortcode.

  • Enable the debug mode to view the page shortcode.
  • Create a new form on an empty page ( it will be easy to copy the shortcode).
  • To place the form in the sidebar or footer go to Dashboard > Appearance > Widgets.
  • Drop a text area widget in footer or sidebar and paste the form shortcode where you need the form to appear.

How to trigger a pop-up form when a button is clicked

It is easy to create a pop-up form. For this purpose, a button element should be used please refer to Button > Button usage section or click here.

Add on click event to the contact form submit button

If you want to track the contact form submissions with google analytics you will need to add an “onclick” event to the submit button.

To do this you can use the “avf_contact_form_submit_button_attr” filter. The advantage is that you don’t need to hack the parent theme files, but if you place the code into your child theme functions.php file, it won’t be affected by the parent theme updates. Insert this code into the child theme functions.php file:

 add_filter('avf_contact_form_submit_button_attr','avia_add_submit_attributes_to_cf', 10, 3);
function avia_add_submit_attributes_to_cf($att, $formID, $form_params){
  $att = "onclick="_gaq.push(['_trackPageview', '/VP/XXX/XXX']);"";
  return $att;
} 

Note – you will need to replace onclick=”_gaq.push([‘_trackPageview’, ‘/VP/XXX/XXX’]);” with your tracking code – it’s just an example. The $formID and $form_params variables contain some information about the contact form (settings, element id, etc.). These variables are useful if you want to set different attributes for different contact forms.

Troubleshoot

My contact form is not sending emails

If you are not receiving e-mails from the contact form, here are some troubleshooting tips that you can try before asking in the support forums.
1. Typos and SPAM
Double check that the e-mail address you’re using does not have any typos. Also be sure to check your spam folder in your e-mail client. If possible, try with another email address which is not linked to a private domain. For example Gmail or Yahoo.
2. Check if WordPress is able to send e-mails
Go to the login screen of your WordPress installation and attempt to recover your user password, if you do get the e-mail then it may be that your server is only allowing e-mails sent from the default WP address (should be like “wordpress@yoursite.com”). In this case, you can set the Enfold contact form to send messages from that address, just add the following snippet to your theme/child theme functions.php file:

 function change_cf_from() {
    return "wordpress@yoursite.com";
}
add_filter('avf_form_from', 'change_cf_from', 10); 

3. Deactivate Plugins
If you see the contact form “Send” button is not responding then it could be that a plugin is causing a JavaScript conflict on the page. Deactivate all plugins and try again.
4. Third-party plugin form testing
Install the Contact Form 7 plugin, create a Form and do some tests. If no e-mails are received then it’s most likely a problem with your hosting provider. You will want to contact them and let them know you are having trouble with e-mail sending to see if there are any problems.
5. Using SMTP
If your hosting provider requires you to use SMTP then you can setup the WP SMTP plugin to have WordPress use SMTP instead of PHP mail. You will need to grab the SMTP server information from your hosting provider.

Mailto links not working

By default, some browsers do not handle the mailto links so nothing happens when you click on the email links in your browser. Do not worry it is a one-time setup. Let’s make sure your browser is set up correctly to handle the mailto links please follow the steps below:

1. If you are using chrome go to Chrome Settings > Content Settings > Manage Handlers

2. If Manage Handler setting is empty click on the double diamond icon that appears when you first log in to Gmail and select “Allow” mail.google.com to open email links and repeat the first step.

This should open the email links in the browser. If you still have any issue check the mailto link is set up as mentioned here https://css-tricks.com/snippets/html/mailto-links/

We recommend using the contact form because some browsers depend on the user settings.

Contact form going to SPAM

There is nothing on our side that can control which email gets flagged as spam. That is up to your mail service and your domain reputation to that spam filter, but you can give SMTP plugin a try.

Emails arive late

There is not much we can help you with, as it is the mail server that handles outgoing emails. Please contact your host to resolve third party issues.

Resource