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:
- Create Contact Forms Faster Using Time-Saving Templates
- Customize Forms to Suit Your Needs by Adjusting Their Appearance
- Control the Behavior of Your Form for Maximum Performance
- Set Up Email Notifications for Instant Alerts
- Advance Forms Further by Integrating with Popular 3rd Party Apps
- Control Your Data Storage to Your Standards in Settings
- Separate a Form Perfectly with Pagination
- Preview and Easily Implement Your Form Using Shortcodes
A new form is a cinch with Forminator. Let’s get started!
With Forminator’s premade templates, just click Contact Form, name it, hit Create, and it will be set up for you immediately.
This form comes with all the essentials a simple contact form needs: First Name, Email Address, Phone Number, Message, and Send Message.
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.
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.
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.
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.
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.
To take design further, add custom CSS for more advanced modifications.
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).
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.
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.
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.
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.
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.
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.
Edit data storage in Forminator’s global privacy settings at any time.
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.
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.
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.
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.
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.