Custom HTML Form

This documentation outlines the process of integrating Distro's scheduling functionality with custom HTML forms on your web pages.

How to Map Your Custom HTML Form

1

Form Identification

Locate and note the unique identifier associated with your custom HTML form.

Here's how to find a form's unique ID:

1. Open your web browser (Chrome, Firefox, etc.)

2. Right-click on the form or page area you want to inspect

   • In this case, you'd right-click on the Screendesk contact form

3. Click "Inspect" or "Inspect Element" from the menu that appears

   • This will open the Developer Tools panel (which is what we see in the right side of your image)

4. In the Developer Tools panel, look for HTML code that includes the word "form"

   • In your image, we can see it highlighted in blue: <form novalidate class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8" id="screendesk-form">

5. The ID will be at the end of the form tag, starting with id="

   • In this case, the form's unique ID is "screendesk-form"

2

Router Configuration

Configure a Form Router within Distro, incorporating your form's unique identifier into the form mapping settings.

3

Script Acquisition

Obtain the installation script provided during the final phase of router configuration.

Installation Script Example:

<script type="text/javascript" src="https://app.distro.so/inbound.js"></script>
<script type="text/javascript">
window.distro = new Distro({ routerId: '36' })
distro.schedule('#custom_form')
</script>

4

Script Implementation

Insert the installation script immediately following your custom HTML form or before the closing body tag (</body>) of your landing page.

Mapping Your Custom HTML Form Fields

1

When creating your form in Distro you need to map the relevant form fields to your crm fields

2

Locate the name of the custom form fields

Here's a step-by-step guide:

1. Open your web browser (Chrome, Firefox, etc.)

2. Right-click on the specific input field you want to inspect

   • In this case, you'd right-click on the name input box in the form

3. Click "Inspect" or "Inspect Element" from the right-click menu

   • This opens the Developer Tools panel (shown on the right side of your image)

4. In the Developer Tools, look for the <input> tag that's highlighted

   • In your image, we can see the highlighted code shows an input field with name="name"

5. Look for the name="..." attribute within the input tag

   • In this example, the input field's name is simply "name"

3

Enter the name in the field, in this example it is name