TractionNext – Advanced Drag & Drop Form Builder

Overview

You can design the form for any activity or event with our beautiful and attractive ready to use form templates or design it from scratch with our blank canvas. These design will have professional look and responsive in nature. This new advanced form builder provides several new features to build your form design easy.

 How it is different from existing one?

Our existing form builder had the following limitations. The new form builder is designed to provide an improved user experience and supports extensive customization.

 Existing form builder limitations:

• Existing form builder templates are hard to create/edit for the end user since it requires knowledge of the internal architecture and layouts structure of TractionNEXT form templates.
• The form templates should contain element structure for all available form and contact elements in the form builder. Whenever any new form elements /properties are added / modified in the form builder, all existing templates need to modify for the element to be render correctly. Therefore, the end user always have to depend on the design /development team in order to render new elements or to make any changes in the form template.
• Form templates and form builder does not support two column layouts.
• Template dependent builder. For any small changes other than field properties listed the end user needs to modify the template ( Like background image, background color, field colors and size, audio or video header and footer logo, etc.,)
• Templates are not responsive by default.
• The end user cannot see the actual preview of the form when designing as it only shows the form fields that we are adding on an empty canvas. He needs to save and click preview to see how the form fields render with the template selected from the dropdown.

Advanced drag and drop form builder

• Readymade templates: The new drag and drop form builder comes with categorized readymade templates which helps to create forms for common use-cases with minimum effort.
• Easy to create new form templates : New drag and drop template is using bootstrap 4 and HTML5, so it is very easy to convert a bootstrap 4 form to an template.
• Auto Responsive: Since we used bootstrap 4, the created form will be auto responsive by default and it will reduce testing time.
• Two Column Layout: It will support two-column layout and user can drag and drop elements into respective columns.
• More customizable: The form structure is cleanly partitioned for clarity as Body, container, header, form and footer. The form has section and element wise customization.
• Theme switch: You can switch themes with or without overriding existing design.
• New Elements: Media Embed, Social Elements, GameOfSkill
• Page Action Buttons: You can customize page action button captions and properties.
• Custom blocks: Frequently used groups of elements or sections can be saved as Custom blocks that can be used in new forms.

How to use?

Drag & Drop form builder is used to design beautiful and attractive forms. It is used in Forms for now (in future, it will be launched for competitions too). These design form can be saved. 

Login to the TractionNext website.

• Navigate to the Form module on the top menu.
• Click on the ‘Create Form’ button on the top left corner.

Setup

Fill the details tab/page and move to content and design tab/page. Refer below image…

Click on Advanced Drag & Drop Builder.

It opens a popup window like below…

Design categories are listed on the left hand side e.g. Featured, Business etc..

All displays the available templates irrespective of category (all templates).

You can select any template of your choice and start designing your email.

When you mouse hover on any ready to use template, the options appears i.e. Preview & Select.

Preview: It displays the full template that how it looks.

Select: To select the particular template for designing the form.

Let’s select a blank canvas by clicking on “No Thanks! I will create from blank’ button. It displays the below screen. Now you drag and drop the various elements to design the form.

Select one column, two column and page break layouts as per your requirement.

Add the required elements and your Form is ready.

• Alternatively, we can build custom blocks for you, which can then be dragged and dropped to build Form templates.

Change theme

It does the following for you.

• Select to override the existing theme
• Create it from blank

Refer the below screen…

Reset theme

Once you click on Reset theme, it display the following popup…

Click on ‘Confirm’ will revert all the current changes.

 Preview

It enables you to see the preview of your designed form.

You can see the preview of Desktop and Mobile versions.

Inset contacts into form

You can insert the contacts into your form design by just dragging and dropping onto the template.

There are so many categories provided for your help such as

• Identifier
• Text
• Number
• Date and Time
• Boolean
• Contact List

Refer the below screen…

Select a type e.g. identifier and it filters and displays the identifiers defined in your account. Refer below screen…

You can select other types of contact fields.

Theme Settings
There are theme settings for each section such as

• Body
• Header
• Form
• Footer

You can set the properties (title, background color, background image etc. as desired.

Refer the below screen for body settings…

Edit CSS

This is used to add any customized css/scripts if you have. This for advance users who have understanding of HTML. It display some default source code which is head part of the form HTML

Add a new Font

This is used to add/upload a new web form or custom font.

In case of web font, you can insert the url and it is available for form design.

In case of custom font, you need to upload it and it is available for form design.