# Configure pre loader

## What is a pre-loader page?

A pre-loader page allows you to display **custom information to the users just before they open a form**. This is generally used to display welcome messages or a terms & conditions screen. This screen will always have a button to digitally prompt the user to take the required action.

You can either **create your own custom pre-loader screen** or **provide a URL of an external HTML** that needs to be displayed prior to accessing the form.

### How to create your own preloader page?

To create a custom pre-loader page,

1\.    In the **Settings** screen, from the left pane, select **Configure pre loader**.

The **Apply pre-loader on this form** screen is displayed in the right pane.

![](https://4216568905-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mc6E3BSGr4i8kVdH38k%2Fuploads%2Flf7E88VaSN4d4lAFjRtC%2Fimage.png?alt=media\&token=0323deda-01d0-432a-8b8b-758bec4150f4)

2\.    In the right pane, select **Create your own preloader page**.

The settings for configuring your own pre-loader page are displayed.

![](https://4216568905-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mc6E3BSGr4i8kVdH38k%2Fuploads%2FPLEMeksWsojaMLNED22v%2Fimage.png?alt=media\&token=39856677-2600-4ece-b024-73bbe747d2d1)

3\.    In the text area, enter the text that you want to be displayed in the pre-loader page.

{% hint style="info" %}
Use the rich text editor for formatting the text in the text area.
{% endhint %}

4\.    Enter the following details:

| Field                                               | Description                                                                                                                                   |
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| Primary button name\*                               | <p>Enter a name for the button that will prompt the user to take an action</p><p><em><strong>Note</strong>: This field is mandatory.</em></p> |
| Secondary button name                               | If you want to give a second option for the user to take action, enter the name of the second button                                          |
| Show this HTML to user every time before submission | Select this if you want to display this pre-loader page every time a user opens the form                                                      |
| Show this HTML to user one time before submission   | Select this if you want to display the pre-loader page only when the user opens the form for the first time                                   |

5\.    At the bottom right of the screen, click **Create Form** or **Update Form**.

![](https://4216568905-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mc6E3BSGr4i8kVdH38k%2Fuploads%2FxJnuYc3JpvaYNOkQMYpO%2Fimage.png?alt=media\&token=0365ae2f-7e60-459a-a085-3ff5dbd3a2c5)

Based on the settings above, your custom pre-loader page is created and will be displayed when they open the form for the first time.

![](https://4216568905-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mc6E3BSGr4i8kVdH38k%2Fuploads%2FoCosLBEjMzeluHm4tk50%2Fimage.png?alt=media\&token=914db1db-7857-4c45-a22b-89c4e270c85b)

As you can see, the user will be directed to the form only after they click on one of the buttons of the pre-loader page.

## How to use an existing HTML as a page-loader?

To use an existing HTML as a pre-loader page,

1\.    In the **Settings** screen, from the left pane, select **Configure pre loader**.

The **Apply pre-loader on this form** screen is displayed in the right pane.

2\.    In the right pane, select **provide any other HTML URL**.

![](https://4216568905-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mc6E3BSGr4i8kVdH38k%2Fuploads%2FjDDcM9UDsWVbga8loVwS%2Fimage.png?alt=media\&token=b1ec8787-e1f4-4b44-bc51-b87e66a9d804)

The settings for configuring an external HTML as a pre-loader page are displayed.

![](https://4216568905-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mc6E3BSGr4i8kVdH38k%2Fuploads%2FRR7mJC4qq6r6QsOaHPkh%2Fimage.png?alt=media\&token=0abc918a-a7dc-4d92-a0b8-38534f236696)

3\.    Enter the following details:

| Field                                               | Description                                                                                                                                   |
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| Provide any other HTML URL                          | Enter the URL of the external HTML page that you want to display as a pre-loader page                                                         |
| Primary button name\*                               | <p>Enter a name for the button that will prompt the user to take an action</p><p><em><strong>Note</strong>: This field is mandatory.</em></p> |
| Secondary button name                               | If you want to give a second option for the user to take action, enter the name of the second button                                          |
| Show this HTML to user every time before submission | Select this if you want to display this pre-loader page every time a user opens the form                                                      |
| Show this HTML to user one time before submission   | Select this if you want to display the pre-loader page only when the user opens the form for the first time                                   |

4\.    At the bottom right of the screen, click **Create Form** or **Update Form**.

![](https://4216568905-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mc6E3BSGr4i8kVdH38k%2Fuploads%2FEAkDFS5qcZhBgew5IfCn%2Fimage.png?alt=media\&token=f6264bb2-e551-4aa3-8123-8b6691a1bacb)

Based on the settings above, the content of the external HTML page will be displayed every time the user opens the form.

![](https://4216568905-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mc6E3BSGr4i8kVdH38k%2Fuploads%2FFFtOv4pDEzuCbQkVWgtg%2Fimage.png?alt=media\&token=e2423e41-70a6-4c66-9a4f-4a712cad24d3)