> 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2Fbdxo68ckBDvkIR7nCrGX%2FForms%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress.png?alt=media\&token=310dd432-e342-4981-9d77-e3f12fd0cbd9) **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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FVu4xMDoQUDpwnbEg5p03%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(4\).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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FExYk9QK1aubhawMizSgQ%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(5\).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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2F0TBSWX8bXd7G54RQZZIn%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(6\).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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FF1nnhOiJ2Fmw2Byy5Y2g%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(7\).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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2F9ledyvEBpVDz8lxa7InP%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(8\).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., 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)** ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FjrSiB5Satlb9UBlSTbET%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(9\).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., 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)** ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FX938GvPJLKsyVnl3idxG%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(10\).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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FODQcaZth6xZ20riG721A%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(11\).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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2Fx5kHL12jb7bKgV8QW1ZS%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(12\).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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FOlcZ1MdJM7BYrkpmX9UF%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(13\).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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FzFt4XhfkWUHKZ5IEDSI9%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(14\).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) 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FzFt4XhfkWUHKZ5IEDSI9%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(14\).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. xvi) **Radio Buttons** - enables you to select only one option from the provided options. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FACywd8UBfGmrYa1lqTQ6%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(15\).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. xvii) **Hidden input** - enables you to provide inputs which gets hidden from the site. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2F49Q0MsC5XWXonzbNWAp8%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(16\).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. xviii) **Paragraph** - enables you to provide quotes or messages on the website. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2F040yBhGOf7KGmZbcUmr8%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(17\).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. xix) **Header** - enables you to provide title or header. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FLSupR9DnhcoU2BftcT0O%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(18\).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. xx) **File Upload(PRO FEATURE) -** enables you to collect files of selected format types specified by you in the settings. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FwMA12sHNm86zfkhCTAp9%2FAdd%20New%20Form%20%E2%80%B9%20WordPress%20%E2%80%94%20WordPress%20\(19\).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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjDxbD7pNRWklUeWT0-%2F-MjXxhwCLN_TAaEjcATA%2F-MjY52x_NjQaSBARpHqg%2Fpublish.png?alt=media\&token=81b0e9e1-460d-4553-8911-154dffb97f12) * 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**. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjDxbD7pNRWklUeWT0-%2F-MjXxhwCLN_TAaEjcATA%2F-MjY5e5JAk_Re99zcItE%2Fupdate%20form.png?alt=media\&token=0ce96ad2-263b-4e62-a9fc-ebdab95c22e8)