Mythradon Lead Capture Sample Form¶

Displayed below is a functional demonstration of a Web-to-Lead Capture form. This form is intentionally presented in its simplest HTML form, devoid of almost any CSS styling. The intent behind this HTML code is to offer a raw, unadorned sample that can be easily customised and styled to suit your specific needs.

The form utilises the JQuery JavaScript library to facilitate an AJAX (Asynchronous JavaScript and XML) submission. In this example the JQuery is sourced from the Google Content Delivery Network (CDN). If your website already incorporates JQuery, you may consider removing it from this form's code.

The resulting form will appear as follows:

The provided sample form will store a lead from your website directly into your Mythradon system. To achieve this, please complete the following steps:

Step 1 – Create a Lead Capture Entry Point¶

Before you can use a web form to collect leads, you'll need to create a Lead Capture API Entry Point in Mythradon. This Entry Point acts as the connection between your website and Mythradon, allowing form submissions to be securely captured and stored as new Lead records.

To get started, follow the setup instructions in Lead Capture API Entry Point.

Note

The default sample form expects the following payload fields: First Name, Last Name, Email, and Phone.

Make sure your Entry Point configuration includes these fields to ensure compatibility with the sample form.

Step 2 - Copy Lead Capture Entry Point URL¶

Once you save the Lead Capture Entry Point, Mythradon will display the HTTP request details on the Lead Capture Entry Point right side panel as shown:

Mythradon Web-to-lead Entry Point URL - Light

Mythradon Web-to-lead Entry Point URL - Dark

The URL value will need to be used in replacement of the action attribute used in the html code of step 3.

Step 3 - Create HTML Web Page¶

Using your text editor of choice, copy and paste the following html code into a new web page.

If additional fields are required, ensure to add them to the Payload Fields of the Lead Capture Entry Point.

Replace the text action="**YOUR LEAD CAPTURE URL**" with the URL value from the previous step and save the file to your web server.

This form will submit the values to your Mythradon system via a HTTP POST.

Note

Ensure to include html start and end tags.

Sample Web-to-Lead Form

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
    label{
        display:inline-block;
        min-width:150px;
    }
</style>
<div>
    <form id="contact-form" method="post"
        action="**YOUR LEAD CAPTURE URL**">
        <div>
            <div id="contact-form-result">
            </div>

            <div>
                <label for="firstName">First Name</label>
                <input id="firstName" type="text" name="firstName" required="required" maxlength="50">
            </div>

            <div>
                <label for="lastName">Last Name</label>
                <input id="lastName" type="text" name="lastName" required="required" maxlength="50">
            </div>

            <div>
                <label for="emailAddress">Email</label>
                <input id="emailAddress" type="email" name="emailAddress" required="required" maxlength="100">
            </div>

            <div>
                <label for="phoneNumber">Phone</label>
                <input id="phoneNumber" type="text" name="phoneNumber">
            </div>

            <div>
                <label for="description">Message</label>
                <textarea id="description" rows="4" name="description" required="required" maxlength="5000"></textarea>
            </div>
            <div>
                <input type="submit" id="submit-contact-form">
            </div>
        </div>
    </form>

    <script>
        $("#contact-form").submit(function (e) {

            e.preventDefault(); // avoid to execute the actual submit of the form.

            var form = $(this);
            var actionUrl = form.attr('action');
            $("#submit-contact-form").attr("disabled", true);

            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serialises the form's elements.
                success: function (data) {
                    debugger;
                    $('#contact-form').trigger("reset");
                    $('#contact-form-result').html('Thank you, we will be in contact.');
                    $("#submit-contact-form").attr("disabled", false);
                },
                error: function (xhr) {
                    $('#contact-form-result').html('An error has occured please try again later');
                    $("#submit-contact-form").attr("disabled", false);
                },
            });

        });

    </script>
</div>

Step 4 - Test the Web-to-Lead Form¶

Open the newly created web page in your browser. Complete the details in the form and click the Submit button.

When the record is successfully saved, a success message will appear: 'Thank you, we will get in touch.' The form fields will be reset, making it ready for another submission.

To check that the lead was created, select Leads from the main menu and confirm that the record you submitted on the form has been created.