Formbuilder

Getting Started

Overview

100% Responsive Form Builder

Packed with Bootstrap 3.x, this magento 2 form builder allows you to create fully responsive front-end design on any kind of devices

Drag & Drop Magento 2 Form Builder

If you are looking for an easy to use tool like Google Form, our Magento 2 Form Builder is exactly what you need. The Form Builder comes with drag n drop feature and user friendly interface so that you can create any form such as magento 2 contact form in the most easy way.

Visual Content Creator

Our Magento 2 Form Builder is very visual content creator. Whatever you do, you will see result instantly. The live preview will help you to see how it look like on frontend

Multiple Input Types/ form field

  • Text
  • Paragraph
  • Check box
  • Multiple Choice
  • Date
  • Drop down
  • Time
  • Number
  • Website
  • Email
  • Price
  • Address
  • Rating
  • Google Map
  • Subscription
  • Dynamic Dropdown
  • File Upload
  • Section Break, etc.

Customizable form appearance

It is fully customizable. You can change layout, text, number, percentage, field type with ease

Fully Compatible with Magento 2.x

If you need tool to create custom form like magento 2 contact form, Customer Satisfaction Survey for your magento 2 store, this magento 2 form builder will be a perfect choice.

Message Manager

After your customers submit form successfully, you can manage and restore that information in the most easy way Watch Video Guide

Create as many forms as you want without any programming skills!

With our magento form builder module, you freely create unlimited amount of custom forms. Moreover, with the support of amazing features, you can create professional & content rich form as your expectation.

Before Form & After Form

This extension is also packed with “Before Form” content block, “After Form” content block, “Submit” button text, Message after successful form submission

Recaptcha Security, Spam Protection

To protect your site from spam and abuse, the magento 2 form builder is equipped with Recaptcha Security, Spam Protection

Show Form In Any Position + Multiple Display Types

You can add your form in any position with widget support. Moreover, there are many available display types such as popup, animation, button link, show on current page.

Customizable Layout with Bootstrap Grid

Easily to build any layout as you expect. With the support of Bootstrap Grid, you can divide column and block very easy

Ajax Effects When Submitting Form

After customer submitted their form, great Ajax Effects will appear that give usability and practicality as well as elegance

Design options: Background, Font, Icon, Border

Our magento 2 form builder comes with design editor tool that allows you to change Background color, Font, Icon color, Border color in a blink of an eye.

Show Results With List

All results you get from participants will be collected and arranged in a neat & clean form.

Installation

To install Magento 2 Form builder extension, please follow below instructions step by step

1. Back up your web directory and store database.

2. Download Magento 2 Form builder installation package

3. Upload content of the Form builder installation package to your store root folder via FTP/SFTP
install-magento-2-form-builder

4. Connect to your store root directory with SSH

cd path_to_the_store_root_folder

Run 3 commands bellow:

php -f bin/magento setup:upgrade
php -f bin/magento setup:static-content:deploy
php -f bin/magento setup:di:compile

5. Flush store cache, log out from the backend and log in again

Execute the following command

php -f bin/magento cache:clean

menu_clear_cache

Or go to Back-end > System > Cache Management. Click the following buttons to completely clear the store cache:

  1. Flush Mangento Cache
  2. Flush Cache Storage
  3. Flush Catalog Images Cache
  4. Flush Javascripts/CSS cache

menu_cache

Video Guide

Usage

How To Configure Form Builder

In this tutorial, I will show you how to Configure Form Builder Extension in magento 2. Let’s take a look at our tutorials below.

Now, it is time for us to set up Form Builder in your magento 2 backend

Firstly, it is highly suggested to run through setting before creating your first form. This will help you better understand how the extension work; simultaneously, you can take use of all setting to create your blog post look and feel as your expectation

In order to config in the backend, please go to Admin Panel > LandOfCoder> Form Builder > Setting

1-form-setting

I. General Setting

+) Enable: Set yes to enable the extension
+) Route: : defines the direct link to the new form
+) Date Format: choose one of 4 types to show date & time
Google reCaptcha
+) ReCAPTCHA Site Key: The ReCAPTCHA site key is used to display the widget on your site
+) ReCAPTCHA secret Key: The secret authorizes communication between your application backend and the reCAPTCHA server to verify the user’s response

2-form-setting

II. Email Setting:

+) Enable Test Mode: Select “Yes” to enable Test Mode/ Sending Test Emails
+) Allow send thank you email: Select “Yes” to send thank you email automatically
+) Email Sender: Choose email sender address for your email

III. Field Templates

+) Address: This field is created by custom variables( view detail: http://docs.magento.com/m1/ee/user_guide/cms/variables-custom.html)
Street: {{if street}}{{var street}}<br />{{/if}}

City Region: {{if city}}{{var city}}, {{/if}} {{if region}}{{var region}}, {{/if}}

Postcode: {{if postcode}}{{var postcode}}{{/if}}<br/>{{var country}}

Google API: This Public Key is used to show location with google map on your form.

address arrange

Front-end shows like this:

3-setting-address

How To Create A New Form

In this tutorial, I will show you how to create a new custom form in magento 2. Firstly you need to fill in the form.

Please Go to LandOfCoder >> Form Builder >> Create Form

add-new-form

I. Form Information
+) Form Title: define title of your new form
+) Identifier: define URL link for the form
+) Receive Notification: please add your email address which you want to receive notification when customers submit form

+) Email Template: Choose email template you want to send
+) Submit Button Text: Add Text for ” Submit Button” here.
+) Redirect Link:
+) Show reCaptcha: Select Yes to show reCaptcha
+) Show on TopLink: Select Yes to show Toplink
+) Customer Groups: Choose customer groups to show new form
+) Store View: Choose store view in which you show new form
+) Status: Select “Enable” to make your new form public

1-create-form

II. Form Content

In this part, you can insert messages that show “before form” and “after form” position as well as successful submission message.

before-form-and-after-form

III. Form Creator

In this section, you can freely create your form. Firstly select suitable form field as you want, then edit the field as below

form-field

Form Field

1. Text
2. Paragraph
3. Date
4. Dropdown
5. Time
6. Number
7. Website
8. Email
9. Price
10. Address
11. Rating
12. Subcription
13. Google Map
14. Model Dropdowns
15. Section

1. Text:

text-form

+) Label: 

  • Label: Put title of this form field here
  • Color: Choose color for the title
  • Font Size(px): Input Font size for the title
  • Font Style: Choose Font Style for the title
  • Font Weight: Input Font Weight for the title

+) Place Holder: input placeholder text here
+) Bootstrap Column:

  • Wrapper width: select column width here( max: 12)
  • Field width: select field width here

+) Icon : choose icon that appears in the form field
+) Border:

  • Width: input desired border width
  • Style: select desired border styles here
  • Radius: input border radius here

+) Color:

  • Text: input text color here
  • Background: input background color here

+) Length Limit
Set min/ max for characters or word in the field content.

+) Validation: choose type of content validation here

The following form field is pretty much straightforward with the options names speaking for themselves. You can config as we did above.

IV: SEO

+) Page Title: Type your post title that will be shown at the top of it;

+) Keywords: Set keyword for your post

+) Description: Write meta description that will be shown on search engine results

In the next section, the configuration is pretty much straightforward with the options names speaking for themselves.

How To Manage Form

After creating the new form, you can manage form by going to LandOfcoder > Form Builder > Form Management

manage-form

Then choose to edit desired form as below imagemanage-form-edit

the configuration is pretty much straightforward with the options names speaking for themselves. Or you can see the previous part( how to create form) to change information and edit form as your expectation

Types of fields

Text

Label:

Design Options: label color, label font size,

icons

Paragraph

Checkboxes

Multiple Choice

Date

Dropdown

Time

Number

Website

Email

Price

Address

Rating

Subscription

Google Map

Model Dropdowns

Section Break

File Upload

Video Tutorials

Video Tutorials

install-form-builder
use-form-widget
create-form-builder
Top