标签： forms

How To Use Conditional Logic In Avada Forms

With Avada 7.3, Conditional Logic can now be found in Avada Forms. Conditional Logic can be used to create forms that change based on user』s input. You can configure fields to display or hide based on a user』s response to other fields. This allows you to tailor your forms to your users』 specific needs. The advantages of Conditional Logic in Forms is best seen in longer forms. With Conditional Logic, these forms can be shorter and more specific, as they are personalised to the user』s choices. Let』s look at how this works in Avada Forms.,Where To Find It?You will find Conditional Logic on almost every Form Builder Element, under the new Conditionals Tab. As you can see in the screenshot below, when you click on the + Add New Logic button, you are presented with a Conditional Statement dialog, that has a Field option, a Relational Operator selector (Equal To, Not Equal To, Greater Than, and Less Than, and Contains), and a Value field beneath this. Below the Conditional Statement is an AND/OR connective, which you can to combine further Conditional Statements.
There will be an enormously wide variety of situations of where and how this feature could be used. In this document, we will look at a specific example of a Conditional Contact Form on a Photographer』s Website.,Conditional Logic DeterminantsConditional display of Form Elements is determined by the logic entered through the Field, Relational Operators and the Value entered, as well as the AND/OR connective. Before we look at a specific example of how to use Conditional Logic in a Form, let』s first look at the conditional logic determinants individually.
FieldUnder the Select A Field dropdown menu is a list of all Form Element fields in the current Form. These labels are pulled from the Field Label option in the other Form Elements (or Field Name if that is empty). With the Field option, you choose a Field from another Form Element, that you are going to be determining the logic from, that will affect the current field. In our example below, this will be the 『What type of photography do you require『 field.
Relational OperatorsYou will find the Relational Operators directly under the Field option. These five operators determine how the Field and the Value are connected logically.
The choices are Equal To, Not Equal To, Greater Than, and Less Than, and Contains. There are obviously many possible relational operators you can apply to your forms, depending on your circumstances. In the simple example below, we are using the Equal To operator, so the Conditional Element will display if the selected Field is EQUAL TO the inputted Value.
Condition ValueThe Condition Value option is an input field. Here you enter the value you want the selected Field to have for the logic to work. In our example further below, the values entered correspond to one of the available choices of the dropdown list in the Select Fields Option in our chosen 『What type of photography do you require』 field.
But it can be as simple as a text value. So if you want a new Form Element to appear if the First Name Field gets a value of Bob, then you』d simply enter Bob as the Value, and when someone types Bob (or bob) into the First Name field, the conditional field would instantly appear. The value is simply the outputted contents of the field that triggers the logic.
AND/OR ConnectiveYou can make more complex forms of Conditional Forms by using the AND/OR connective. Simply click on + Add New Logic again for a new Conditional Statement to appear under the first, and you can connect them, by using the AND/OR selection. A simple, yet slightly silly example of this would be that IF the First Name value is EQUAL TO Will, AND the Last Name value is EQUAL TO Smith, then a new Text Field Form Element could appear, asking 「Are you THAT Will Smith??』 I』m sure you get the idea…
767,635 Businesses Trust Avada
Get Avada767,635 Businesses Trust Avada
Get Avada767,635 Businesses Trust Avada
Get Avada,How To Add Conditional Logic To A FormOK, so let』s look at a specific example. As we have discussed, the basic idea of conditional logic with forms is that you add conditional logic to a form field to get it to display or hide based on the value of another field. In our example of a Photographer』s Contact Form, there is a section asking the user to select the type of photography they require. Depending on the choice the user makes here, a range of new fields then appear. This personalizes the form and makes completions more likely.
As we can see in Avada Live in the screenshot below, the first Element with Conditional Logic is the Range Field Element. Under the Conditionals tab, we can see that the logic is expressing that IF the 『What type of photography do you require『 field is EQUAL TO the Value of Family Portrait (on location) THEN the Range Field Element displays.
In this example, the three Elements beneath this one also share the same logic, and so when a user selects Family Portrait (on location) on the front end, the four conditional Elements display immediately, as can be seen in the screenshot below.
If however the logic is not true, then the Elements will not display. With this Conditional Form Example, there are different groups of Elements (all in the same Column) that are set to display based on the selection of the Photography Type Field.
So if the user now selects Fashion Shoot (on location) then another range of Elements will appear, as can be seen in the screenshot below, and the previously displayed Elements will no longer display, as their logic is not longer true.
In this way, you can present a range of conditional fields to the form, based on the input of the user.
This was just one simple example of using Conditional Logic in Avada Forms. Using the various other Relational Operators and the AND/OR connective to combine Conditional Statements, the possibilities of Conditional Forms expands to be able to meet a wide range of situations indeed.

The Avada Form Builder

Introduced in Avada 7.1, and reducing the need for extra plugins, we have developed Avada Forms, a powerful and fully integrated form solution into the Avada Website Builder.
Using the full power of the Avada Form Builder, you can create your own forms using any of our 19 new Form Elements, as well as any other Design Elements you might like. And if you don』t want to build your forms from scratch, you can start with any one of our 11 unique Prebuilt Forms, and then customize them to suit your needs.
With features like integration with HubSpot, custom confirmation messages, and four different submission types, including the ability to save entries to a database, Avada Forms will become an indispensable tool for you when building your sites. Read on for more details, and watch the video for a visual overview.,Overview
Getting Started

Creating A Form

Form Design & Builder Elements

Local Form Options
Adding Your Form To A Page With The Avada Form Element,Getting StartedYou can find Avada Forms on the Avada Dashboard. From the Forms menu, you can access both the Form Builder, and the Form Entries page. You can also find a link on the WordPress Dashboard sidebar, at Avada > Forms, which takes you to the Form Builder page, where you can add forms, and manage your existing forms.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Creating A FormWhen you first create a form, you are redirected to the WordPress editor (unless you have Avada Builder Auto Activation turned on in the Avada Builder Options), from where you can choose which builder interface, with which to build your form. As always, you can work with either Avada Builder, the back-end builder, or Avada Live.
The first consideration is whether you want to build a custom form from scratch, or start with one of the prebuilt forms. On the starter page you will see an 『Add Container』 button, and a 『Prebuilt Form』 button. For more information on the full range of Prebuilt Forms, please see the Prebuilt Avada Forms documentation. But for the purposes of this tutorial, let』s assume you are starting with a blank form.,Form Design & Builder ElementsOne of the huge advantages in using Avada Forms is that by using Avada Builder, it』s now very easy to design your Form layout using any manner of column sizes and combinations, and any combination of Avada Form and Design Elements. With this method, form design is both powerful and easy.
After adding a starting Container/Column combination from the Add Container button, you are now faced with a + button, to add your Elements. There are 19 new Form Builder Elements, specifically created for the Avada Form Builder, and of course, you can use any of the other Avada Design Elements in your form design as well.,Local Form OptionsOnce you have designed and created your Form, you can use the Local Form Options to customize its appearance, specify what happens when your form is submitted, customize confirmation messages, and set privacy options. The Form Options are found in the same place as where the Avada Page Options are usually located. The image below for example, is from the back-end Avada Builder. Check out the Avada Form Local Options doc, for a full rundown.
There are also Global Options for the default styling of your forms, Google reCAPTCHA, and HubSpot, found at Options > Forms. See the Avada Forms Global Options doc for more details on this.,Adding Your Form To A Page With the Avada Form ElementOnce you have completed your Form, it』s time to add it to a page. This is easily done with the Avada Form Element. With this simple helper Element, you can add any existing form anywhere you like into your page content. See the Avada Form Element doc for full details.,Useful Links & Resources
The Avada Form Builder

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Avada Form Builder Elements

Avada Form Builder comes with 20 unique Elements, with which to build your forms. You can also use any of the Avada Design Elements in the Form Builder as well. In this document, we will have a quick look at all the Avada Form Elements, and what they can do. For specific details, options, and examples of each Element, follow the links in the Element descriptions below.,Checkbox FieldA Checkbox Field is used to select any number of answers from a list of choices. You can add options manually, use predefined lists, or bulk import lists. If you only want users to make one selection, use the Radio Field Element instead. See the Registration Form Dark Prebuilt Form for an example of the Checkbox Field Element in use.
View Element Page!View Element Demo Page!,Date FieldThe Date Field Element allows you to enter a formatted date using a date picker calendar option. See the Reservation Form Prebuilt Form for an example of the Date Field Element in use.
View Element Page!View Element Demo Page!,Email FieldAn email field is a single textbox that』s validated to only accept email addresses. Almost all of the Prebuilt Forms use the Email Field Element.
View Element Page!View Element Demo Page!,Hidden FieldThis is an advanced field Element. You can use a hidden field to include unmodified data when a form is submitted. They are hidden from the user completely, but can store a value that is sent along with the form. You could use JavaScript to identify the browser or page id, or many other things.
View Element Page!View Element Demo Page!,Honeypot FieldThe Honeypot Field Element is a security Element you can add to your Avada Form. A honeypot is a field added to the form that the users can』t see (due to CSS or JavaScript which hides the field). Basically, if a spambot fills in a field that valid users can』t see, this alerts us to their activity. So if the honeypot field is filled in, we can confidently reject the form as spam.
View Element Page!View Element Demo Page!,Image Select FieldThe Image Select Field Element allows you to add a range of images to your form, that a user can then select from. You can add multiple images, control their size, allow users to select multiple or just a single image, have certain image pre-selected etc. There are many possible uses for this Element.
View Element Page!View Element Demo Page!,NoticeThe Notice Element is used to display messages after form submission. There is a field for both a success message, and a failure message. They come pre-populated with default messages, or you can totally customize them with your own messages. You will find this Element on almost all the prebuilt forms.
View Element Page!View Element Demo Page!,NumberThe Number Element is a field used to allow the user to enter any numeric value. See the Reservation Prebuilt Form for an example of this in use.
View Element Page!View Element Demo Page!767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Password FieldThe Password Field Element is a special text field on a form that doesn』t display what the user types. This value is then passed on in the submission entry. See the Sign Up Prebuilt Form for an example of this Element.
View Element Page!View Element Demo Page!,Phone Number FieldThe Phone Number Field Element is a numeric field used to collect mobile or landline numbers. It does not accept spaces or letters. Examples of this Element can be found in the Registration Form Dark, Standard Contact Form, Sweepstakes Form, and the Reservation Form, to name a few.
View Element Page!View Element Demo Page!,Radio FieldThe Radio Field Element is used to display a list of options for a user to select as a choice. Only one selection is possible. You can see an example of this Element in the RSVP and Survey Prebuilt Forms.
View Element Page!View Element Demo Page!,Range FieldThe Range Field Element defines a slider control between minimum and maximum numeric values. You can see an example of this Element in the Registration Prebuilt Form.
View Element Page!View Element Demo Page!,Rating FieldThe Rating Field Element is used to rate something between a set minimum and maximum number of stars. You can see an example of this Element in the Survey Prebuilt Form.
View Element Page!View Element Demo Page!,reCAPTCHA FieldThe reCAPTCHA Field Element helps protect your website forms from spam and abuse. You must first configure the Global Options found at Avada > Forms > Google reCAPTCHA for this to work.
View Element Page!View Element Demo Page!,Select FieldThe Select Field Element allows users to choose an option from a set of predefined choices. These display in a dropdown list. You can see an example of this Element in the Sign Up Prebuilt Form.
View Element Page!View Element Demo Page!,Submit ButtonThe Submit Button Element is the one required Element in a form, as it is a button for submitting form data to a form-handler. All prebuilt forms have one. Submission Type is controlled in the Local Form Options.
View Element Page!View Element Demo Page!,Text FieldThe Text Field Element is a basic text field you can use to collect information such as a name or address. You can see several examples of this Element in the Sign Up and Upload Prebuilt Forms, as well as several others.
View Element Page!View Element Demo Page!,Textarea FieldThe Textarea Field Element provides a multi-line text box for extended amounts of information. This is used on many of the Prebuilt forms, and is perfect when you need an area for the user to have a large amount of freedom with regards inputting text.
View Element Page!View Element Demo Page!,Time FieldThe Time Field Element allows a user to select a specific time in hours and minutes. You can see an example of this Element in the Reservation Prebuilt Form.
View Element Page!View Element Demo Page!,Upload FieldAllows users to easily upload files via a form. You can control allowed file extensions, and file size. You can see an example of this Element in the Upload Prebuilt Form.
View Element Page!View Element Demo Page!

Avada Form Local Options

For each individual form you create in the Avada Form Builder, there is the Form Options panel, to customize its appearance, specify what happens when your form is submitted, customize confirmation messages, and to set privacy options.
In Avada Builder (the back-end editor) the Form Options are found at the bottom of the page, where the Page options usually reside. In Avada Live, as you can see in the image below, they』re in the Sidebar, again, where the Page Options usually reside. Let』s look at each of the Form Option sections in turn.,OverviewSettings
Appearance

Submission

Confirmation

Privacy

Custom CSS

Import/Export,SettingsThis page simply controls the Page Title and Slug for the Form.
View the Options Screen,AppearanceWith these options you can control the overall appearance of your Form, including colors, margins and borders.

Preview Width – Select the width to preview the form at in the live editor. Note: this is only used for previewing purposes.

Label Position – Make a selection for form input fields labels position. Choose from Above, or Below.

Tooltip Text Color – Controls the text color of the field tooltip.
Tooltip Background Color – Controls the background color of the field tooltip.
Field Margin – Controls the vertical height between form fields. In pixels (px), ex: 10px.
Field Height – Controls the height of the form fields. Use any valid CSS value. Leave empty for default value.Field Font Size – Controls the font size of the form fields text. Use any valid CSS value. Leave empty for default value.Field Background Color – Controls the background color of the form input field. Leave empty for default value.Field Text Color – Controls the text color of the form input field. Leave empty for default value.
Field Label Color – Controls the label color of the form input field. Leave empty for default value.
Field Placeholder Color – Controls the label placeholder of the form input field. Leave empty to use a faded version of the form text color.Field Border Size – Controls the border size of the form fields. Leave empty for default value.
Field Border Color – Controls the border color of the form input field. Leave empty for default value.
Form Border Color On Focus – Controls the border color of the form input field on focus. Leave empty for default value.
Field Border Radius – Controls the border radius of input field. In pixels. Leave empty for default value.
View the Options Screen,SubmissionThe Submission options control what happens when someone submits the form. Depending on the Submission Type selected – Save To Database, Send To URL, Send To Email, Save To Database and Send To Email, or Default POST HTML Form (non-AJAX) various options will be available.
Depending on your form you might choose any of these Submission Types, but the most common would be Save To Database, and Send To Email. Before we look at the options for the various Submission Types, here』s a quick rundown on the various types.

Save To Database – In general, storing form data in a database table is a convenient way to manipulate the received data and to create stats, do analysis etc. Also, through this option you can store the data directly on site. The database table can easily be exported or even connected to an automated script, which can do all sorts of data manipulation for you.
Send To URL – Depending on the script running on that URL, submission data could be caught and processed, either by a custom script, or through a dedicated URL provided by a newsletter service supplier. Also, it allows you to show a custom created success page, with Call To Actions etc.Send To Email – Here, the form data is simply sent to an email of your choice. This will be a common choice for many forms and users. When using Send To Email, or Save To Database and Send To Email, you can also use placeholders in your email submission fields to dynamically pull data from the form submission. See the Avada Forms Email Submission Placeholders doc for more information.Save To Database and Send To Email – This is a combination of submission types 1 and 3. It saves the entry to a database, and also forwards it to an email address, as specified in the submission type options.Default POST HTML Form (non-AJAX) – This is basically the same as Send to URL, with the exception that the data is sent simply to the same URL where the form is displayed. Unless you need this, Send to Email is a better choice.,Save To Database
Submission Type – Save To Database

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
View the Options Screen767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Send To URL
Submission Type – Send To URL.

Submission Method – Make a selection for form submission method. Choose from Post, or Get.
GET: Appends form-data into the URL in name / value pairs. It has a limit of a few thousand characters because of this and is not the right option if you send sensitive data. It is convenient though for creating bookmarks and also to extract the data (which is something the site owner has to do).
POST: Appends form-data inside the body of the HTTP request. There are no size limitations and the data is not part of the URL, thus it is more secure.

Form Submission URL – Enter the URL where form data should be sent to.

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
Custom Headers – If you are using this form to integrate with a third-party API, you can use custom headers to implement authentication or pass-on any extra headers the API requires. Button: Add Headers.Custom Header Key – (displays when Add Header is clicked) Enter the key for the request』s custom header. Example: Content-TypeCustom Header Value – (displays when Add Header is clicked) Enter the value for your custom-header.View the Options Screen,Send To Email
Submission Type – Send To Email

Form Submission Email – Enter email ID where form data should be sent to. If left empty, email will be sent to the WordPress admin.

Email Subject – Enter email subject. If left empty, the form title will be used.

Email From Name – Enter email from name. If left empty, WordPress will be used.

Sender Email – Enter sender email address. If left empty, [email protected] will be used.

Reply To Email – Enter the 『reply to』 email address.

Attach Uploaded Files – Add uploaded files as email attachments.

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
Custom Headers – If you are using this form to integrate with a third-party API, you can use custom headers to implement authentication or pass-on any extra headers the API requires. Button: + Add Header.Custom Header Key – (displays when Add Header is clicked) Enter the key for the request』s custom header. Example: Content-TypeCustom Header Value – (displays when Add Header is clicked) Enter the value for your custom-header.View the Options Screen,Save To Database and Send To Email
Submission Type – Save To Database and Send To Email

Form Submission Email – Enter email ID where form data should be sent to. If left empty, email will be sent to the WordPress admin.

Email Subject – Enter email subject. If left empty, the form title will be used.

Email From Name – Enter email from name. If left empty, WordPress will be used.

Sender Email – Enter sender email address. If left empty, [email protected] will be used.

Reply To Email – Enter the 『reply to』 email address.

Attach Uploaded Files – Add uploaded files as email attachments.

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
Custom Headers – If you are using this form to integrate with a third-party API, you can use custom headers to implement authentication or pass-on any extra headers the API requires. Button: Add Headers.Custom Header Key – (displays when Add Header is clicked) Enter the key for the request』s custom header. Example: Content-TypeCustom Header Value – (displays when Add Header is clicked) Enter the value for your custom-header.View the Options Screen,Default POST HTML Form (non-AJAX)
Submission Type – Default POST HTML Form (non-AJAX)

Submission Method – Make a selection for form submission method. Choose from Post, or Get.
– GET: Appends form-data into the URL in name / value pairs. It has a limit of a few thousand characters because of this and is not the right option if you send sensitive data. It is convenient though for creating bookmarks and also to extract the data (which is something the site owner has to do).
– POST: Appends form-data inside the body of the HTTP request. There are no size limitations and the data is not part of the URL, thus it is more secure.

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
Custom Headers – If you are using this form to integrate with a third-party API, you can use custom headers to implement authentication or pass-on any extra headers the API requires. Button: + Add Header.Custom Header Key – (displays when Add Header is clicked) Enter the key for the request』s custom header. Example: Content-TypeCustom Header Value – (displays when Add Header is clicked) Enter the value for your custom-header.View the Options Screen,ConfirmationWith these options you can control the overall appearance of your Form, including colors, margins and borders.

Form Confirmation Type – Select what should happen after the form is submitted successfully. Choose from Display Message, or Redirect To URL. When using Display message, you use the Notice Element in your Form to display your Success and Failure Messages. These can be placed anywhere in the form, for example at the bottom, or the top. If they are at the top, when the user submits the form, the page will scroll to the top of the form and display the message.

Redirect URL– Only displays if above option is set to Redirect To URL. Enter the URL which the user should be redirected to after a successful submission.
View the Display Message Options ScreenView the Redirect URL Options Screen,PrivacyWith these options you can control the privacy options for the Form.

Store IP and User-Agent – Select if you want to store the IP and User-Agent on submissions. Depending on the legislation that applies to your site, you may need to disable this option. Choose from Yes, or No.

Duration of Submissions Log (Months) – Select the duration for which form submissions will be kept in months. You can choose what happens on expiration below.

Submission Expiration Action – Choose what will happen when the time defined above comes to pass. If you have selected to log the user』s IP & UA above, selecting 「Anonymize IP and User-Agent」 will delete these from the log. If you want old entries to be deleted automatically after a certain time, then select 「Delete Submission」.
View the Options Screen,Custom CSSOn this tab, you can add Custom CSS to the Form.

CSS Code – Enter your CSS code in the field below. Do not include any tags or HTML in the field. Custom CSS entered here will override the theme CSS. In some cases, the !important tag may be needed. Don』t URL encode image or svg paths. Contents of this field will be auto encoded.
View the Options Screen,Import / ExportOn this tab you can export and import form options.

Import Page Options – Import Page Options. You can import via file or copy and paste from JSON data.

Export Page Options – Export your Page Options. You can either export as a file or copy the data.
View the Options Screen,Useful Links & Resources
The Avada Form Builder
Prebuilt Avada FormsAvada Form Global OptionsHow To Integrate HubSpot With Avada FormsAvada Form Element

Avada Forms Email Submission Placeholders

When selecting either the Send To Email, or the Save To Database and Send To Email Form Submission type, with Avada 7.1.1 and up, you can use placeholders in your submission fields to dynamically pull information from your forms. Let』s have a look at the various options.,Email PlaceholdersThe most common fields to use Placeholders are the Email Subject, Email From Name, and the Reply To Email fields. By using placeholders, your emails will be customized on arrival, dynamically pulling the data from the form to display in your email. If you wish, you can also use multiple placeholders in fields.
Let』s look at an example. I will configure a Contact Form, (this one is from the Podcasts prebuilt website) using Placeholders in the Submission tab of the Form Options, to customize how the email looks upon submission.,Email SubjectFor Email Subject, I have a Text Field Element in our Form with a Field Label of Subject and a Field Name of subject. So, in our Email Subject field in the Submission area, I will add [subject]. That way, when the email arrives, it will have the subject entered by the user in the Subject Field of the email.,Email From NameIf left empty, an email sent from your form will show as coming from WordPress. This is pretty boring, and not very descriptive. So by adding placeholders for the Name fields used in our form, we can personalise this area of the email. I have both a First Name and Last name field in my form, in the Email From Name field in the Submission area, I will add [first_name] [last_name] so that in the From section of the email, it will be personalised, (eg. John Smith).,Sender EmailThis field controls the email address that the form shows as coming from. There is good reason not to use placeholders here, and, instead, to use an email address from your own domain. If you think about it, anyone could send an email on behalf of anyone else using your contact form if it arrives 「From」 the user』s inputted email address. This means it would be wide open to abuse. Also, most email servers now verify if the sender has the right to use that email address. And so, when the checks fail, the server identifies the mail as spam, based on a 「forged sender address」. This hurts deliverability. The visitor』s name can still appear in the Email From Name field by using a placeholder, as seen below, but their email address should not be placed in the Sender Email field.
Best practice is to use something like [email protected] or [email protected], which is the default sender address of WordPress transactional emails, such as password recovery and automatic update notifications. It should end with your domain name and extension, but what you put before the @ doesn』t matter. Do not use an existing address.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Reply To EmailWith this field, you can add the email address of the person submitting the form, so you can easily reply to the email, and it will be sent to right place. Otherwise the reply would be going to the address in the Sender Email field, which if left empty is [email protected].
The Email Reply to has a specific format you must use for it to work. This is not Avada specific, rather it』s a WordPress convention. The format to use is [text_field] .
So, for this example, I will use the First Name field and the Email Address field as such: [first_name] ,Submitting The FormSo now, if I fill out the form as a user, using the following information, and send it, the placeholders will go to work.,Receiving The EmailAnd when the email comes in, as we can see, our placeholders have pulled the information from the form submission. The title of the email is being pulled form the Subject of the Contact Form. The email is showing as coming from John Doe, but it is using the domain wordpress email address.
And when we hit reply in the email client, the email is addressed correctly, using the first name and the email address from the placeholders.,Useful Links & Resources
The Avada Form Builder

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Avada Forms Global Options

In the Avada Global Options, with Avada 7.1 and up, you will find the Forms tab, which allows you to set global options for Avada Forms, as well as any other 3rd party forms that have design integration with Avada. Let』s have a look at the options here.,Overview
Forms Styling

Google reCAPTCHA

HubSpot,Forms StylingWith these options you can control the overall appearance of your Form, including colors, margins and borders.

Form Input and Select Height – This controls the height of all search, form input and select fields.

Form Background Color – Controls the background color of form fields.

Form Font Size – Controls the size of the form text.

Form Text Color – Controls the color of the form text.

Form Border Size – Controls the border size of the form fields.

Form Border Color – Controls the border color of the form fields. This is a dependent option that always stays visible because other options can utilize it.

Form Border Color On Focus – Controls the border color of the form fields when they have focus. This is a dependent option that always stays visible because other options can utilize it.

Form Border Radius – Controls the border radius of the form fields. Also works, if border size is set to 0..
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Google reCAPTCHAWith these options, you can configure Google reCAPTCHA for use in your Avada Forms.

reCAPTCHA Version – Set the reCAPTCHA version you want to use and make sure your keys below match the set version. Choose from V2, or V3.
reCAPTCHA Site Key – Follow the steps in our docs to get the site key.
reCAPTCHA Secret Key – Follow the steps in our docs to get the secret key.

reCAPTCHA Security Score – Set a threshold score that must be met by the reCAPTCHA response. The higher the score the harder it becomes for bots, but also false positives increase. Choose from 0.1 to 1.0.

reCAPTCHA Badge Position – Set where and if the reCAPTCHA badge should be displayed. NOTE: Google』s Terms and Privacy information needs to be displayed on the contact form.,HubSpotWith this option you can connect your HubSpot account to Avada Forms. For more details, see the How To Integrate HubSpot With Avada Forms doc.

HubSpot API – Select a method to connect to your HubSpot account. Choose from OAuth (recommended) or API Key.,Useful Links & Resources
The Avada Form Builder
Avada Form Local OptionsHow To Integrate HubSpot With Avada FormsAvada Form Element

How To Integrate HubSpot With Avada Forms

A very useful feature of Avada Forms, is the ability to connect your HubSpot account to Avada Forms, and then configure a form to automatically add any form submissions into your Contacts in HubSpot. Read below for specific details of how this works, and watch the video for a visual overview..,Connecting Your AccountThe first step is to connect Avada Forms to your HubSpot account. To do this, head to Forms > HubSpot in the Avada Global Options. Here you will find the HubSpot API options, where you can select a method to connect to your HubSpot account. You can choose from OAuth, or API Key. OAuth is our recommended option, but you can choose either method. If you choose OAuth, a 「Connect with HubSpot」 button will appear. Just click on this, and a page will open in another tab in your browser, where you can sign into your HubSpot account, and you can then choose the account you wish to connect Avada Forms to.
If you choose API Key instead a HubSpot API Key field will appear, where you can enter your HubSpot API Key. There is also a link to the HubSpot Knowledge Base that shows you the steps to find your API Key.
In both cases, Avada Forms will be connected to your HubSpot account, and you will find yourself back in the Global options with a message confirming the connection. Make sure to save your changes.
767,636 Businesses Trust Avada
Get Avada767,636 Businesses Trust Avada
Get Avada767,636 Businesses Trust Avada
Get Avada,HubSpot Submission OptionsOnce you are connected to HubSpot, you will then find a HubSpot Action field in the Submission area in the Form Options panel. The two options you will see are None, and Create or Update Contact. If you select that option, a range of HubSpot mapping options will appear beneath it. These will show each Form Field Label, and a mapping option beneath it. For this to work, you must have an Email field in your form.
In each field you want mapped, select the corresponding Field in your HubSpot account for it to be mapped to. Fields that show Automatic Property will attempt to map fields automatically by matching labels, but clicking on this will reveal a dropdown list of both common and other HubSpot fields, and here you can specifically map each email form fields to the specific HubSpot field.
IMPORTANT NOTE: Note that your form MUST have an email field to be able to add contacts to your HubSpot account.Once you are done mapping fields, just save your changes, and the next time someone submits the form, their contact details will be added (or updated if their email address is already listed in the Contacts) in your HubSpot account. The advantage of this, is that you then have access to the full range of marketing actions for each contact in you Hubspot account.
This is a powerful feature for users of Avada and HubSpot, so check it out. To see more about installing or connecting HubSpot to your Avada website, check out our How To Use HubSpot with Avada doc, or for a broader overview, check out the Turn Your Avada Website Into A Marketing Powerhouse With HubSpot blog post.,Useful Links & Resources
The Avada Form Builder
Avada Form Local OptionsAvada Form Global OptionsAvada Form Element

How To Integrate MailChimp With Avada Forms

A very useful feature of Avada Forms, is the ability to connect your Mailchimp account to Avada Forms, and then configure a form to automatically add any form submissions directly into your Contacts in your Mailchimp account. Read below for specific details of how this works, and watch the video below for a visual overview.,Connecting Your AccountThe first step is to connect Avada Forms to your Mailchimp account. To do this, head to Forms > Mailchimp in the Avada Global Options. Here you will find the Mailchimp API options, where you can select a method to connect to your Mailchimp account. You can choose from OAuth, or API Key. OAuth is our recommended option, but you can choose either method. If you choose OAuth, a 「Connect with Mailchimp」 button will appear. Just click on this, and a page will open in another tab in your browser, where you can sign into your Mailchimp account, and you can then choose the account you wish to connect Avada Forms to.
If you choose API Key instead a Mailchimp API Key field will appear, where you can enter your Mailchimp API Key. There is also a link to the Mailchimp Knowledge Base that shows you the steps to find your API Key.
In both cases, once you authorize the connection, Avada will connect to your Mailchimp account, and you will find yourself back in the Global Options with a message confirming the connection. Make sure to save your changes.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Mailchimp Submission OptionsOnce you are connected to Mailchimp, you will then find a Mailchimp Action field in the Submission area in the Form Options panel of an individual form.
To get your form submission contacts to be automatically added to Mailchimp, you need to do a few things.
1. Choose the Create/Update Contact Action.
2. Choose a List to send them to.
3. Optionally, enable the Double Opt-In option.
4. Map the fields in your form to the fields in your Mailing List.
Towards the bottom of the Submission Panel you will see a notice that you are connected to Mailchimp. Directly under this, is the Mailchimp Action option, which has two options – None, and Create / Update Contact. If you select that second option, a Mailchimp List option will appear below. Here, choose the Mailing List you want to add the contacts to.
Under this, there is a Double Opt-in option, which if enabled, will mean that everyone who submits the form will receive a follow-up email with a confirmation link to verify their subscription.
Finally, under this, you will see a range of Mailchimp mapping options. There will be one for each Form Field, with a mapping option beneath it. For this to work, you must have an Email field in your form.
In each field you want mapped, select the corresponding Field in your Mailchimp account for it to be mapped to. By default, fields will show Automatic Field, and will attempt to map fields automatically by matching labels, but clicking on this will reveal a dropdown list of both common and other Mailchimp fields, and here you can specifically map each email form fields to the specific Mailchimp field, as seen below.
IMPORTANT NOTE: Note that your form MUST have an email field to be able to add contacts to your Mailchimp account.Once you are done mapping fields, just save your changes, and the next time someone submits the form, their contact details will be added (or updated if their email address is already listed in the Contacts) in your Mailchimp account. The advantage of this, is that you then have access to the full range of marketing actions for each contact in your Mailchimp account. This is a powerful feature for users of Avada and Mailchimp, so check it out.,Useful Links & Resources
The Avada Form Builder
Avada Form Local OptionsAvada Form Global OptionsAvada Form Element