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.
.png?alt=media&token=4b7336e1-326f-4a6e-bb77-8e0de4c0fcbf)
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.
i) Text - enables you to collect the text data.
.png?alt=media&token=d5e4473c-67e6-49c6-9352-3d1ae059d5da)
- 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.
.png?alt=media&token=cef79627-126d-44bd-a2e0-1ac27243f72a)
- 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.
.png?alt=media&token=dda7eb81-e7c5-447c-ac41-0caf59483db3)
- 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.
.png?alt=media&token=bc27ce38-feb8-49ea-b92c-ca696b5fa654)
- 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.
.png?alt=media&token=379e0328-5ef9-4c1c-8570-1aecd9da22af)
- 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)
.png?alt=media&token=67b8860b-366d-442f-a254-137a0f2bb775)
- 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)
.png?alt=media&token=4ac6e717-853e-4797-bcd5-c822d6d10c4a)
- 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.
.png?alt=media&token=23ef3732-4cda-4c7d-a42a-46a83286d5fd)
- 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.
.png?alt=media&token=b5cd58cf-7516-4f2c-9b42-6d44e29c121a)
- 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.
.png?alt=media&token=28a30a63-ce86-425a-8a9e-5572bb5ed033)
- 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.
.png?alt=media&token=d6eb32e6-dd99-469c-969a-720389372b76)
- 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.
.png?alt=media&token=c0ad1144-0d45-4b75-bf17-b46963a50af9)
- 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.
.png?alt=media&token=f7ccccfd-978f-4887-8383-d08475bf3a7f)
- 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.
.png?alt=media&token=fa0b837d-cbc5-4647-a397-66a8a16a1981)
- 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.
.png?alt=media&token=9e11ae49-6b38-44e0-824b-6a406b5ccf45)
- 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.
.png?alt=media&token=ec3c9cb1-49a7-48a6-a526-f80bea2dcaae)
- 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.
