Flo Forms Plugin

The following article explains how to install and use Flo Forms.

You can download our new plugin on your plugins page here.

We have created a custom contact form that is drag and drop, and super simple to use. We wanted to develop our own contact form to help prevent issues with email sending, that other contact forms had.

FloForms aims to solve this issue. We’ve also added a submissions area, and a settings area that will allow your site to send you a reminder to check your inquiries if you’ve not read them.

Download and Install Plugin

You can download the Flo Forms plugin on our plugins page here. Once downloaded you should have a .zip file named Flo-forms.zip.

To upload the plugin, go to your WordPress admin panel, go to plugins, and “add new”, then “upload plugin”:


From here you can select your plugin, or drag and drop it into the choose file section, and then hit install now:

Once its uploaded activate the plugin:

Now the plugin is activated, you will have a 2 new settings areas in the WordPress back end area, Flo Forms and Flo Forms Settings, these will be the 2 main areas you will need when setting up your forms:

Create a Form

Now that the plugin is activated, its time to create a new form.

Go to the Flo Forms area in your WordPress backend, and click “Add New Form”:

You will then be presented with a blank form, with only a submit button. Enter the form title, and then you will be able to select any of the options from the left hand side to add as inputs to your form from the add a field tab:

 

The following inputs are available:

 

The next section explains in more detail the fields available for the form.

 

Available Fields

The following fields are available for your contact form.

 

Single Line Text – this field will allow one single line of text, useful for short text items such as name, venue location etc.

Textarea – this field will allow a larger paragraph of text, generally used for sections where you require more information.

Email – The email tab for the users email.

Date – This will add a date picker to your form.

Number – Will add a field that will allow only numbers.

Single CheckBox – Is great for options that require a confirmation.

CheckBox List – The checkbox list field allows you to add check boxes for your site. This is great if you want to find out some specific information, such as additional services. It allows for multiple selections.

Radio Button – The radio button option allows the user to select one option for a selection of options.

Drop Down – The drop down menu is the same as the radio button, allowing the user to select one option for a selection of options.

Paragraph – It allows to add simple text. Used mostly for informative purpose.

Section Break – This will add a break line in your form.

Hidden Fields – This field is particularly useful when integrating your form with ShootQ and Tave and you need to pass some hidden information to the user.

Add a label, this will be for your own internal use, and then add a value that you wish to pass.

The next section explains how to add fields and the settings tab.

Addings Fields and Field Settings Tab

Adding inputs to your Flo Form is simple, just click any item in the add a field section on the left and it will appear in the right hand side. Select all the input options as required, or add one at a time. From here you can select the various options related to the input:

 

Field Settings

To change details about the specific field, click the item on the right hand side, it should then be highlighted in the light grey, and on the left your should see the the field settings tab:

 

If you want to keep your form clean and without labels, remove the field label and populate the field placeholder:

 

It will look like so (with the label inside the box):

In this area, you can add the label for the field, a placeholder item if you wish to have a default for users to see as an example, you can select the width of the field, 100% or 50% and if necessary add a css class (advanced) if you wish to style a particular field further, as well as the required selection box.

Repeat the process to add all the items to your form. If you want items in 2 columns, make sure to use 50% width.

The submit position can be aligned in the same manner, simply click the submit button and the field settings area will allow you to set the submit button text, position, button text color, and button background color:

 

Once you have built the form, added the labels and set the widths etc, you will need to set up the final tab form settings, explained in the next section.

Form Settings Tab

The form settings tab is the final item required to set up the form before adding it to a page. Here you can set the email where your form is sent (this will be your email), the email subject, the placement of labels, and the option for confirmations, a simple text message, or you can re-direct the user to another page.

 

First thing to do is to add your email to the “Recipient Email” section, then select the email subject. Generally “Contact Form Message” will work well. The email subject can be customized using the values from the existing fields. You can see the above image highlighted in red. The field ID can be found when any field is clicked:

 

So for example if the user will type in the ‘Name’ field ‘John’, then the email subject in this case will be ‘A new message from John‘. If necessary you can use several fields in the subject line.

 

Finally you can select if the confirmation message is a simple thank you message, or redirected to another page:

 

 

Once all is complete save the form to the bottom right:

 

Adding Form to Pages and Posts

Adding the form to any page or post is simple. After the form is saved, you will see an option to copy a shortcode. This shortcode can be used in any page, post or text widget. Simply copy and paste the code in for the form to be displayed.

 

Paste Code:

Save the relevant area that the form has been added and view the page:

The form styling should be take on your theme styling so it will fit in nicely with all Flothemes.

Two Column Forms

If you want to create 2 columns in your contact form, you can do that form settings:

 

Alternatively you can do so using the Field Width option in the “Field Settings” tab when creating your form.

To do so, select any item on the right hand side where you’ve built your form, it will be highlighted, and the “Field Settings” tab will be shown on the left:

 

Select 50% for the field width tab. To line up another item beside this, follow the same process, select and set to 50%, the items should then line up beside each other.

 

Submissions

Each submitted message is sent via email, but also is stored in the DB as Form Entries.

If there are unread entries, a red circle will show the number of unread messages:

When the message is checked via email, the related Entry will be marked as read automatically.

Also there are plugin settings that will affect all the forms.

 

 

And if there are several forms used on the same site, then the entries can be filtered by parent form:

Flo Form Settings

The Flo Forms settings area allows you to create an email reminder that can be sent to your email when a submission has not been read after a certain time frame.

Go to the Flo Form Settings tab, and then enable email reminders, select the number of days in which you want to receive a reminder if the submission has not been read, and enter the email address that the reminder will be sent to:

 

Translating the plugin

All the labels and text messages used in the plugin are in English and have localization support(can be translated). The .pot file that contains the translatable strings can be found in ‘/flo-forms/languages’ folder.

That file can be translated using the Poedit desktop application, or a WP plugin.

We recommend using the Loco Translate plugin. Read please the instructions on the plugin’s page. The only recommendation from us is to save the .po and .mo transtaled files outside the plugin. This way if the plugin is updated, then you will not loose the translation.

And if you translate the plugin in any language you are welcome to contact us and send the .po file so we can add it to the plugin to make it available for everyone.

Problems with the emails

There are some users that have issues with the contact form email. There may be more reasons why the contact form is not sending the emails. And we will describe below the steps that you should follow to try to fix this problem.

1) Check the spam folder. Sometimes the emails go to you spam, and you think the form is not working. And if you find the email in the spam, mark it as Not Spam and the future emails from that server should arrive in the inbox.

2) Disable ‘Reply-to’ headers – On some servers the emails won’t work if the headers are enabled. Therefore it is necessary to disable the ‘Reply-to’ email header, and sometimes send only text emails instead of html.

3) We need to check if your server is sending emails at all. For that you can create a new user using an email you have access to. Make sure you check the option that sends password to the user

Then check if you’ve received via email the credentials for the new user (make sure you check the spam). If you did receive the credentials, then the email is working and we need to debug further (See step 4.). If you didn’t receive any emails, then you need to contact the hosting.

4) Use an SMTP provider such as mandrill to generate the emails for you, with 99% success rate they are a fantastic way of bypassing the server side issues that can be caused when using WordPress emails. Sign up for a Mandrill account here, generate the API and get started. It also tracks your messages so you can view them in your mandrill account.

5) Disable all the plugins you have and try again. If the contact form still does not send the emails, submit a support ticket

 

Flo Forms Setup