Adding a Contact Form to Your Website

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.

Migrating from the old contact form to the new one

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.

→ How do I know if I have the older version?

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:

→ How do I replace the old contact form with the new one?

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.

Adding a contact form

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.

Configuring a contact form

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.

Setting up a connection

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:

  • The “Email” Connection

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:

  • you can modify the “To”, “From name” and “From email” fields;

  • you can change the default subject

  • the message can be customized as you please, and you can also make use of all the shortcodes that can be added to the body of the email:

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.

  • Connecting to an autoresponder

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.

Configuring the form fields

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:

  • Add a new field

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.

  • If you want to add a new “Phone” field, select it from the “Field Type” section, and set it up as shown here.

  • If you are looking for ways to set up various types of custom fields, then please feel free to check out this separate article we have written about adding custom fields.

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.

  • Edit a field

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:

  • Remove a field

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.

  • Hidden Fields

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 😄

Was this article helpful?

Related Articles