# Forms

At Shoppego you can now create your page and have a form element for collecting your customer information.

**To enable you to use this function, you&#x20;**<mark style="color:red;">**must also set Captcha**</mark>**&#x20;in your Shoppego store. For examples of setting Captcha, you can refer to this link:**

**For an example setting, you can go to the section:**

{% content-ref url="/pages/NjVJbFJSVV5ODogdGX5O" %}
[Google reCAPTCHA V3](/en/settings/captcha-providers/google-recaptcha-v3.md)
{% endcontent-ref %}

1. Log in to your Shoppego account

<figure><img src="/files/lCN7aw3FznaFFoOAyya2" alt=""><figcaption></figcaption></figure>

2. Click on **Forms**

<figure><img src="/files/RFWjewuqo8zmMwOSQoR7" alt=""><figcaption></figcaption></figure>

3. Click on the **Add form** button

<figure><img src="/files/XZmUFXeTcbu0epXLdn7d" alt=""><figcaption></figcaption></figure>

4. Then, **enter your Title page** that has the form and click **Save**

<figure><img src="/files/okeMKnvETOfnWV3yzQL2" alt=""><figcaption></figcaption></figure>

5. Now, your special page with the form element has been successfully created.

<figure><img src="/files/TnXfVXrWEZWccbZo72gg" alt=""><figcaption></figcaption></figure>

Next, you can continue with the settings for your page design.

## Page Settings

1. You can click on the **Edit with Builder** button

<figure><img src="/files/56o99ZcvgH4fNjkDsUVN" alt=""><figcaption></figcaption></figure>

2. Later, you will be taken to our builder editor page and design your page as usual using our builder editor.

<figure><img src="/files/XMBeJruOmHIPaQRRrRKD" alt=""><figcaption></figcaption></figure>

### Preview Form

1. To see your page on the live website, you can click on the **Preview** button

<figure><img src="/files/1pR1xRpFdv9PwOK0c26l" alt=""><figcaption></figcaption></figure>

### Duplicate Form

1. You can click on the **Duplicate** button to create a new form page using the design or setting of your existing form.

<figure><img src="/files/roznR4VMj0lAJEgsEb8q" alt=""><figcaption></figcaption></figure>

2. Then, you can enter the information for your new form and select the settings you want to bring to the new form.

| Settings                             | Description                                                                                  |
| ------------------------------------ | -------------------------------------------------------------------------------------------- |
| **Provide a name for your new form** | You can enter a new name for the form that will be created.                                  |
| **Preferences**                      | You can tick this toggle to bring your "**Preferences**" settings to the newly created form. |
| **Form fields**                      | You can tick this toggle to bring your "**Fields**" settings to the newly created form.      |
| **Webhooks**                         | You can tick this toggle to bring your "**Webhooks**" settings to the newly created form.    |

<figure><img src="/files/09S6Bz6zhvJ4gjWeeay9" alt=""><figcaption></figcaption></figure>

3. When finished click **Duplicate**

<figure><img src="/files/h0KSH76f5vHDpjtXUI4u" alt=""><figcaption></figcaption></figure>

### Import JSON

1. You can import the JSON file created using the Shoppegram system into your page form by clicking on the **More** button

<figure><img src="/files/N7Hhmgj7WkQloAWroc0b" alt=""><figcaption></figcaption></figure>

2. Then, click on the **Import JSON** button and **select your file from your device**.

<figure><img src="/files/7a671KWFb9jZXk0ES0K2" alt=""><figcaption></figcaption></figure>

### Delete Form

1. You can delete the form from your page by clicking on the **More** button

<figure><img src="/files/N7Hhmgj7WkQloAWroc0b" alt=""><figcaption></figcaption></figure>

2. Then, select **Delete form**

<figure><img src="/files/HlDaP5rcogU44kgOAtIT" alt=""><figcaption></figcaption></figure>

## Form Settings

### Fields

1. You can see your form field settings in the section, click on the **Fields** button

<figure><img src="/files/U7X7wFEdJ9SZh290ffY0" alt=""><figcaption></figcaption></figure>

2. This page shows the fields on your form. By default, the system will automatically create 3 types of fields (Name, Email, and Phone) for you, and you cannot delete/remove the fields.

<figure><img src="/files/NcPDH1BHpJQWs1ryjyPR" alt=""><figcaption></figcaption></figure>

#### Add Field

1. You can add a new field by clicking on the **Add field** button

<figure><img src="/files/1mTZkKcysVGqkqwJJeRc" alt=""><figcaption></figcaption></figure>

2. Then, enter the necessary information for your field:

| Settings     | Description                                                                                                                                  |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **Label**    | The title of your field **will be displayed to the customer.**                                                                               |
| **Name**     | The ID for your field, **it will not be displayed to the customer.**                                                                         |
| **Type**     | You can select the type of input you want to use on your form. Among the options are **Input**, **Checkbox**, **Dropdown** and **Textarea**. |
| **Visible**  | You can tick this toggle to display this field on your form.                                                                                 |
| **Required** | You can tick this toggle to ensure the must fill in this field first to allow them to submit your form.                                      |

<figure><img src="/files/JMrmidcCTRYyIdFVlvHj" alt=""><figcaption></figcaption></figure>

3. When finished click **Save**

<figure><img src="/files/A2AlMJtsoVCCpIkX3FbG" alt=""><figcaption></figcaption></figure>

Now your Field has been successfully created.

<figure><img src="/files/4U8vw88Cab8vSGFUpEbQ" alt=""><figcaption></figcaption></figure>

#### Edit Field

1. You can edit/change existing field settings by clicking **the pencil icon**.

<figure><img src="/files/ZCY2rHqWQGG1RoBnj4LU" alt=""><figcaption></figcaption></figure>

2. Then, make the changes you want and click **Save**

<figure><img src="/files/PSsoYgd7DlozhfH24Uc6" alt=""><figcaption></figcaption></figure>

#### Delete Field(Yang dibenarkan sahaja)

1. You can delete the field you want, by clicking on **the trash can icon button** on the field. <mark style="color:red;">**It should be remembered that you can only delete fields that are allowed.**</mark>

<figure><img src="/files/qoDkKyPV9rvoSTcDxF2b" alt=""><figcaption></figcaption></figure>

### Webhooks

1. You can also set a special webhook to trigger from your form. To do that setting, you can click on the **Webhooks** button

<figure><img src="/files/nUkL2r8U8N90ZkDcxQf9" alt=""><figcaption></figcaption></figure>

2. Then, click on the **Add webhook** button

<figure><img src="/files/JvarmL3Z7trqxN3Ji8Ea" alt=""><figcaption></figcaption></figure>

3. Once you have **entered your webhook setting info**, you can click **Save**

<figure><img src="/files/YUHnDtuwfeAxv8h4DQLe" alt=""><figcaption></figcaption></figure>

4. Once finished, you can try to submit your form to trigger the webhook on the platform you are using.

<figure><img src="/files/PT63yb3Ocb8X5Tp6vMgB" alt=""><figcaption></figcaption></figure>

#### Delete Webhook

1. To delete/remove the webhook you have created, you can click on **the trash can icon button**

<figure><img src="/files/p2H5KOULE7sVDSDRxNuj" alt=""><figcaption></figcaption></figure>

### Products

You can add products to your form to allow customers to make purchases.

1. Click on the **Products** button.

<figure><img src="/files/0H1CT8ouM5N1GDW7ABeL" alt=""><figcaption></figcaption></figure>

2. Then, you can **select the product you want to enter by clicking on the Select product dropdown**.

<figure><img src="/files/JMj0ph2zh733LIQ1LBqx" alt=""><figcaption></figcaption></figure>

#### Delete product

To delete the product you have added to the form, you can click on the **trash can icon button**

<figure><img src="/files/jFDpC4C9JNCpScagA3sV" alt=""><figcaption></figcaption></figure>

### Preferences

1. You can see other settings you can make for your form submission process by clicking on the **Preferences** button

<figure><img src="/files/QnrMJ5Z6O8zJQDBimAsQ" alt=""><figcaption></figcaption></figure>

2. Then, you can do the setting you want:

| Settings                                  | Description                                                                                                                                                                                                                                         |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Facebook Pixel ID**                     | You can enter your FB pixel ID.                                                                                                                                                                                                                     |
| **Facebook Pixel Access Token**           | You can enter your FB pixel Access Token.                                                                                                                                                                                                           |
| **Facebook test\_event\_code**            | You can enter your FB test\_event\_code.                                                                                                                                                                                                            |
| **Enable pre-iOS 14 tracking bypass**     | You can tick this toggle to bypass pre-iOS 14 tracking.                                                                                                                                                                                             |
| **Tiktok Pixel ID**                       | You can enter your Tiktok pixel ID.                                                                                                                                                                                                                 |
| **Google Analytics ID**                   | You can enter your Google Analytics ID.                                                                                                                                                                                                             |
| **Enable Google Ads Conversion Tracking** | You can tick this toggle to set up Google Ads Conversion Tracking.                                                                                                                                                                                  |
| **Google Ads ID**                         | You can enter your Google Ads ID. You need to tick the "Enable Google Ads Conversion Tracking" toggle to use this function.                                                                                                                         |
| **Initiate checkout**                     | You can enter your Initiate checkout label. You need to tick the "Enable Google Ads Conversion Tracking" toggle to use this function.                                                                                                               |
| **Purchase label**                        | You can enter your Purchase label. You need to tick the "Enable Google Ads Conversion Tracking" toggle to use this function.                                                                                                                        |
| **Submit lead label**                     | You can enter your Submit lead label. You need to tick the "Enable Google Ads Conversion Tracking" toggle to use this function.                                                                                                                     |
| **Google Tag Manager ID**                 | You can enter your Google Tag Manager ID.                                                                                                                                                                                                           |
| **Submit button text**                    | You can change the text of your form's submit button to another text                                                                                                                                                                                |
| **Footer text**                           | You can display the text below your form                                                                                                                                                                                                            |
| **Action after form submission**          | <p>You can set the page you want to bring when the customer submits your form.</p><ol><li>Go to default thank you page = Take the customer to the thank you page</li><li>Redirect to URL address = Take the customer to the page you want</li></ol> |
| **Thank-You Page > Title**                | You can change the text title on the thank you page of your form (The page after the customer submits the form)                                                                                                                                     |
| **Thank-You Page > Body**                 | You can change the text body on the thank you page of your form (The page after the customer submits the form)                                                                                                                                      |
| **Form theme > Form color**               | You can change the color of the divider for the form.                                                                                                                                                                                               |
| **Form theme > Submit button color**      | You can change the color of the CTA button for the form                                                                                                                                                                                             |
| **Form theme > Submit button text color** | You can change the color of the text on the CTA button for the form.                                                                                                                                                                                |

<figure><img src="/files/fUOYO7l5ypVgmNmKsPjL" alt=""><figcaption></figcaption></figure>

3. Once you're done making your settings, make sure you click on the **Save** button

<figure><img src="/files/9GAlLq2TxCUi54JEPUQx" alt=""><figcaption></figcaption></figure>

## Management of Leads

For you to see all incoming lead data, you need to go to the Leads page. For more info, you can click on the tab button below:

{% content-ref url="/pages/a4SiUpZZ2CGxo5rVHU6P" %}
[Leads](/en/forms/leads.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shoppego.com/en/forms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.