# 4.1. Forms

**Forms** allow you to create and manage forms on your landing page. Forms can be used to collect important information from users, such as contact details, newsletter sign-ups, or feedback from customers.

<figure><img src="https://content.gitbook.com/content/cZrhJDsqJxZMsvuaSaiJ/blobs/3zwC9fNJptDuELgFdTcm/image.png" alt=""><figcaption></figcaption></figure>

## 1. Add a Form to the landing page <a href="#to-add-an-accordion-to-your-landing-page" id="to-add-an-accordion-to-your-landing-page"></a>

* Click on **Widgets** in the sidebar of the editor.
* Select **Forms** from the **Business** section.
* Choose the **Form** element and drag it onto your landing page.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FqgM074u1utPL3QL9SHMx%2Fimage.png?alt=media&#x26;token=0d2e5d22-cef9-4d3a-8ee0-298e728b6e3e" alt=""><figcaption></figcaption></figure>

## 2. Form Editor

### 2.1. Content Editor

To access the **Content Editor**, click on the **Form** widget you wish to modify on the screen and select **Content** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F8jRoHZ0F0g0WvSzDJwt1%2Fimage.png?alt=media&#x26;token=009b0ef8-2a00-4c57-8672-74b37baf3c60" alt=""><figcaption></figcaption></figure>

* **Basic Information:** Edit the information fields to collect data.
* **Add field:** Add fields to the Form.
* **Form Title:** The name of the Form.
* **Submit Title:** The name of the submit button.

### 2.2. Design Editor

To access the **Design Editor**, click on the **Form** widget you wish to modify on the screen and select **Design** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2Fswbzieef4CK9pryR700l%2Fimage.png?alt=media&#x26;token=aad574bf-fe9c-4c80-81b2-f705df9a1138" alt=""><figcaption></figcaption></figure>

* **Align:** Helps you align the Form within the container. See details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Sizes:** Helps you adjust the size and position of elements on the landing page. See details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **Display on:** Allows you to control the display of the Form on different devices, including Desktop and Mobile.
* **Styles:** Allows you to change the background color and shadow effects of the selected Form. See details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).
* **Border:** Allows you to add and customize the border around the Form, and you can also adjust the border radius. See details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border).
* **General Form:** Aligns the form, sets the background color, and determines how the text of the Form is displayed on the landing page.
  * **Space between label & fields:** Adjusts the space between the labels and the input fields.
  * **Spacing:** Adjusts the overall space between elements in the form.
  * **Vertical space:** Adjusts the vertical space between fields or lines in the form.
  * **Horizontal space:** Adjusts the horizontal space between elements in the form.
  * **Form alignment:** Aligns the entire form on the page.
  * **Fields styles:** Customizes the background and border of the input fields.\
    \- Background: Set the background color for the input fields.\
    \- Border: Customize the border of the input fields.
  * **Fields text:** Adjust the text settings within the input fields.\
    \- Label: Customize the label text of the form.\
    \- Input: Customize the input text in the fields.\
    \- Placeholder: Customize the placeholder text in the input fields.
  * **Fields input:** \
    \- MARGIN: Adjusts the outer spacing of the input fields relative to other elements in the form.\
    \- PADDING: Adjusts the inner spacing of the input fields, which is the distance from the edge of the field to the text content inside.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FtpXilI8LT04pp7eqGX0y%2Fimage.png?alt=media&#x26;token=c076e6b6-3bed-40e2-a5a4-d97edc71cec4" alt=""><figcaption></figcaption></figure>

* **Title Form:** Customize the display of the text in the form on the landing page.
  * **Spacing:** \
    \- MARGIN: Adjusts the outer spacing of the title relative to surrounding elements.\
    \- PADDING: Adjusts the inner spacing of the title, which is the distance from the edge of the title container to the text content inside.
  * **Adjust text settings:** Font family, Text alignment, Font style, Text decoration, etc.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FscY3D0MgV9DFMFf01rFJ%2Fimage.png?alt=media&#x26;token=b5870ee4-388f-4e5a-a0f4-e2c782b25fd1" alt=""><figcaption></figcaption></figure>

* **Button Submit:** Customize the appearance of the submit button.
  * **Spacing:** \
    **-** MARGIN: Adjusts the outer spacing of the submit button relative to surrounding elements.\
    \- PADDING: Adjusts the inner spacing of the submit button, which is the distance from the edge of the button to the text content inside.
  * **Space between fields & button:** Adjust the spacing between the data fields and the submit button in the form.
  * **Button Alignment:** Align the submit button within its container.\
    \- Width: Adjust the width of the submit button.\
    \- Height: Adjust the height of the submit button.
  * **Adjust the button and text settings:** Fill, Font family, Text align, etc.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FGd3i5soDazAd4XQdBYlZ%2Fimage.png?alt=media&#x26;token=9d9c870d-ab5b-41f6-b31b-ef28560f18c3" alt=""><figcaption></figcaption></figure>

### 2.3. Advanced Editor

To access the **Advanced Editor**, click on the form you wish to modify on the screen and select **Advanced** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F0SZH6QtTWDxYnkc6Kgvm%2Fimage.png?alt=media&#x26;token=4fc22dae-9438-402c-90a9-3d4dec3b8252" alt=""><figcaption></figcaption></figure>

* **Form submit setting:** Allows you to set up an event for the form submit button click action. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/event).
* **Animation**: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).