Flo Forms - Custom Contact Form
- 1. Download and Install Plugin
- 2. Create a Form
- 3. Available Fields
- 4. Addings Fields and Field Settings Tab
- 5. Form Settings Tab
- 6. Adding Form to Pages and Posts
- 7. Two Column Forms
- 8. Submissions
- 9. Flo Form Settings
- 10. Translating the plugin
- 11. Problems with the emails
- 12. The form stopped working, what can I do ?
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.
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.
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.
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.
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:
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 and position:
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.
You can then select the alignment of the labels on your form, above, left or right. The below example shows left alignment.
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:
The Conditional Logic option can be used to show and hide form fields based off of the user’s inputs.
Note that for the Checkbox field type, the value you should check against is ‘true’
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.
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:
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 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:
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) Change the email subject. Some email servers do not work with certain email subject:
4) 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.
5) Use a 3rd party SMTP provider For that we recommend WP Mail SMTP plugin. The plugin allows to integrate with several services.
6) Disable all the plugins you have and try again. If the contact form still does not send the emails, submit a support ticket
The form stopped working, what can I do ?
There may be various reasons, but one common problem happens when adding SSL certificate to the website, and the WordPress address URL is not updated to contain ‘https’.
So if the SSL certificate was added, make sure these settings have also ‘https’: