Almost every website I have built has had a contact form. Once, you had to hand-code the form yourself or let someone else do it for you. But not anymore.
Especially if you are using WordPress, you have plenty of contact form plugins to choose from, and they do the heavy work for you.
But if you are using a WordPress page builder, installing yet another plugin is a bit frustrating. A much better solution would be if this basic website functionality was already built into the page builder.
This is indeed the case with Thrive Architect. You can build contact form pages “out of the box” when you use the Thrive Architect Contact Form element.
This tutorial shows you the basics of the Thrive Architect Contact Form. I also show you how to create a simple contact page and how to make it send messages from your website visitors.
Introducing Thrive Architect Contact Form
Thrive Architect includes a contact form element that you can use on your website. Not only do you have a visual view of the element itself, but it also contains plenty of features that make this element very robust:
- Drag and Drop: Drag the contact form to the desired location on the page.
- Styles: Use ready-made contact form templates provided by Thrive Themes.
- ReCaptcha: Protect against contact form spam.
- Confirmation Emails: Notify your visitor with an automatic email once the visitor has submitted a form.
- Redirect to a Custom URL: Redirect your visitor to another page after she/he has submitted a form.
- Group Styling: Modify your form’s styling by applying styles to all the form elements at once. You can also modify the styles on the individual element level as well.
Thrive Architect Contact Form: The Basic Steps
To get started working with your contact form, login to your WordPress account, and start editing a page or a blog post. Then, find the Contact Form element on the bottom-right after you have activated the Thrive Architect menu:
Drag the Contact Form element to the page, and you then have a simple form with First name, Email and Message fields, accompanied with the Send button:
Then, activate the form by clicking between its fields. You’ll then see the form properties on the left:
Here are the main sections you can configure:
- Template Options (open by default): Set a template for your contact form.
- Main Options (open by default): Configure the field order, whether a field is required or not, and whether the labels are turned on or not. You can also click the Email & After Submit Setup link on this section to choose what happens after a visitor has submitted a form. On the Advanced section, you can set an error message, for instance, when a visitor has entered an invalid email address.
- Layout & Position: Set the layout and positioning-related settings of your form here.
- Background Style: The background style for your form.
- Borders & Corners: A style-related setting where you set the styling of the borders and corners.
- Shadow: Set the shadow effect to your form fields.
- HTML Attributes: Add custom CSS elements to your form.
By default, the Group Styling is turned on.
With this setting, the style changes are applied to all form fields at once. Alternatively, the Group Styling setting can be turned off so that you can edit the styles of form elements individually.
You can turn off the styling by clicking the green lock icon:
Once the icon has turned red (and the lock icons has changed to unlocked), you have exited the Group Styling setting.
Two Ways to Activate Your Form
When I started working with the Thrive Architect contact form element, I was a bit puzzled after seeing two types of settings on the left. I then learned that the settings were displayed depending on which part of the form I clicked.
To illustrate this behavior better; here is a short animation showing you the difference:
In other words, when you click an individual element on the form, you get editing options related to it. However, when you click between the form fields, you activate the form edit view.
Case: Building a Thrive Architect Contact Form
In this next section, we create a contact form which sends email messages from the website visitor.
Please note that the Thrive Architect contact form element cannot be used to build an opt-in form. In other words, you can’t create a form and hook it to your email autoresponder service.
Here is how to create a contact form with Thrive Architect:
- Log in to your WordPress Dashboard.
- Create a new page with Thrive Architect.
- Once you are in the edit view, drag the Contact Form widget from the right to the design area:
4. The form now contains three fields: First name, Email address and Message.
However, if you’d like to add more fields to the form, click the Add New button in Main Settings on the left:
You can move the fields to any order you like. You can also delete the fields that you don’t want to keep.
5. When you are building a contact form, it’s important that the visitor fills in all the required fields.
In order to change the required field setting (so that the visitor is forced to enter something on the form field), you can click any of the form fields and turn on the required setting:
You can even turn on the asterisk marks to mark certain fields mandatory:
Once the mandatory fields are turned on, you’ll then see the mandatory fields marked with a red star:
6. Once you have created a form with the settings you like, it’s time to configure it to send email. Click the Email & After Submit Setup button in Main Settings:
Here, you can define the settings that take place after the visitor has submitted a form:
- To field defines the receiving email address.
- Subject field defines the subject for the email you are about to receive. You can even use FORM_URL_SLUG, FIRST_NAME or USER_EMAIL data in the Subject field by either including one or all of them:
However, the subject line I have used in my projects has been simpler, and you should keep things simple yourself, too. For instance, the subject line “New message from yourwebsite.com” is enough to tell you what the email in your inbox is all about.
Once your settings are done on this view, click Next.
On the second view (in Email & After Submit Setup), you’ll define what actions are executed after the submit button was clicked:
You have three options to choose from:
- Reload page: This option just reloads the page after the form has been submitted.
- Redirect to custom URL: When you have chosen this option, your visitor is redirected to a custom URL.
- Show success notification: With this option, you show a success message to the visitor after the form has been submitted.
With all the options, you can also use the option “Send confirmation email to user”:
This sends a confirmation email to the person who submitted the form. For instance, you could use the default value or enter your own message.
Once you have configured this view (Email & After Submit Setup), click Save.
7. Finally, it’s time to save your form by clicking Save Work > Save and Exit. Then go to the traditional editing view in WordPress and click Publish:
8. Navigate to the URL where the published contact form page resides, fill in the form and click the submit button:
You should see a behavior that you defined in step #6 of this tutorial. In my case, since I chose the reload option, my contact form page was reloaded after I submitted my contact form.
9. Go to your email inbox. You should have received a message from the contact form:
Thrive Architect Contact Form: The Conclusion
I hope that you now have all the necessary information needed to build a Thrive Architect contact form on your website.
It’s relatively straightforward to do and naturally, the more forms you set up, the easier it gets. Also, having this functionality inside Thrive Architect reduces the number of plugins you need to install on your WordPress.