On this page:


Overview

AJAX provides a more seamless experience for users completing forms on your website.

The usual procedure for completing forms relies on the user completing the entire form, then clicking submit, which refreshes the page and reloads the screen in order to send the information to Ometria, where the information the contact entered is validated.

AJAX allows for progressive validation - i.e. sending the information to Ometria as soon as each field is completed, without the page needing to refresh:

To add AJAX to your existing HTML forms, there are a few steps for your development team to complete. See below.

Before you begin

Ensure that the following script is on the the page your form is on:

<script src="//cdn.ometria.com/tags/<ometria_account_id>.js"></script>

Replace <ometria_account_id> with your Ometria ID (provided at onboarding).

You only need this script to occur once, and in most cases it will already be present. 

Without it, your AJAX forms will not work correctly.


Steps

Here’s an example of what your current Ometria form may look like: 

<form action="https://api.ometria.com/forms/signup" method="post">

        <input type="hidden" name="__form_id" value="e82f6e60840a20838531c4c0dc7fa" />

        <input type="hidden" name="email" value="" autocomplete="off" />

        <div style="display:none !important">

                <input name="__email" type="email" value="" autocomplete="off" />

        </div>

        <input name="@account" type="hidden" value="YOUR ACCOUNT NAME" />

        <input name="@return_url" type="hidden" value="" />

        <input name="@subscription_status" type="hidden" value="SUBSCRIBED" />





        <!-- Form elements go here: Style as you wish -->





        <table>

                <tr>

                        <th>Email</th>

                        <td>

                                <input name="ue" type="text" value="" />

                        </td>

                </tr>

                <tr>

                        <th>Firstname</th>

                        <td>

                                <input name="firstname" type="text" value="" />

                        </td>

                </tr>

                <tr>

                        <th>Gender</th>

                        <td>

                                <select name="gender">

                                        <option selected="selected" disabled="disabled" value="">Please Select</option>

                                        <option value="m">Male</option>

                                </select>

                        </td>

                </tr>

        </table>

        <input type="submit" value="Submit form" style="padding: 5px 20px;" name="submit" />



        <!-- End of form elements -->



</form>


1. Add a unique ID to the form element.

Example - before:

<form action="https://api.ometria.com/forms/signup" method="post”>

Example - after:

<form id=“ometria_form_xxx” action="https://api.ometria.com/forms/signup" method="post”>

Note: The value of the ID attribute must be completely unique on the page.


2. Add the following JavaScript code directly after your form, replacing <ID> with the form ID used in the last step:

<script>

    ometria.ajaxFormSubmit("#<ID>");

</script>

Note: Please keep the extra # before the <ID>


Once complete, your form should look something like this:

<script src="//cdn.ometria.com/tags/<ometria_account_id>.js"></script>



<form id=“ometria_form_landing_page_01” action="https://api.ometria.com/forms/signup" method="post">

        <input type="hidden" name="__form_id" value="e82f6e60840a20838531c4c0dc7fa" />

        <input type="hidden" name="email" value="" autocomplete="off" />

        <div style="display:none !important">

                <input name="__email" type="email" value="" autocomplete="off" />

        </div>

        <input name="@account" type="hidden" value="develor_testing" />

        <input name="@return_url" type="hidden" value="" />

        <input name="@subscription_status" type="hidden" value="SUBSCRIBED" />



        <!-- Form elements go here: Style as you wish -->



        <table>

                <tr>

                        <th>Email</th>

                        <td>

                                <input name="ue" type="text" value="" />

                        </td>

                </tr>

                <tr>

                        <th>Firstname</th>

                        <td>

                                <input name="firstname" type="text" value="" />

                        </td>

                </tr>

                <tr>

                        <th>Gender</th>

                        <td>

                                <select name="gender">

                                        <option selected="selected" disabled="disabled" value="">Please Select</option>

                                        <option value="m">Male</option>

                                </select>

                        </td>

                </tr>

        </table>

        <input type="submit" value="Submit form" style="padding: 5px 20px;" name="submit" />





        <!-- End of form elements -->



</form>

<script>

ometria.ajaxFormSubmit("#ometria_form_landing_page_01");

</script>

The setup of the form is now complete and you are free to proceed with testing, as well as any additional styling and formatting.


Testing

To test that the AJAX form is working, submit the form and check to see whether the page redirects.

If the form has been set up correctly, you should not be redirected anywhere and you should see a POST to https://api.ometria.com/forms/signup/ajax in your network debugging tool.

Validation (optional)

The method described above won’t show an error if the email address is missing or invalid.

You can supply a callback to the ajaxFormSubmit method:

<script>
    ometria.ajaxFormSubmit("#<ID>”, my_callback);
</script>

Where my_callback is a function, Ometria does not handle the responses, and you can enter your own.


Note: The my_callback function is something developers will need to write.


function my_callback(response){
    // do some magic
}

‘response’ is a JSON object, formatted like this if the response is OK:

{
  "ok":true,
  “errors":[]
}

...and if the response has failed, you should see some responses like this, detailing any observed errors:

{
  "ok":false,
  “errors”:[["email”:"Email address invalid"]]
}

Note: Each item of the array ‘errors’ is a sub-array with two items; the form key and error message.