> For the complete documentation index, see [llms.txt](https://help.themeparrot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.themeparrot.com/extra-product-options-custom-addons-for-woocommerce/form-creation.md).
# 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., 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., 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., 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., 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. , 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. , 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., 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., 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., 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., 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., 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., 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., 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**.
