> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-elements/business-widgets/forms.md).

# 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="/files/JMygF4fcM1ftKvcKYIs0" 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="/files/75m4f6wNOruZ9WBIJlJf" 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="/files/7UtuhGVixqNnIzy15u1F" 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="/files/hDjrSSAWr8k5CQtZaIhv" alt=""><figcaption></figcaption></figure>

* **Align:** Helps you align the Form within the container. See details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align.md).
* **Sizes:** Helps you adjust the size and position of elements on the landing page. See details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size.md).
* **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>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles.md).
* **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>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border.md).
* **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="/files/LGBhkmRWpNJNCIz4s6ZF" 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="/files/SBCuYAoXG9uvup6kUb02" 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="/files/6RrGIgkuxMXwzTw9KaNO" 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="/files/4TC5HqvhPEx6gP0G1YFi" 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).