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

You should go to our site, login with your account > go to Dashboard > Download Products > then download module file “Lof Formbuilder – Magento 2.x” will get the file “lof_formbuilder_v2.1.0.zip“. After decompress it we will get the folder and files as this:

 

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

How To Manage Blacklist?

Note: the feature just available for module version 1.0.6

To manage the blacklist you should go to admin > Landofcoder > Lof formbuilder > manage blacklist

You can add new blacklist item to block IP address or email address as you want:

Or you can add IP, emails in a message to blacklist:

To enable the blacklist checking on frontend, please go to admin > landofcoder > Lof formbuilder > configuration then enable the option:

On frontend we will get the result:

How to use modal dropdown field?

The module support display dynamic dropdown list. You can define model dropdown fields in the form as this:

Model Field 1 >> Model Field 2 >> Model Field 3

Choose option of Model Field 1 will get list option of Model Field 2.

Choose option of Model Field 2 will get list options of Model Field 3.

Ex: choose model dropdown list steps by steps

Model >> Mechine Type >> Rim Size >> Speed Rating

To make the field please follow as steps:

1, Create model categories:

We should create parent model categories before, then create children:

  • Create model category item “Model”
  • Create model category item “Machine Type”, and set parent item = “Model”
  • Create model category item “Rim Size”, and set parent item = “Machine Type”
  • Create model category item “Speed Rating”, and set parent item = “Rim Size”

2, Create model items:

We should create parent model item before, then create children:

  • Create item for Category “Model” before:

Dimension Serie – Category = “Model”

  • Create item is child of Dimension Serie:

SST1200es – Category = “Mechine Type”

  • Create item is child of SST1200es:

Demo Rim Size 1 – Category = “Rim Size”

  • Create item is child of Demo Rim Size 1:

Demo speed testing 1 – Category = “Speed Test”

  • Then we will have a parent – children data tree as this:

Dimension Serie >> SST1200es >> Demo Rim Size 1 >> Demo speed testing 1

Model >> Mechine Type >> Rim Size >> Speed Rating


 

3, Config form field:

  • Edit the form builder profile
  • Open tab “Form Creator”
  • Add form field type “Model dropdown”
  • Config field type as this:

And config other options as you want.

Note: should add Data Model Categories by order Parent before then Children. Model >> Machine Type >> Rim Size >> Speed Rating

Check our demo form at here: http://newdemo.demo4coder.com/magento2/formbuilder/test2-form

How to reply emails in message?

Note: the feature just available for module version 1.0.7

To manage the message replies you should go to admin > Landofcoder > Lof formbuilder > manage replies

The feature allow you reply any email address in a message which submitted from customers or guests. The feature just work when the message have email form field.

  • Go to admin > Landofcoder > Lof Formbuilder > Manage Messages
  • Edit the message which you want
  • Click on tab “Reply Email”
  • Then choose Email To – The dropdown will auto get list email address which was submitted on the message. And input some content as you want, then click on “Send Email” on bottom

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

FAQ

How to disable bootstrap css file?

If your custom template are using bootstrap css. So, the bootstrap css file of the module will override your theme styles, we can disable the bootstrap-tiny.css file in the module by the way:

Step 1. add the file.

app/design/frontend/[Theme Vendor Name]/[ThemeName]/Lof_Formbuilder/layout/default.xml

then add content for the file as this:

 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	<head>
		<remove src="Lof_Formbuilder::css/bootstrap-tiny.css" />
	</head>
</page>

Step 2. Then run commands:

php bin/magento setup:upgrade –keep-generated
php bin/magento cache:clean 

How to allow auto send all thanks you emails?

You want to auto send thank you email to all email fields in the form builder profile after customer submit the form?

Please go to admin > Landofcoder > Lof formbuilder > Configuration. Then enable the options:

Allow send thanks you email = Yes

Allow send thanks you email for all email fields = Yes

How to allow add all emails into newsletter subscription?

You want to auto add all email address in form fields into newsletter subscription when customer submit the form?

Please go to admin > Landofcoder > Lof formbuilder > Configuration. Then enable the options:

Auto add emails to newsletter subscription = Yes

How to config show reCaptcha on form?

The extension Lof FormBuilder are support google reCaptcha which dont allow spam bot submit the form.

  • You should register the reCaptcha API Site Key and Secret Key for your site. Please go to the link: https://www.google.com/recaptcha/admin
  • Go to the module settings (admin > Landofcoder > Lof Formbuilder > Settings > General ). Then input your keys at here:

 

How I can custom form field template file?

If you want to custom template file of same form field (ex: input text) but just for a special field, not for all field type “input text”. In the form profile creator you can add custom field file as this:

Then add copy the base field file in the folder “app/code/Lof/Formbuilder/view/frontend/templates/fields/” and create new file (custom_text.phtml) with same content from base file (text.phtml), then you can custom for the file “custom_text.phtml” it will not affect to other field dont use custom template.

Top