Flo Forms - Custom Contact Form

For Flothemes users we have created a custom contact form, thats drag and drop, and super simple to use. We wanted to develop a contact form offering of our own, to help prevent issues with email sending issues that other contact forms have had.

Flo Forms 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 entries if you’ve not read them.

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

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

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.

flo-forms-zip

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

Cursor_and_Plugins_‹_Mark_Allen_—_WordPress

Add_Plugins_‹_Mark_Allen_—_WordPress

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

Cursor_and_Add_Plugins_‹_Mark_Allen_—_WordPress

Once its uploaded activate the plugin:

upload-success

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:

Cursor_and_Plugins_‹_Mark_Allen_—_WordPress

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”:

click-to-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:

new-contact-form

The following inputs are available:

form-input-options

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

 

Available Fields

The following fields are available for your contact form.

form-input-options

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

Paragraph Text – 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.

Check Box – The check box field allows you to add check boxes for your site. This is great if you want to find our 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.

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

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:

select-input-flo-form

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:

field-settings-tab

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

placeholder-only-field

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

placeholder-field

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 and position:

Edit_Form_‹_Mark_Allen_—_WordPress

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.sc

 

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:

sc2

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.

You can then select the alignment of the labels on your form, above, left or right. The below example shows left alignment.

label-placements

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

Edit_Form_‹_Mark_Allen_—_WordPressEdit_Form_‹_Mark_Allen_—_WordPress

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

Cursor_and_Edit_Form_‹_Mark_Allen_—_WordPress

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.

Cursor_and_Edit_Form_‹_Mark_Allen_—_WordPress

Paste Code:

Cursor_and_Edit_Page_‹_Mark_Allen_—_WordPress

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

Cursor_and_Contact_Page_-_Mark_Allen

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:2-col

 

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-field-width

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:

50-50-side-by-side

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:

submissions-messages

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

Also there are plugin settings that will affect all the forms. http://i.imgur.com/8gpx41h.png

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

Cursor_and_Slack

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:

flo-form-settings-email

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.

Screen Shot 2016-06-22 at 6.32.34 PM

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.

form

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

Screen Shot 2015-03-13 at 9.06.14 AM

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