This short article will show you how to quickly set up a contact form on your site, as well as how to configure it and connect it to an autoresponder.

The "Contact Form" element found in our Thrive editors is a very flexible one, which is why we've dedicated this separate article to it, where we've explained all of its options. Please check out this tutorial if you need information on each of the available options for this element.

This article will focus on the process of adding a contact form to your site and showing how to create a basic setup for it.

An important thing regarding this element is that contact forms added before May 2020 are using an old form type that we are retiring.

Naturally, in this article we will be using the newer version of the element.

However, in case you are still using an old version of the element (added before May 2020), please replace it, as the old forms will no longer work.

The old contact form can be recognised by its template, as well as the label in the top left when you select the element. The old element was called "Contact Form":

Whereas the newer version is called "Form", and the templates have a different look to them:

To replace the old version with the new one, simply remove the old element and add a new one from the element list of any Thrive editor.

You can add a contact form anywhere on your site using the Thrive editor (pages/posts/templates etc.) by choosing either one of the "Contact Form" or the "Lead Generation" elements.

The "Contact Form" element represents one of the "Lead Generation" element types.

In both cases, you will have to open the element list and drag and drop the element on the editor. Here's the process for each of them:

Creating a contact form using a "Lead Generation" element

Creating a contact form using a "Contact Form" element

As you can see, the only difference is that, by choosing the "Contact Form" element, you simply skip the step of filtering the form templates.

For example, let's configure this element so that, when someone fills it in, both the administrator and the user receive an email about the form submission. The form should only have three fields: name, email and message. We will also connect it to an autoresponder such as ActiveCampaign.

Once you add the element, you can use the left sidebar options to configure it as you wish.

If you need to make any modifications to the design of the element, you're able to do that using the "Edit Form Elements" option.

For this element to actually serve the purpose of gathering the information coming from your users, you will have to either create an API Connection or an HTML one. Click on the option that you want:

In order to connect it to connect this form to an autoresponder, "API" is the option that needs to be chosen here.

We've described the ways to properly set up an API Connection for the "Lead Generation" element here, so please make sure to follow the detailed steps you will find there.

Moreover, if you want to find out what services you can create the connection to, please check out this list, as well as the tutorials we've created for each service.

Click on "Add Connection" to start setting it up:

This will open a pop-up and, clicking on the "Choose connection" field, you will access a list of every API connection that you have previously configured in your API dashboard:

And to continue with our given example, I will create two different connections here:

You can create this connection if you want to receive direct email notifications whenever someone will fill in the contact form.

From the pop-up that opens, you are able to select the email delivery service, as well as compose and customize the email that will be sent to users after filling in the form:

If you click on "Compose Email", another pop-up will show up - this is where the email can be customized from:

Besides customizing the email and the rest of the details, you also have the option to enable the "Send confirmation email to user that submitted the form" toggle:

Just as its name states, if the option is enabled, the user that has submitted the form will receive a confirmation email after they do so. This can also be customized, as a new field will appear once you enable the option:

And here, as well, you can use shortcodes in the body of the email.

Click on "Save and apply" to save everything and close this pop-up:

Once the "Email" connection has been set up as you wish click on "Apply" to save the changes.

Note: We have a separate, more comprehensive article about setting up the email connection and you can find it here.

Next, we can connect to an autoresponder. Click on "Add Connection" to add a new one, besides the "Email" one:

From the list of available connections, choose the autoresponder you want. In our case, it's ActiveCampaign:

Set this up as well, and click on "Apply" to save it:

Note: In this case as well e have created a separate, more comprehensive article that can be found it here.

Once the connections have been set, you can configure the form fields (add, remove and edit them).

Depending on the "Contact Form" template that you've chosen, you will have some form fields already set here:

If you wish to add a new field, all you have to do is click on the "Add new" field option:
​

This will open a pop-up, where you will have to set the new field from:

This can either be a "Name"/"Email" field if you do not already have one of each, or a "Phone" or custom field.

When setting up a new field, you will usually have to choose a name and a placeholder for it, as well as decide whether the field should be required, or it should show its label.

However, please check out the above-mentioned article, since each type of custom field setup may vary, as well as the ways to customize them.

You can also edit the existing form fields. For that, click on the pencil icon next to the one that you want to edit:

This way, a pop-up will open, and you will be able to modify what's needed:

Lastly, you can also delete a field, if you need to. All you have to do is click on the trash can icon next to the field you want to remove:

The field will immediately be removed from the form.

In case you have set up a "Hidden" field, you will be able to see/edit or customize it from the next section:

The way to add a new "Hidden" field is described here. You can edit or remove a "Hidden" field, just like you would in the case of a normal one, described above.

Once you're done with the form fields, you can also choose what happens after someone has successfully submitted the form.

And you're pretty much done! Make sure you save everything and the contact form should be all set!

Also remember that, by using the new element, you’ll get extra features such as support for custom fields, and other connection types including adding to CRMs or Mailing Lists.

Hopefully, this article was useful. Don't forget to leave a smile below 😄