Creating the Perfect Contact Form with Forminator

Contact forms not only let visitors get in touch with you, they are also essential for lead generation. With our free 5-star Forminator plugin, adding a contact form to your WordPress site is easy, as this guide will show you!

This tutorial will demonstrate how to set up the perfect contact form and create the ability for visitors to reach you (and reach back out to them) in just a few clicks.

Here are the areas that we’ll be covering:

  1. Create Contact Forms Faster Using Time-Saving Templates
  2. Customize Forms to Suit Your Needs by Adjusting Their Appearance
  3. Control the Behavior of Your Form for Maximum Performance
  4. Set Up Email Notifications for Instant Alerts
  5. Advance Forms Further by Integrating with Popular 3rd Party Apps
  6. Control Your Data Storage to Your Standards in Settings
  7. Separate a Form Perfectly with Pagination
  8. Preview and Easily Implement Your Form Using Shortcodes

A new form is a cinch with Forminator. Let’s get started!

1. Create Contact Forms Faster Using Time-Saving Templates

With Forminator’s premade templates, just click Contact Form, name it, hit Create, and it will be set up for you immediately.

Templates in Forminator.
Click this button, and let’s create a contact form for your site.

This form comes with all the essentials a simple contact form needs: First Name, Email Address, Phone Number, Message, and Send Message.

Contact form fields.
Use the default fields to instantly create a basic contact form.

You can add more fields and edit accordingly. However, if this serves its purpose, just click Publish, and Forminator delivers a shortcode for use on any WordPress page, post, or acceptable widget.

Creating a contact form with Forminator is quick, simple, and easy!

Forminator automatically syncs with your admin email, so when users opt-in, you’ll get notified.

You now have a form that’s ready to collect information and be used on your website. It’s that simple.

 2. Customize Forms to Suit Your Needs by Adjusting Their Appearance

Forminator gives you a lot of flexibility when it comes to adjusting the appearance of your contact form with colors, fonts, custom CSS, and more.

The Design Style area comes with a pre-made style.

The design style area.
Pick Forminator’s premade designs or jazz it up with some CSS.

You can adjust the Design Style with options like Default, Flat, Bold, Material, or you can opt for None.

Pick the style that works best for your contact form.

From here, you can change the colors in the Colors section. This is where you can customize it perfectly to fit your color palette on your website.

Adjust the colors on many elements of the form, such as the form container, submission indicator, field basics, and more. Or use the default colors.

Various color options.
Color options are endless when it comes to customizing your form.

Click on an individual element to change its colors.

Add custom colors to any form element.

Similar to the colors, you can change many font levels in Fonts. Forminator’s font options include inheriting the theme’s fonts, or you can customize these.

The fonts area.
Match your brand’s fonts throughout the entire form.

Any of these fonts can be overwritten with custom ones by Google Fonts. You can easily change the font size and weight.

Choose from hundreds of fonts.

Also, customize your form container’s border and padding in the Form Container area.

Beyond that, you can adjust the radius, thickness, and style. Also, in the Spacing area, you can adjust the spacing with options of Comfortable, Compact, or Custom — where you’ll enter your spacing in pixels.

The form container where you can adjust spacing.
Need more space? The border and spacing can be customized however you’d like.

To take design further, add custom CSS for more advanced modifications.

3. Control the Behavior of Your Form for Maximum Performance

Your contact form’s behavior is how your form functions while a user is filling it out and when the user hits submit.

Being able to edit and modify key points any way you’d like puts you in control of your contact form’s behavior.

To start with, you can adjust the Submission Behavior. Modify submission behavior with an Inline Message, Redirect to a specific URL, or Hide Form upon submission.

You can also customize the message and set the time (in seconds) to auto-close the success message (which indicates the form was submitted okay).

Submission behavior section.
Add a personalized message to your users.

Forminator allows you to choose your Method of reloading the page. You can use AJAX to send the form without reloading the page or reload the page.

The Validation method is for fields that you’ve chosen to validate. This feature shows how these will behave when a user submits, whether to run validation checks when the user submits the form using Ajax or on the server-side using PHP, and returning any error messages after a page reload.

Also, there is a Submission Indicator feature that shows the loader if activated.

The method of submission including validation and submission indicator.
Keep users in the loop by letting them know that the form will be submitted.

There are also options for enabling Autofill, Security (Honeypot protection and logged in submissions only), and the Lifespan of a form.

Lifespan allows your form to expire on a specific date or after a certain number of submissions.

The Autofill area.
Make it easy to submit a form with Autofill.

4. Set Up Email Notifications for Instant Alerts

Customize email notifications for your admin and site visitors in just a few clicks with Email Notifications.

You can create emails that get delivered to your admin team or any specified email addresses when a form is submitted.

There are also advanced options for CC Emails, BBC Emails, Reply-to Emails. Plus, you can add conditions based on user input and rules for additional customization.

Where you add email notificaitons.
Get a notification the way that you want it when a new form is submitted.

5. Advance Forms Further by Integrating with Popular 3rd Party Apps

You can send a specific form’s data to a connected 3rd party app, such as MailChimp, FortressDB, Slack, and more. It’s all done right in Forminator’s dashboard.

Forminator will show you a list of connected apps that you have available; from there, you can activate it to connect with the form by hitting the plus sign and Activate App.

The Integrations area.
All contacts from a form can go directly into MailChimp.

Every app will have different prompts to get it to synchronize and will walk you through exactly how to do it. Once finished, your form will sync with the app, and it will work accordingly.

You can connect and disconnect from any 3rd party app at any time.

3rd party apps are perfect for continuing marketing through email providers, storing information on the cloud, and much more.

6. Control Your Data Storage to Your Standards in Settings

With Settings, you can control the Data Storage by disabling any submissions in your database. All submissions are stored by default if not enabled.

You can also customize how long you’d like to retain the form’s submission for a specific amount of time in the Privacy settings.

Finally, there are options for handling account erasure requests and keeping files that are submitted if the form gets deleted.

Settings area with data storage and privacy settings.
Data storage controls have never been more straightforward.

Edit data storage in Forminator’s global privacy settings at any time.

7. Separate a Form Perfectly with Pagination

Add pagination to your form to break it up into individual sections. Pagination leaves the style not as cluttered looking, which is beneficial if you have a lot of fields that are required.

Simply add the Page Break field, and Pagination will appear on top. You can then insert page breaks in between various fields and separate the form however you’d like.

You can adjust the Progress Indicator, Buttons Text, and the Labels.

Once completed, your users will go step-by-step through the form.

Use pagination to break up complex forms.

8. Preview and Easily Implement Your Form Using Shortcodes

Does your form look good? Hit Preview any time to get a glimpse of it and try it out…

Preview and test your new contact form.

As mentioned at the beginning of this article, when you’re ready, once you hit Publish on your new contact form, Forminator provides you with a shortcode that you can paste into WordPress pages, posts, or acceptable widgets to display your form.

A look at Forminator's shortcode.
Forminator’s shortcode gets the “thumbs-up”.

You can always access the shortcode in Forminator’s admin. Along with that, you can change, edit, and adjust your form at any time and the changes will automatically propagate throughout your site wherever you have added the form via the shortcode.

And Like That, It Forms

With all the elements in place, you can have your contact form up and running in no time.

The perfect contact form will contain information that is required to serve your purpose. With Forminator, you can adjust a form exactly how you want to ensure it functions perfectly for your WordPress site.

You can view more about constructing contact forms and also about getting started with them.

Speaking of contact forms, be sure to use ours to reach out to our 24/7 support team superheroes if you ever have any questions and need to contact us.

And to keep tabs on what’s coming up with Forminator, check out our Roadmap any time.

Leave a comment

Your email address will not be published. Required fields are marked *