Form Maker by 10Web – Mobile-Friendly Drag & Drop Contact Form Builder

Navigate to Form Maker > Forms page to build your very first contact form. This contact form creator plugin provides a few sample forms, which you can quickly edit and publish.

Using Form Maker > Forms page, you can manage existing forms, perform Bulk Actions, such as Publish, Unpublish, Duplicate or Delete. Select the necessary form, choose the bulk action, then press Apply. Also, you can search for your contact form by writing its title in the top Search input.

Press Add New button from Forms page, and you will be redirected to Form Editor page. Make sure to write a Title for this contact form, then choose the Theme which sets the appearance of your form. In case you wish to display the contact form with the same style as your website theme, select Inherit From Website Theme option from Theme select box.

To add a new field with this application form creator, drag New Field button to the area where you wish to place the field. The field editor toolbox of Form Maker will be opened automatically. Click on the field set from which you are going to choose the form field, for instance, User Info Fields. Press Name button from this field set to add a Name input to your form. Then click Add and the field will be placed to the area of the form you selected initially.

It is also possible to search among the form builder fields when adding a new field to your form. Use Filter input at the top left corner of fields toolbox. For example, you can search “phone” and all Phone fields will be filtered.

This dynamic contact form builder lets you have a nice header section on your forms, which can contain additional content, as well as images with animations. Click on Form Header bar of your form to open its toolbox and provide a Title. This is the form heading, which will appear above your form. In addition, you can write a Description to appear right below the Title of your form. This comes handy, in case you need to write an introduction for your form.

You can also have an image on your form header and set it to appear with an animation effect. Press Add Image button to upload and select a picture from WordPress Media Library. Then choose the animation effect using Image Animation option.

In case you don’t want the Header Image of your forms to appear on smartphones and tablets, mark Hide Image on Mobile option as checked.

Make sure to Publish/Update the form to save the change you made.

Yes, another fantastic feature of this custom form creator plugin is its Conditional Fields. This lets you show or hide fields of your form based on certain selections submitter makes.

The structure of conditional fields in this contact form generator form builder is the following: You can specify and/or show/hide a field, when condition is true and provide conditions below, e.g. Show “How many visitors will you have” if “Will you have visitors” is “Yes”.

Go to Form Options of your form, then click Conditional Fields tab to start the setup. Press Add Condition button to configure the first condition of your form.

Show/Hide select box of this form builder plugin represents the action which will be completed, if all or any of the condition statements are fulfilled. Use the second drop-down menu to select the form builder field which will be shown or hidden.

Click the little Plus (+) icon to add the statement of your form condition.

For example, let’s assume there is a Single Choice field on your form titled Inquiry type. And you wish to show Message field in case users choose Support Request as the type of their inquiry. The condition you configure needs to have the following logic:

Show [Message] if [all] of the following match:
[Inquiry type] is [Support request]

Make sure to hit Update after setting up Conditional Fields on your Form Maker.

This secure form builder plugin comes with 14 customizable themes, which you can use to design your forms. Each theme of Form Maker provides a set of user-friendly options to change font size, alignment of the form, colors, modify paddings and more. You can edit the existing themes, or create your own by clicking Add New button.

To set a initial default theme for your forms, press on the star icon next to the theme you would like to use. You can always change the theme by editing your forms.

Options of Form Maker Themes are divided into the following sections:

• Global Parameters
• Form Header
• Content
• Inputbox
• Choices (Multiple and Single)
• General Buttons
• Pagination
• Form Buttons
• Close (Minimize) Button
• Minimize Text
• Other
• Custom CSS

You can preview the design of each web form theme under Preview block. In case you created forms with multiple pages, you can change its Pagination Type, setting it to Step, Percentage or None.

Custom CSS option in Themes of this offline form builder lets you write additional CSS code and customize your forms further. All CSS rules apply to this editor. Make sure to press Save after modifying the form theme.

You can use Email Options of Form Maker to send a fully customizable letter to the submitter. The entries can be included within the email. Just select the form you want to edit, then navigate to Form Options > Email Options.

This html5 form builder plugin lets you send submitted information to one or multiple email addresses. Furthermore, you can also send a confirmation email to the submitter and let them know you have received their application.

Enable Send E-mail from Form Options > Email Options tab and start configuring mailing settings. Most options require the same configuration for Email to Administrator and Email to User on the forms. However, there are a few settings which are unique.

Email to Administrator

This section of Email Options allows you to set up notifications of form submissions for website owners.

Email to User

Send to. Use this setting to select the email field of your form, to which the submissions will be sent.

Important! In case you do not have an email input created from User Info Fields > Email type on your form, the following error message will appear:

"There is no email field".

Email Verification. Activate this option, in case you would like the users to verify their email addresses. If it’s enabled, the user email will contain a verification link. Clicking on this link set the user email address as verified.

Verification link expires in. Use this option to specify a time period (hours), during which the user will be able to verify their email address.

Edit Post. Click this link to edit the content of Email Verification post. This is is the page, where users will be redirected after they click on the verification link in user email.

Payment support is available in the Premium version of the plugin.

In order to have a functional payment form, first and foremost, you need to have Payment Fields added to it. This way, Form Maker plugin will turn into an online order form creator quickly and easily. Build compact shopping forms, hotel reservation, online application or ticket sales forms with this feature.

Note: You need to set up Form Options > Payment Options of your form in order to receive payments on your account. Follow the steps described on this section to do that.

Configuring Payment Options, you can use Form Maker as an order form generator and let users make payments through your form. Default payment gateway of Form Maker is PayPal. Select PayPal as Payment Method from Form Options > Payment Options tab and configure corresponding options.

Also, you can easily integrate the forms builder plugin with Stripe using its Stripe Integration extension ( Available in Plugins Bundle ).

Payment Currency. Choose the currency to be used for the payments made through your form. Note, that the selected currency symbol will only display on the front-end of the published form.

Tax (%). Specify the percentage of the tax for your payment form. It will be calculated from the total payment amount of your form, and will be added to the grand total.

Checkout Mode. Select the checkout mode for your form. Testmode will display PayPal Sandbox after submission, which allows you to run payment tests. When you are ready to receive payments, enable Production mode.

Paypal email. Provide the email address of a valid PayPal account. This account will be used as the recipient of payments through your form.

Submissions page of this HTML form generator plugin lets you view the full record of submissions of each web form. Choose your form from Select a form drop-down box to display its submitted information. Furthermore, you are able to view Statistics of Single/Multiple Choice and Select Box fields.

Entries / Conversion Rate / Views. These attributes of Submissions page will help you quickly view the statistics of the selected form.

Export to CSV / Export to XML. You are able to download all submissions of each contact form in CSV or XML format by clicking on these buttons.

Show Filters. Form Maker lets you filter form submissions by values provided by user, e.g. submitter’s email address, name and more. Press Show Filters button on form submissions, write the values you wish to search with, then press Search. Click Reset button to clear the filters.

Add/Remove Columns. This button will help you customize the columns which display in submissions of the selected contact form. Click on the button and unmark the columns you wish to hide.

Note: Adding/Removing columns does not delete columns from the submissions table of your contact forms. It just hides them until you activate them again.

Block IPs / Unblock IPs. In case you are receiving spam submissions from certain IP addresses, you can block these addresses. Mark all spam submissions as checked, choose Block IPs option from Bulk Actions and press Apply. You are able to unblock these IP addresses anytime.

Delete. If you wish to remove some or all submissions of a contact form, mark them as checked and select Delete option from Bulk Actions. Clicking Apply will delete these entries permanently.

Form Maker plugin allows you to configure different actions which occur after form submission. For instance, you can display a "Thank you" message after users submit the form, or redirect them to another page, or more.

Navigate to Form Options > Actions After Submissions tab, and select one of the options below to set up the action that occurs after users submit your form.

• Stay on Form. This action will reload the form page and keep the submitter on the same page.
• Post. Select this option to redirect users to a specific post after they hit Submit. You will then be able to select the post from Post dropdown menu.
• Page. You can also redirect users to a selected page. Choose this option and specify the destination using Page dropdown menu.
• Custom text. Use this action in case you wish to display a "Thank you" message after users submit the form. The editor box accepts text, basic HTML, as well as values of form fields. Include them to the content by pressing on the top buttons indicating form fields.
• URL. Configure redirection from your forms to any page with this action after submission. Mark URL option, then provide the absolute path of the link to the input that appears.

Form Maker uses modern verification methods, such as ReCaptcha and invisible ReCaptcha. Please note that will need to obtain ReCaptcha keys to use these options. Otherwise you can use Simple Captcha and Arithmetical Captcha which use standard word verification and arithmetical expressions respectively.

You can register users on your website with the help of Form Maker WordPress Registration Extension ( Available in Plugins Bundle ). Install the Extension and use it alongside the free version of Form Maker plugin.

You are able to ask users to provide username, email address and password for their account. The registration of users is done upon completing the form created by this visual form builder plugin.

You can publish your form not only using Display Options of the web form builder tool, but also as a widget. Go to Appearance > Widgets page to place your form on any widget area of your website theme.

Search for Form Maker widget and drag it to the widget area where you wish to place your form. Specify a Title for the widget and choose the form you wish to publish. Press Save after making these changes.

Premium version of Form Maker plugin allows you to publish submissions on front-end of your website.

This form creator plugin lets you select user roles which will be able to view the published submissions. This can be done from Form Options > General Options section. Also, in the same section, you are able to choose fields to hide from front-end submissions.

Firstly, add/edit the page or post, where you wish to publish the submissions of form. Then press Add Submission button from the top of the post editor.

Select a Form. Use this drop-down to choose the form, submissions of which you would like to publish.

Select Date Range. You can display form submissions from a specific date range. Use this option to select From and To dates.

Select fields. Use this option to choose which columns to show on the form. Uncheck the options, which you need to hide on front-end submissions.

Export to / Show. These two settings are responsible for showing the rest of the attributes of front-end submissions. You can enable/disable CSV/XML export buttons, Statistics, Views, Conversion Rate and other additional information.

After configuring all necessary options, press Insert. Publish your page with form submissions, and you will be able to view them on front-end.

Premium version of this handy forms plugin has the features and functions to create PayPal forms. You need to use Conditional Fields and Payment Fields of the plugin. Here are the necessary steps.

Firstly, add one Single Choice field from Basic Fields of Form Maker plugin. It should contain the following two options:

• Pay with PayPal
• Pay offline

Afterwards, add two sets of almost identical fields, one of them created with regular form fields, second – with Payment fields.

Then you can set conditions from Form Options > Conditional Fields, if the user chooses PayPal, payment fields will appear, otherwise, regular fields will.

The user will not be redirected to PayPal if they make their selections using regular form fields.

If you want to migrate Form Maker database tables from one WordPress site to another, you need to follow the instructions below.

Please uninstall Form Maker if you have it installed on your second site first, then proceed with these steps:

On your first WordPress site:

1. Go to PHPMyAdmin of your site,
2. open your WordPress site database,
3. select Export menu item,
4. change the radio button from Quick to Custom,
5. unselect all tables and select the following 7 tables:

[wp1_prefix]_formmaker
[wp1_prefix]_formmaker_blocked
[wp1_prefix]_formmaker_query
[wp1_prefix]_formmaker_sessions
[wp1_prefix]_formmaker_submits
[wp1_prefix]_formmaker_themes
[wp1_prefix]_formmaker_views

(where [wp1_prefix] is your WordPress database prefix)

1. scroll all the way down and press the Go button. This should export an SQL file containing those 7 tables.

On your second WordPress site:

1. Go to your WordPress database,
2. select Import menu item,
3. browse for the exported SQL file,
4. scroll all the way down and press Go button. This should import Form Maker tables to your WordPress database.

Now you need to change the prefix for those tables to the one that is set for your second WordPress database.

1. Select [wp1_prefix]_formmaker table from the left pane of PHPMyAdmin of your second WordPress database,
2. select Operations menu item from the top menu
3. scroll to Table Options box and edit the value of Rename table to field with the second WordPress database prefix, so that the table name now looks like this: [wp2_prefix]_formmaker (where [wp2_prefix] is your second WordPress database prefix)
4. do the same for other 6 tables.
5. go to your second WordPress administration panel and install the Form Maker.

That’s it! Now you should have your forms, submissions, and themes all set up.

Please note, that this problem is not caused by Form Maker plugin. It is rather a formatting issue in Excel. However, you can prevent it the following way:

• Please open a new Microsoft Excel document first. Then go to Data tab from the menu and click on From Text.
• Choose the CSV file you need to view. You’ll see a pop-up window with several options, you’ll find the File Origin option along with them.
• Please select Unicode (UTF-8) for this dropdown and click Next if you need to edit other options, or just Finish to insert the document.

The special characters in the CSV submissions of your contact forms should appear correctly afterwards.

This might be a problem related to the hosting configurations of your website. You can check that the following way.

Please install WP SMTP plugin and go to Settings > WP SMTP page. Scroll down to the bottom and send a test mail to your email address.

If the test email will be sent, then the issue is triggered by Form Maker plugin. Please contact 10Web Customer Care at WordPress.org Support Forums. Our developers will have a closer look.

But if the test mail fails, the problem is on the server of your website. Please contact your hosting provider in this case, and ask them to enable mail functions on your site.

This problem could be related to permission settings of Form Maker files on your web server. Please check that the following way.

Connect to your website files via FTP connection and open the following two directories:

wp-content/uploads/form-maker-frontend/js/
wp-content/uploads/form-maker-frontend/css/

Please make sure all .css and .js files in these folders have their permissions set to 777.

If the permissions are correct, please do not hesitate to contact 10Web Customer Care at WordPress.org Support Forums.

To fill in values of parameters from a URL into Form Maker fields, it is necessary to implement a custom script. Please navigate to Form Options > Javascript page and add the following code inside before_load() function:

function getParameterByName(name, url) {    if (!url) {       url = window.location.href;    }    name = name.replace(/[[]]/g, "$&");    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),    results = regex.exec(url);    if (!results) return null;    if (!results[2]) return '';    return decodeURIComponent(results[2].replace('/+/g', " ")); } jQuery("#{{field_id}}").val(getParameterByName("{{param_name}}")); jQuery("#{{field_id}}").attr("class", "input_active"); 

Where {{field_id}} is the ID of the field you wish to prefill. Also, {{param_name}} is the name of the parameter in the URL.