Overview

Capture website leads instantly without requiring a traditional form. Simply add our JavaScript snippet to your header tag to begin collecting visitor responses. See below for more instructions

HTML forms are used by customers like Rollstack & Default (thats us!).

Implementation

Step 1: Connect a HTML Form

Connect a HTML form

Go to Navigation > Forms > Webforms > Connect your webform

Select HTML as the form type.

Step 2: Add the Snippet to your Site

Add the snippet to your site

Add the following snippet to your website:

<script>
  (function(w, d) {
    w.__default__ = {team_id: xxx, form_id: xxxxx};
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://import-cdn.default.com/v2/index.js';
    d.head.appendChild(s);
  })(window, document);
</script>

Step 3: Identify your Form

Identify your form

Determine how you plan to identify the HTML form on your website. Choose from one of the options below (reference the examples as needed).

Adding the unique identifier to your <form> tag.
Adding the code to your form wrapper.
Place a <div> around your form.

Once you pick a method, click “I have my form identification” and proceed to test your form connection.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Form</title>
    <script>
        (function(w, d) {
            w.__default__ = {team_id: xxx, form_id: xxxxxx};
            var s = d.createElement('script');
            s.async = true;
            s.src = 'https://import-cdn.default.com/v2/index.js';
            d.head.appendChild(s);
        })(window, document);
    </script>
</head>
<body>
    <form data-default-form-id="426017">
        <div>
            <label for="firstName">First Name</label>
            <input id="firstName" type="text" required>
        </div>
        
        <div>
            <label for="lastName">Last Name</label>
            <input id="lastName" type="text" required>
        </div>
        
        <div>
            <label for="email">Email</label>
            <input id="email" type="email" required>
        </div>
        
        <div>
            <label for="company">Company</label>
            <input id="company" type="text" required>
        </div>
        
        <div>
            <label for="reps">Number of Reps</label>
            <input id="reps" type="number" min="1" required>
        </div>
        
        <button type="submit">Submit</button>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Form</title>
    <script>
        (function(w, d) {
            w.__default__ = {team_id: xxx, form_id: xxxxxx};
            var s = d.createElement('script');
            s.async = true;
            s.src = 'https://import-cdn.default.com/v2/index.js';
            d.head.appendChild(s);
        })(window, document);
    </script>
</head>
<body>
    <!-- Changed from form to div wrapper while maintaining the data attribute -->
    <div data-default-form-id="426017">
        <div>
            <label for="firstName">First Name</label>
            <input id="firstName" type="text" required>
        </div>
        
        <div>
            <label for="lastName">Last Name</label>
            <input id="lastName" type="text" required>
        </div>
        
        <div>
            <label for="email">Email</label>
            <input id="email" type="email" required>
        </div>
        
        <div>
            <label for="company">Company</label>
            <input id="company" type="text" required>
        </div>
        
        <div>
            <label for="reps">Number of Reps</label>
            <input id="reps" type="number" min="1" required>
        </div>
        
        <!-- Changed from type="submit" to a regular button since we're no longer in a form -->
        <button>Submit</button>
    </div>
</body>
</html>

Note: The examples above are only to be used as guidance.

Step 4: Test Connection

Test connection

Test your setup by submitting a sample response through your web form. After submission, map all required fields to complete the configuration.

Step 5: Map Form Fields

Map form fields

Map the email field from your form submission when prompted. This is a required field for all forms.

Other fields (e.g. Company Name, First Name, Last Name) can be mapped to Default lead attributes.

Note: Not all fields will be mapped to a Default field attribute. This is expected.

HTML Form Example

Here’s an example of a HTML form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Request Form</title>
    <!-- Default Integration Script -->
    <script>
        (function(w, d) {
            w.__default__ = {team_id: xxx, form_id: xxxxxx};
            var s = d.createElement('script');
            s.async = true;
            s.src = 'https://import-cdn.default.com/v2/index.js';
            d.head.appendChild(s);
        })(window, document);
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 40px auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Request a Demo</h1>
    <div id="debug-info" style="background: #f0f0f0; padding: 10px; margin-bottom: 20px;">
        <h3>Debug Information:</h3>
        <p>Default SDK Status: <span id="sdk-status">Checking...</span></p>
        <p>Form ID: <span id="form-id">Checking...</span></p>
        <p>Team ID: <span id="team-id">Checking...</span></p>
    </div>
    <form data-default-form-id="467153" onsubmit="handleSubmit(event)">
        <div class="form-group">
            <label for="firstName">First Name*</label>
            <input type="text" id="firstName" name="firstName" required>
        </div>
        <div class="form-group">
            <label for="lastName">Last Name*</label>
            <input type="text" id="lastName" name="lastName" required>
        </div>
        <div class="form-group">
            <label for="email">Work Email*</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="company">Company Name*</label>
            <input type="text" id="company" name="company" required>
        </div>
        <button type="submit">Submit</button>
    </form>

    <script>
        // Check if Default SDK is loaded
        window.addEventListener('load', function() {
            const sdkStatus = document.getElementById('sdk-status');
            const formIdElement = document.getElementById('form-id');
            const teamIdElement = document.getElementById('team-id');

            // Check for Default SDK
            if (window.__default__) {
                sdkStatus.textContent = 'Detected ✓';
                formIdElement.textContent = window.__default__.form_id;
                teamIdElement.textContent = window.__default__.team_id;
            } else {
                sdkStatus.textContent = 'Not Detected ✗';
                formIdElement.textContent = 'N/A';
                teamIdElement.textContent = 'N/A';
            }
        });

        function handleSubmit(event) {
            event.preventDefault();
            const formData = new FormData(event.target);
            const payload = Object.fromEntries(formData.entries());
            console.log('Form submitted with payload:', payload);
        }
    </script>
</body>
</html>

About Us

Workspace Onboarding

Forms

Routing

Integrations

Forms: HTML Forms

Overview

Implementation

Step 1: Connect a HTML Form

Step 2: Add the Snippet to your Site

Step 3: Identify your Form

Step 4: Test Connection

Step 5: Map Form Fields

HTML Form Example

FAQs

About Us

Workspace Onboarding

Forms

Routing

Integrations

​Overview

​Implementation

​Step 1: Connect a HTML Form

​Step 2: Add the Snippet to your Site

​Step 3: Identify your Form

​Step 4: Test Connection

​Step 5: Map Form Fields

​HTML Form Example

​FAQs

​

Overview

Implementation

Step 1: Connect a HTML Form

Step 2: Add the Snippet to your Site

Step 3: Identify your Form

Step 4: Test Connection

Step 5: Map Form Fields

HTML Form Example

FAQs