Form Builder

​
STEP 1 : Navigate to Extra Product Addon -> Add New Form to create a new form or Choose All Forms to modify the existing forms.
STEP 2 : These are Extra Product Addon options.
General Properties
These are general properties for all the fields in Extra Product Addons.
i) Click the Pencil icon to Edit or Modify the fields.
ii) Click the Copy icon to create a Duplicate of the field.
iii) Click the Delete icon to Remove the field from the Checkout section.
We will see the features of each Field one by one.
Field Properties
i) Text - enables you to collect the text data.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like text, e-mail, telephone, color.
Max Length - specifies the maximum number of characters allowed to enter in this field.
ii) Email -  enables you to collect mail-id.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like text, e-mail, telephone, color.
Max Length - specifies the maximum number of characters allowed to enter in this field.
iii) Telephone - enables you to collect contact number.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date picker, etc,....
Max Length - specifies the maximum number of characters allowed to enter in this field
iv) Color Picker - enables you to provide color options.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like text, e-mail, telephone, color.
Max Length - specifies the maximum number of characters allowed to enter in this field.
v) Date Picker - enables you to collect date data.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - sets the default format for this field.
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
vi) Time Picker - enables you to collect time(like product delivery time).(PRO FEATURE)
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
vii) DateTime Picker - enables you to collect both date& time(like as delivery timing). (PRO FEATURE)
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date-time picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
viii) Number - enables you to collect numbers or count.
Required - by enabling this checkbox makes the field mandatory.
Label -provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Min - specifies the minimum limit allowed to enter in this field.
Max - specifies the maximum limit allowed to enter in this field.
Step - specifies value intervals between min & max.
ix) Text Area - enables you to collect a message or description.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like text area, tinymce, quill.
Max Length - specifies the maximum number of characters allowed to enter in this field.
Rows - specifies number of rows the text allowed in this field.
x) Select - enables you to select from the drop-down list.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Allow Multiple selections(PRO FEATURE) - enable this to select more than one options.
Options - 
i)   blue dot denotes which of these is selected by default.
ii)  first field provides label to the option.
iii) second field provides value to the option.
iv) click add option to add options.
v) click X red icon at right corner to delete that option.
Set Price(PRO FEATURE) -
In Price - specifies the value based on the options selected & price rate of the product.
In Percentage - specifies the value based on the options selected & price rate of product in percent.
xi) Checkbox - enables you to select multiple options.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Options - 
i)   blue tick denotes which of these is selected by default.
ii)  first field provides label to the option.
iii) second field provides value to the option.
iv) click add option to add options.
v) click X red icon at right corner to delete option.
Set Price(PRO FEATURE) -
In Price - specifies the value based on the options selected & price rate of the product.
In Percentage - specifies the value based on the options selected & price rate of product in percent.
xii) Radio Buttons - enables you to select only one option from the provided options.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Options - 
i)   blue dot denotes which of these is selected by default.
ii)  first field provides the label to the option.
iii) second field provides value to the option.
iv) click add option to add options.
v) click X red icon at right corner to delete option.
Set Price(PRO FEATURE) -
In Price - specifies the value based on the options selected & price rate of the product.
In Percentage - specifies the value based on the options selected & price rate of product in percent.
xiii) Hidden input - enables you to provide inputs which gets hidden from the site.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
xiv) Paragraph - enables you to provide quotes or messages on the website.
Content - provides you to enter brief text based on your need.
Type - specifies content text type - paragraph, block-quote, address, output.
class - A space-separated list of CSS classes will be added to the input element.
xv) Header - enables you to provide title or header.
Label - provides title to the field.
Type - specifies heading type whether h1, h2, h3, h4, h5 or h6.
Class -  A space-separated list of CSS classes will be added to the input element.
xvi) File Upload(PRO FEATURE) - enables you to collect files of selected format types specified by you in the settings.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder -  this is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for e-mail, provide a sample mail-id i.e.,[email protected] will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Type - select what type of file you need to upload for this field based on your settings.
Multiple Files(PRO FEATURE) - enables you collect multiple files of specified formats.
NOTE : 
After creating form or forms of your choice. Click Publish to make use of the form in product page.
If you have already created the form. Now, you need to modify and update in product page.After modifying the form, Click Update.
To delete the created form, Click Move to Trash.
​
​
Last modified 5mo ago