How to Create A Detailed Contact Form with FluentForm
Planning to create a detailed contact form for your website especially WordPress hosted website but do not know the best solution to it?
In this article, we will be guiding you how to create a detailed contact form with free WordPress plugin that does not slow down your website.
Let’s get started!
The first thing you would need to do is to install FluentForm into your WordPress account.
FluentForm is a freemium WordPress plugin, if you are not looking at those advanced forms with multiple steps, the free version is able to get the job done!
Once you’ve successfully installed FluentForm, we’ll start with the first step, which is to create your first contact form.
Step 1: Create a new form with FluentForm
To create a new form, navigate to “FluentForm > New Form”. After clicking it, you’ll see a popup as shown below. In FluentForm, the team has created some default forms for different purposes.
If you are looking for more advanced options, you can subscribe to FluentForm PRO, which gives you these additional options:-
- Product Order Form
- Online Service Order Form
- Online Donation Form
- Order Bump Example Form
- Student Survey Form
- Classroom Observation Form
- Course Evaluation Survey Form
- University Enrolment Form
- High School Transcript Request Form
- Conference Proposal
- Admission Form
- Client Satisfaction Survey Form
- Customer Complaint Form
- Market Research Survey Form
- Pricing Survey Form
- Workshop Registration Form
- Donation Form
- Website Feedback Form
- Many many more…
In this article, we will be using one of the default forms – Contact Form as an example.
To use the default form, all you need to do is hover towards that element and click on the “Create Form”
After clicking it, you’ll be able to see a form like the one shown below.
Here, you can see that there are quite some options for you to add into your form.
You can include details such as Name, Email Address, Dropdown, Checkbox, Website URL, and many more. These elements are more than enough to create a decent form.
To add in a new input (eg. Website URL), all you need to do is drag it into the form, just like how you do it with Elementor.
If you wish to make your form to have two column so that it won’t look lengthy, you can easily do so by going to “Container” and dragging “Two Column Container” into your form.
After doing so, it will look something like the image shown below.
Then, you can drag any input you wish to have there.
Once you’re done with the form, click “Save Form”. Take a piece of paper to write down the form ID as we will be using it later.
Step 2: Configure Additional Form Settings
Then, you would need to configure some basic form settings. To do so, click on “Settings & Integrations”.
In this section, there are a few things you can make changes on.
If you wish to have a different message when someone submitted the form, you can make changes on the section highlighted.
In addition, by default, your form will disappear when someone successfully submitted the contact form. If you don’t want that to happen, you can select “Reset Form” instead.
Next, we’ll move on to the “Email Notifications” section.
If you wish to receive email notifications when someone submitted the form, you can easily do so by enabling the notification as shown on the image below.
Once it’s enabled, the email notification will be sent to the admin’s email address. If you wish to have the notification sent to a different email, click on the “Setting” icon.
Then, change it to your preferred email address and click “Save Notification”.
Step 3: Embed the Form Into Your Web Page
The next step is to embed the form you created earlier into your web page. We will be using Elementor for this step. If you’re using other page builders such as Oxygen or Divi, don’t worry, the process is the same.
First, go to your Elementor Page Editor, search for “FluentForm”. When you see the element as shown below, drag it to the place you wish it will be.
After doing so, at the FluentForm settings, select the form you wish to show here. For our case, it is “Support Form (#3) (3)”. Then, you should be able to see the contact form you’ve created earlier.
Click “Publish”.
Now, you can have a look at your website and try out the form you’ve created!
Congratulations! You’ve now learned how to create a detailed contact form for your WordPress website. I hope this article is able to help you save time researching for a solution.
If you’re interested in more WordPress related articles, here are a few topics you may be interested in:-
