Fluent Forms

Fluent Forms is a popular WordPress plugin that allows website owners to create and manage customizable forms for their WordPress websites. With Fluent Forms, you can easily create forms for various purposes, including contact forms, lead generation forms, registration forms, surveys, polls, and more.

The plugin offers a drag-and-drop form builder that allows you to create custom forms with ease, and you can customize the forms to match your website’s design and branding. You can also use pre-built templates to speed up the form creation process.

Fluent Forms comes with a variety of advanced features, such as conditional logic, multi-column layouts, file uploads, payment integrations, email notifications, and more. The plugin also integrates with various third-party services, such as Zapier, Mailchimp, ActiveCampaign, and others.

Overall, Fluent Forms is a powerful and user-friendly form builder that can help you create professional-looking forms for your WordPress website without the need for coding skills.

Starting from the Dashboard navigate to the side menu and select New Form from the Fluent Form Plugin options.

From here we have options on what kind of Form we would like to create. You can choose between creating a Blank Form, where you are in charge of everything, or from one of the premade Form Templates provided. For this example we will be picking New Blank Form.

The Editor is where all the magic happens. This is where we can name our Form, add fields and design the layout. The free version of the plugin comes with Input Fields that will please the majority of users. For more Advanced Fields there is a Pro version available that will unlock these features.

You can change the name of the Form at the top of the Editor.

To start creating our new form we will start by going to the Container tab where we can design the layout of our New Form. Simply drag and drop the preferred column Containers.

For this example we will use a very simple layout that consists of a 1 column container and a 2 column container. Once the containers are set in place we can navigate to the General Fields and drag and drop the ones we wish to use. For this example we will be using Name Fields, Email Address and Simple Text.

Once the selected field is in place we can then click on the field which will allow us to add customization. Each field allows you to change the name, label name, placeholder, label position as well as setting if the field is Required (Must be filled in to submit).

Once the form is finalized we can customize the settings by navigating to the top of the Editor Page and Selecting the Settings & Integrations tab.

There are a few things we can customize from this section such as Form Settings, Email Notifications and Custom CSS/JS.

Form Settings lets us decide what happens after a user fills out and submits the Form. Confirmation Type dictates the URL the user to redirected to after they submit the Form. Same Page keeps the user on the same page the Form is on, To a Page redirects the user to another page of the website that you set and To a Custom URL redirects the user to another website that you set.

This is also the section where you can edit the message that shows to the user after they submit the form. You can edit the text in the provided text area box.

Email Notifications Section allows you to customize what email the form is sent to after being submitted as well as what info you wish to be included in the email. To start click on the Add Notification button. Please note in order for email notifications to work your server must have SMTP set up.

From this page we can Name the Notification, set up the send to email, set the Subject line and customize the email body.

Here is an example of a filled out Notification. The [{inputs.names}] parameter in the Subject Line will automatically include the Name the user inputs into the name field. This can be changed out with other parameters if the form does not include a Name Field. In the Email body the {all_data} parameter will add all form fields and data to the email body. This can also be customized to add specific fields or a custom text message.

The Custom CSS/JS section allows us to add custom CSS and Javascript, if needed, to our Form. Custom CSS can also be added through the Theme’s Customization Section on WordPress as well.

Adding a Form to the Page is very easy. Fluent Forms assigns each Form you created a Short Code which then can be used to show the Form on the desired webpage. Find the Short Code for the Form you wish to use from the All Forms Section of the Plugin.

Once you have copied the Short Code navigate to the page you wish to display the form on. Create a Short Code block and paste the Short Code in the input field. Your Form will now be displayed on the page.

The are two main areas where you can see the Entries for your forms. The first one is in the All Forms Section of the Plugin. From here you can click on individual Forms to see the Entries submitted. you have the option to view or delete each Entry.

Clicking on the eye icon will display the details of the specific Entry including all form fields, User Ip, User Browser, User Device and the Date and Time the Entry was submitted.

The second way to view Entries if from the Entries Section of the Plugin.

From here a bar graph is shown to easily display Submission Count per day. This method will also show All Entries whereas the other method we used is for seeing individual Form Entries. Clicking on the Submission Id will open up the more details window previously shown.