Forms – Avada Website Builder https://avada.com For WordPress & WooCommerce Wed, 13 Nov 2024 00:32:48 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 How To Set Up Form Notifications https://avada.com/documentation/how-to-set-up-form-notifications/ Wed, 13 Nov 2024 00:32:48 +0000 https://avada.com/?post_type=documentation&p=895205

Notifications let you, or others, know about the form submission. You need to set up a notification if you want to recieve the data submitted with the form in an email.

You can set up a notification to have the email sent to a specific address, maybe your own, or a co-worker, or both, or you could also set up a notification that sends an auto-reply to the user. You can add CC and BC email notifications, and you can have an many notifications as you wish for each form you set up. All notifications are created from the Form Options > Notifications tab.

Avada Forms Notifications

Notification Options

In email options, field names within square brackets can be used as placeholders which will be replaced when the form is submitted, ie: [email_address]. For more information check out our Form Placeholders doc.

  • + Add Notification – Click this to add a new notification for the form.

  • Notification
  • Label – Enter notification label.

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

  • CC EmailEnter additional CC emails. Add one address per line.

  • BCC EmailEnter additional BC emails. Add one address per line.

  • Email SubjectEnter email subject. If left empty, the form title will be used.
  • Encode Email Subject Select if you want to encode email subjects. This helps to display special characters correctly in the subject field. A few hosting environments and email clients might have issues with this setting.

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

  • Sender Email Enter sender email address. If left empty, wordpress@sitename.com will be used.
  • Reply To Email Enter reply to email address.
  • Attach Uploaded FilesAdd uploaded files as email attachments.

  • Email Message – Enter email message, leave empty to get the default message with all form fields. You can add form fields to the message by insert field name wrapped with square brackets ie: [email_address], also you can add all fields with [all_fields] tag.

Watch the Notifications section of the How To Use Avada Forms by clicking on the video below.

For privacy reasons YouTube needs your permission to be loaded.

Or for a short step by step example of setting up an auto-reply notification, watch the Avada Short below.

For privacy reasons YouTube needs your permission to be loaded.
]]>
How To Use Mailchimp Tags With Avada Forms https://avada.com/documentation/how-to-use-mailchimp-tags-with-avada-forms/ Mon, 26 Jun 2023 21:36:44 +0000 https://avada.com/?post_type=documentation&p=892776

Tags are are labels you create to help organize your contacts in Mailchimp. Tagging lets you bring your own contact structure into Mailchimp and label contacts based on data you know about them. Tags are highly customizable, so you can create and assign them as you see fit.

The main difference between Mailchimp Tags and Groups, is that Groups are intended to be contact selected, and Tags are applied to contacts by you. See the How To Use Mailchimp Groups With Avada Forms for more information on that feature. You can also add custom data to your contacts in Mailchimp. See the How To Create And Map Custom Data In Mailchimp document on how to do that.

Using Avada Forms, you can capture information and add it to your contacts as they submit a form. Tags can then be the basis for building audience segments for sending emails to targeted audiences. Let’s have a deeper look at what’s involved.

Setting Up Your Tags in Mailchimp

Mailchimp Tags are completely customizable, so you can use them however you need to. You might want to create a comprehensive tag structure to organize all your contacts, or you might need a few tags as a lightweight way to identify some key contacts. There are several ways to add Tags in Mailchimp. You can create and add tags from the contact table, a contact’s profile, or from the Tags page in your audience.

For our example, let’s say you have three forms on your website – a standard Contact Form, a Newsletter Subscription Form, and a Register for Upcoming Events Form. You might then set up tags in Mailchimp for Lead, Website Subscriber, and Event Interest.

Mailchimp > Create Tags

Assigning Tags in Avada Forms

Once you have set up your tags in Mailchimp, you can add them to your Avada Forms. In Avada Forms, specific tags are then selected for specific forms. For the Contact Form, you would add the ‘Lead’ tag, for the Newsletter Subscription Form, you would add the ‘Website Subscriber’ tag, and for the Register For Upcoming Events form, you would add the ‘Event Interest’ tag. In this way, anyone who submits one of those forms will get a tag added to their contact in Mailchimp.

The first step with this is to make sure Avada Forms is connected with your Mailchimp account. See the How To Integrate Mailchimp With Avada Forms document for more information on how to do that.

Once your account is connected, head to the Form Options tab of the form you are interested in. Here, under Submission, your will see an Actions option. Select Mailchimp from the dropdown list.

You should then see a Mailchimp option set below this. If you edit this options set, you will see a Mailchimp Action option. Click on Create / Update Contact to continue.

Now, select the Mailchimp list you want to connect to. There are options for Opt-In preferences, Form Consent, and Mailchimp Mapping, but the one we want for this document is in the Mailchimp Tags option.

Here you can select from any of the Tags you have added to your connected Mailchimp account. In the screenshot below, we have selected the Website Subscriber tag for those users who submit the Newsletter Form.

And that’s it! Now, when a user submits the form, they will have that specific tag added to their contact, enabling them to easily segment your list for specific marketing actions.

Avada Forms > Assign Tags
]]>
How To Create And Map Custom Data In Mailchimp https://avada.com/documentation/how-to-create-and-map-custom-data-in-mailchimp/ Mon, 26 Jun 2023 21:12:03 +0000 https://avada.com/?post_type=documentation&p=892641

The information you collect through your forms is saved in Mailchimp audience fields and tied to a unique label, called a merge tag. You can then use merge tags to insert personalized or dynamic content into the campaigns you send.

This is somewhat different to Mailchimp Tags, which you can assign to a contact, or Mailchimp Groups, which users join by selecting their preferences. See the How To Use Mailchimp Tags With Avada Forms, and the How To Use Mailchimp Groups With Avada Forms documents for more information on those features.

But in this document, let’s look at how you can use Avada Forms and Mailchimp together to map custom data into your Mailchimp contacts.

Setting Up Your Audience fields and Merge tags

Audience Fields are data added by you or collected from contacts through a form. They are custom fields that you create to store different types of data about each contact. Examples of this include first name, last name, and birthdays. They are a flexible way to store data about contacts. You can then use these fields as Merge Tags in your campaigns, personalising your emails. You can also add your own Merge tags and then add them to your Avada Form to collect any other data you like.

You add audience fields and merge tags from your All Contacts Page in Mailchimp. Just go to Settings > Audience fields and *|MERGE|* tags.

Settings > Audience Fields and Merge Tags

On this page, you can add a range of fields, from Text, Number, Radio Buttons, Drop Downs, Birthday, Address, Zip Code (US Only) Phone, Website, or Image.

Let’s imagine we are a Pet Store, and we have set up two new fields in Mailchimp (a text field, and a date field) and with our form, we are going to ask or users to add their pet’s name and birth date. We will then use this information to send them a small present on their birthday!

Merge Tags Added

Mapping the Custom Data to Mailchimp

Once we have our fields added in Mailchimp, we can set up our Form and then map the custom data to Mailchimp.

In the screenshot below we have a standard contact form, and I have added two extra fields, a Text Field Element, and a Date Field Element. Now we can map them to our Mailchimp contacts. This is done in the Form Options > Submission tab, as seen below.

The first step here is to make sure Avada Forms is connected with your Mailchimp account. See the How To Integrate Mailchimp With Avada Forms document for more information on how to do that.

Once your account is connected, head to the Form Options tab. Here, under Submission, your will see an Actions option. Select Mailchimp from the dropdown list.

You should then see a Mailchimp option set below this. If you edit this options set, you will see a Mailchimp Action option. Click on Create / Update Contact to continue.

Now, select the Mailchimp list you want to connect to. There are options for Mailchimp Tags, Opt-In preferences, and Form Consent, but the ones we want for this document are in the Mailchimp Mapping section. Note how there is now a Pet’s Name field, and a Pet’s Birth Date field.

These are the two field elements we added to the form. Now we just have to click on the dropdown here, and select the custom Mailchimp fields we added to map them to.

Avada Forms > Form Options > Submission > Mapping Custom Fields

Form On The Front End

When the form is filled out on the front end, the user add’s their pet’s name and birth date as well as their email address, and on submission, these details are added to their contact in Mailchimp. You can then use this information in merge tags in your campaigns.

Form > Front End
]]>
How To Use Mailchimp Groups With Avada Forms https://avada.com/documentation/how-to-use-mailchimp-groups-with-avada-forms/ Thu, 22 Jun 2023 22:03:15 +0000 https://avada.com/?post_type=documentation&p=892767

Mailchimp Groups are a way to sort your subscribed contacts based on their interests and preferences. In Mailchimp, a Group is defined as “A collection of contacts, categorized by their interests or preferences.” They differ slightly from Mailchimp Tags.

Using Avada Forms, you can capture these preferences and add this information directly to your contacts as they submit a form. Groups can then be the basis for building audience segments for sending emails to targeted audiences. Let’s have a deeper look at what’s involved.

Setting Up Your Groups in Mailchimp

A group consists of a group category and group names. So, the initial steps are in Mailchimp, and involve setting up a Group category, and the individual Group names. For example, your Group Category might be Gardening Experience, and your Group Names, Beginner, Intermediate and Advanced.

In Mailchimp, you find Groups under Audience > All Contacts > Manage Contacts. Here, you will find a Create Group button, which brings up the following dialog.

Mailchimp > Groups

Setting Up Your Groups In Avada Forms

So now you have a group set up in Mailchimp, you need to get information from your users to mark them as members of that group. Let’s start with the same group information in Avada Forms, so your users can select their preference, and then that can be mapped to the corresponding group in Mailchimp.

To do this, we can start by adding a Checkbox Field Element to a form with the corresponding group names as Checkbox options. In the example below, we have added a Gardening Experience Checkbox to a Newsletter Form. In this way, we could determine the user’s level and send them an appropriately curated Newsletter.

Add Checklist To Form

Mapping the Group information to Mailchimp

The first step is to make sure Avada Forms is connected with your Mailchimp account. See the How To Integrate Mailchimp With Avada Forms document for more information on how to do that.

Once your account is connected, head to the Form Options tab of the form you added your checklist to. Here, under Submission, your will see an Actions option. Select Mailchimp from the dropdown list.

You should then see a Mailchimp option set below this. If you edit this options set, you will see a Mailchimp Action option. Click on Create / Update Contact to continue.

Now, select the Mailchimp list you want to connect to. There are options for Mailchimp Tags, Opt-In preferences, and Form Consent, but the one we want for this document is in the Mailchimp Mapping section. Note how there is a Gardening Experience field. This is the Mailchimp Group we set up on Mailchimp. Click on the dropdown here, and select from the Group Category. In our example, there is onl one, Gardening Experience. This is the Checklist Field we added to the Form.

Now the Checklist on the form will map to the Mailchimp Group of the same name.

Map Checklist Group To Mailchimp

Form On The Front End

When the form is filled out on the front end, the user selects which Newsletter preference they have, and on submission, this is added to their contact in Mailchimp. You could then use this informnation to segment your mail deliveries.

Group Form On Front End
]]>
How To Make A Multi-Step Form With Avada Forms https://avada.com/documentation/how-to-make-a-multi-step-form-with-avada-forms/ Mon, 19 Jun 2023 22:10:45 +0000 https://avada.com/?post_type=documentation&p=892404

With Avada Forms you can make anything from simple contact or subscription forms through to conditional and now, even multi-step forms. For larger forms, setting up your form in this way can make the amount of information required to complete a long form appear more organized and less overwhelming. Plus, multi-step forms are proven to result in more conversions than single-step forms. Read on to discover how easy it is to make multi-step forms with Avada Forms, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Initial Form Content

When making a multi-step form, the initial process is the same as for a normal form. Head to Avada > Forms and create your form, and start editing it in the Avada Builder. Add your initial Form Field Elements as usual. At the end of the every section of the form, you should add a Submit Button Element. This will be the trigger used to walk through the steps of the form.

As seen below, I have my initial content, and a Submit Button Element, which I have named Next Step. Now, it’s time to create the actual step in the form. In this example, I have simply split a form into two parts, but you can create as many steps as you like.

Multi-step Forms > Initial Content

Add A Form Step

To add a form step, add a Container to the Builder directly after the container with your initial content, and navigate to the Special tab. Here, you see the Form Step Special Item. This adds the step to your Form. There is nothing to configure with this Special Item, just give it a title, and an icon if you wish. This is then used in the navigation (yes there can be navgation).

Multi-step Forms > Add A Form Step Element

Add Further Form Content

Now, it’s simply a matter of adding further form content. You can add as many form sections as you like, with whatever form of content you wish, with an additional Form Step between each one. In the screenshot below, you can see the Form Step Element at the very top.

You can then place a Submit Button Element at the bottom of each form section, which enables the user to continue to the next step. With a multi-step form, the Submit Button Element only works as a normal Submit button on the last step of the form. Alternatively, you can add buttons, icons or text labels, etc, and add dynamic content to them to act as Forward / Previous buttons. See the following section for more details on that option.

Your final form section should have a normal Submit button, and this is also where you would place the Notice Element.

Multi-step Forms > Final Section

Dynamic Navigation Options

If your form has many steps, you may wish to add further navigation. This might be in the form of Forward and Back arrows. This is possible with the addition of some dynamic content options.

In the example below, as this is only a two step form, I have added a Next Step icon in the first form section, and a Previous Step icon in the second section, above the content on each step of the form. Obviously, in a form with more steps, you could include both icons on any sections between the first and the last.

These icons link to the Previous and Next Step of the form. This is achieved by setting the link on the icons to Dynamic Content, and choosing Previous Step, or Next Step. You can add this dynamic content to any content which takes a link, such as buttons, icons, text, images etc.

Multi-step Forms > Dynamic Navigation

Configure the Step Progress

Once you have completed the form contents, you can configure the form as you would normally, including the Step Progress. This is found under the Form Options tab. This configures a section above or below the form, where the user can see the progress of the form as they move through it. If required, this can be configured as a Timeline or a Progress Bar, with many styling options available.

Below is an example of a Progress Bar in a two step form. Click on the buttons below to see the initial options for both styles.

Multi-step Forms > Configure Form Progress

Adding Your Form

Once you have completed your multi-step form, it’s simply a matter of adding it to your page via the Avada Form Element, as with any Avada Form. Except here, only the first part of the form will be displayed, with your navigational link, allowing users to go to the next step in the form.

Multi-step Forms >Section 1

On the final step in the form, the Submit button element acts as a normal submit button, and the form is then completed and dealt with in the way it has been configured in the Submission, Notifications, and Confirmation tabs of the Form Options. For more help on configuring Avada Forms, see the How To Use Avada Forms document.

Multi-step Forms >Section 2
]]>
How To Set Up SMTP for Email https://avada.com/documentation/how-to-set-up-smtp-for-email/ Sun, 28 May 2023 21:45:59 +0000 https://avada.com/?post_type=documentation&p=892531

So what is SMTP, and why do you need it?

Well, SMTP is short for Simple Mail Transfer Protocol, and it’s a protocol for sending and receiving emails. If you have an Avada site that accepts public registration, like a membership site or an eCommerce store, your site will need to send many transactional emails to users, like order confirmations, password reset emails, and the like. SMTP is even useful if you just have a standard contact form on your site.

If you use the native WordPress email solution – wp_mail – a significant number of those emails could end up in the recipient’s spam folders. And that’s definitely not what you want. An alternative method for sending emails with much better deliverability is to use an SMTP plugin. Simply put, an SMTP plugin helps you make sure people actually get the emails that your website sends them.

WP Mail SMTP

The Problem

By default, WordPress uses the wp_mail function to send emails via PHP mail (including any Avada notification emails). So your site is sending emails via the same server that your site is hosted on, which is almost certainly not optimized for sending emails. It’s very simple, and it sort of works (mostly), but it lacks proper authentication, which is why emails that you send via the PHP mail method often end up in spam, or even worse, just get outright blocked by some email providers.

SMTP, on the other hand, tells your WordPress site to send emails via a properly-configured SMTP server, rather than using your site’s server. Instead, your website sends the email to the SMTP server, which then processes the email and sends it to the user’s inbox. Because the SMTP server is configured to handle sending emails and has the proper authentication in place, your emails are much more likely to make it to recipients’ inboxes.

As well as this, some web hosts don’t even offer email as part of their hosting package. For example, neither Kinsta nor Flywheel offers email hosting, so in these cases, you would absolutely need an SMTP plugin.

Thirdly, the deliverability of emails is of vital importance to a business, and instead of relying on a hit-and-miss default solution, you can use a third-party SMTP server that’s 100% dedicated to sending emails.

The Solution

The best solution is an SMTP plugin. There are many of these, but the most popular SMTP and PHP Mailer plugin for WordPress is WP Mail SMTP. This is a free plugin and can be installed directly from the WordPress Plugin Repository. It provides a full Wizard to help you configure the plugin. There is also good documentation to be found at the WP Mail SMTP website.

WP Mail SMTP

Plugin Setup Wizard

The best solution is an SMTP plugin. There are many of these, but the most popular SMTP and PHP Mailer plugin for WordPress is WP Mail SMTP. This is a free plugin and can be installed directly from the WordPress Plugin Repository. It provides a full Setup Wizard to help you configure the plugin. There is also good documentation to be found at the WP Mail SMTP website. Once it is installed and activated, you will find yourself on the Setup Wizard page. To activate the Wizard, just click on the Let’s Get Started button.

WP Mail SMTP Setup

Choosing an SMTP Mailer

In this first step, you have to choose an SMTP Mailer for the plugin to use. For more infomation about SMTP Mailers and the various options they provide, see the Complete Mailer Guide. Most of the SMTP Mailers are not free, or are time or email limited. Some, like Sendinblue might work for sites that don’t send a lot of emails, but for this tutorial, we are going to use the Google/Gmail option, as it’s completely free.

Choosing An SMTP Mailer

Just note with the Google/Gmail option, that there can be rate limitations and API restrictions.

Google Mailer Warning

Configure Mailer Settings

Now we come to the Configure Mailer Settings page. Here you need to add your Client ID and Client Secret code. To get these, you have to log on to the Google Cloud Console. It’s a bit technical, but there’s a good guide to walk you through the various steps required.

Configure Mailer

Once you have added your Client ID and Client Secret, there is an Authorization Step, to allow the plugin to connect to your Google account. This is also covered in the afforementioned guide.

Once your have done that, a Successful Authorization message will appear on your screen.

Successful Authorization

When you OK that, you will see the Authorization section at the bottom of the screen has expanded, and it is here you configure your email address.

Authorization – Depending on whether you have connected to Gmail or a Google Workspace email, you might need to setup a Google email alias, so you can send emails from the domain email address. Again, you can find instructions on the WP Mail SMTP site on how to do this.

From Name – In the From Name field you can add whatever name you wish. In my example, I’m sending emails from a site called Avada Garden, and so that’s what I will call it here. There is also a Force From Name option to make sure that name is used by all emails leaving the site, regardless of other plugin settings.

From Email – Finally, at the bottom, the From Email field is where you select what email address the emails are coming from. Here, in my example, I would like my emails to be coming from admin@avadagarden.com and so I configured a Google email alias, as mentioned in the top section. Once I have done that, the email will be available to select from the From Email dropdown. Now I can move to the next step of the Wizard.

Configure Mailer > Authorization

Email Features

The next step in the Wizard asks which email features you want to enable. Some of these are only available in Pro mode. For my example, I turned off Smart Contact Form, as Avada Forms will do the job there.

Email Features

Promo Screens

The next two steps are basically Promo Screens, with the first on being a Newsletter & Tracking sign up, and the next being an upgrade to Pro promo. Both of these steps can be skipped.

Last Step – Email Check

The final step of the Wizard sends a test email based on your configuration, and lets you know if the plugin has been successfully configured. If there are no configuration issues, you will see a screen like this one, shown below.

Final Step - Successs

Troubleshooting

If there are configuration issues, you instead see a different screen, from where you can click on a Start Troubleshooting button, to see what the issues are.

Final Step - Issues

The results of the Troubleshooting appear on the plugin Email Test page, as seen below. In this example, it’s letting me know that the test email might have sent (they did), but its deliverability should be improved.

The Domain Check Results show that here are SPF, DKIM, & DMARC records missing from the domain’s DNS records. Depending on your domain name and hosting situation, you might need to update these records at either your domain registrar or through the Zone Editor on your hosting cPanel. This is unfortunately out of the scope of Avada’s support so please contact your hosting comany or domain registrar for more details.

Troubleshooting > Mail Test Results

Once the records have been updated, you will need to wait for them to be propgated. This often takes 12 hours or more. But once they are propgated, you can send another test emai from the link on the bottom of the Email Test tab, and hopefully your domain check results will be looking better!

That’s it. Now you have a properly configured SMTP email solution, and you can be confident that your emails are getting to where they are meant to be going.

]]>
Avada Forms Email Notification Placeholders https://avada.com/documentation/avada-forms-email-notification-placeholders/ Fri, 13 Jan 2023 14:20:28 +0000 https://avada.com/documentation/avada-forms-email-notification-placeholders/

When creating email notifications for your Avada Forms, under the Form Options > Notifications tab, you can create any number of notifications when an email is submitted. These might be the message sent to your inbox, or perhaps even a co-worker, or an auto-reply sent to the sender.

In the various notification fields, you can then use placeholders to dynamically pull information from your forms. Let’s have a look at the various options.

Placeholders

The 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 Notifications tab of the Form Options, to customize how the email looks upon delivery of the notification.

Avada Forms > Contact Form

Email Subject

For 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.

Submission > Email > Email Subject

Email From Name

If 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 personalize this email area. 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 personalized, (eg. John Smith).

Make sure you use the exact field name you are using in your form, with square brackets around it. So [first_name] if first_name if your field name.

Submission > Email > Email From Name

Sender Email

This 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 contactform@sitename.com or wordpress@sitename.com, 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.

Submission > Email > Sender Email

Reply To Email

With 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 wordpress@sitename.com.

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] <[email_address]>.

So, for this example, I will use the First Name field and the Email Address field as such: [first_name] <[email_address]>

Submission > Email > Reply To Email

All Fields Placeholder

By default, the default message will be sent with all form fields added, as we will see below. But in the Email Message field, you can also use any placeholders, as well as the [all_fields] placeholder, which provides a large variety of options to customize the data in the email notification.

Submitting The Form

So now, if I fill out the form as a user, using the following information, and send it, the placeholders in the created Notifications will go to work.

Contact Form > Filled Out

Receiving The Email

And 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.

Avada Form > Email Received

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.

Avada Form > Reply To Email
]]>
How To Integrate MailChimp With Avada Forms https://avada.com/documentation/how-to-integrate-mailchimp-with-avada-forms/ Mon, 18 Oct 2021 14:05:18 +0000 https://theme-fusion.com/?post_type=documentation&p=869314

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.

For privacy reasons YouTube needs your permission to be loaded.

Connecting Your Account

The 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.

Connect To Mailchimp - OAuth

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.

Connect To Mailchimp - API

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.

Authorise Mailchimp

Mailchimp Submission Options

Once 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 to map, 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 field to the specific Mailchimp field, as seen below.

Mapping Mailchimp Form Fields

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.

]]>
How To Use Conditional Logic In Avada Forms https://avada.com/documentation/how-to-use-conditional-logic-in-avada-forms/ Tue, 30 Mar 2021 23:39:40 +0000 https://theme-fusion.com/?post_type=documentation&p=857583

Conditional Logic is a powerful tool that 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 are best seen in longer forms. With Conditional Logic, these forms can be shorter and more specific, as they are personalized to the user’s choices. Let’s look at how this works in Avada Forms.

For privacy reasons YouTube needs your permission to be loaded.

Where To Find It?

You will find Conditional Logic on almost every Form Builder Element, under the 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 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 Forms > Logic Statements

Conditional Logic Determinants

Conditional 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.

Field

Under 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.

Conditional Logic > Field

Relational Operators

You 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.

Conditional Forms > Relational Operators

Condition Value

The 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.

Conditional Forms > Condition Value

AND/OR Connective

You 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…

AND/OR Connective

How To Add Conditional Logic To A Form

OK, 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.

Conditional Form Example

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.

Conditional Range Field

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.

Conditional Form Showing Conditional Elements

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.

Conditional Form Showing Conditional Elements

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.

]]>
Avada Global Options – Forms https://avada.com/documentation/avada-global-options-forms/ Tue, 06 Oct 2020 19:56:24 +0000 https://theme-fusion.com/?post_type=documentation&p=800791

In the Avada Global Options, 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.

Forms Styling

With 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 Font Size – Controls the size of the form text.

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

  • 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..

  • Form Views CountingSelect which types of users will increase the form views on visit. Select from All, Logged Out, or Non-Admins.

Google reCAPTCHA

With these options, you can configure Google reCAPTCHA for use in your Avada Forms.

  • reCAPTCHA VersionSet 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 Color SchemeControls the reCAPTCHA color scheme. Choose from Light, or Dark.

  • 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.

  • reCAPTCHA For User ElementsTurn on to add reCAPTCHA to the user login, user lost password and user registration forms.

HubSpot

With 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.

  • HubSpot API Key – Follow the steps in the HubSpot docs to access your API key.

  • Reset HubSpot PropertiesResets all HubSpot properties data.

Mailchimp

With this option you can connect your Mailchimp account to Avada Forms. For more details, see the How To Integrate Mailchimpt With Avada Forms doc.

  • Mailchimp API – Select a method to connect to your Mailchimp account. Choose from OAuth (recommended) or API Key.

  • Connect With Mailchimp – Click the Connect With mailchimp Button to log in and connect your account.

  • Mailchimp API Key – (when API Key is selected) Follow the steps in the Mailchimp docs to access your API key.

]]>