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: They are Extra Product Options (Custom Addons).
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) Range / Slider- allows customers to visually select options within a specific range. (PRO FEATURE)
Required - enabling this checkbox to make the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message on the 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 the default value for this field.
Type - select what type of text you need for this field like text, e-mail, telephone, or color.
Min. Value - it represents the lowest selectable value within the range.
Max. Value - it represents the highest selectable value within the range.
Step Value - it determines the increment or decrement value when adjusting the slider position
Slider Color - it is the visual appearance or hue of the slider component on the product page.
vi) URL- allows for adding a web address or link. (PRO FEATURE)
Required - enabling this checkbox to make the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message on the 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 the default value for this field.
Type - select what type of text you need for this field like text, e-mail, telephone, or color.
Max Length - specifies the maximum number of characters allowed to enter this field.
vii) 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.
viii) 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.
ix) 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.
x) 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.
xi) 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.
xii) 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) the first field provides a label for the option.
iii) the second field provides value to the option.
iv) click add the option to add options.
v) click X red icon at the 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.
xiii) Multi Select- allows customers to choose multiple selections from a list of options. (PRO FEATURE)
Required - enabling this checkbox to make the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message on the 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) the first field provides a label for the option.
iii) the second field provides value to the option.
iv) click add the option to add options.
v) click X red icon at the right corner to delete that option
Set Price - it allows for assigning a specific price to each selected choice or combination of choices.
Min. Selections - it sets a minimum number of choices that must be selected by the customer.
Max. Selections - it restricts the maximum number of choices that can be selected by the customer.
xiv) Checkbox - enables you to select an option in the form of a tick.
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) the first field provides a label for the option.
iii) the second field provides value to the option.
iv) click the add option to add options.
v) click X red icon at the right corner to delete the 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.
xv) Checkbox Group - enables you to select multiple checkboxesan option.
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.
xvi) 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.
xvii) 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.
xviii) 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.
xix) 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.
xx) 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 4mo ago