Setting up Ajax forms – Ometria Help Centre

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.

Note: Ometria does not support radio buttons (input type="radio") in AJAX forms.

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

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 might look like:

<form action="https://api.ometria.com/forms/signup" method="post">
        <input type="hidden" name="__form_id" value="YOUR FORM ID" />
        <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 HASH" />
        <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>

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="YOUR FORM ID" />
        <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 HASH" />
        <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" />

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.

Using Ometria forms with fetch

To use Ometria forms with the fetch method, you must use the Ajax Ometria forms endpoint address: https://api.ometria.com/forms/signup/ajax

Here is an example form coded in fetch - make sure to replace the form_id and account_id as detailed above:

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

<form id="ometria_form_landing_page_01">
        <input type="hidden" name="__form_id" value="YOUR FORM ID" />
        <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 HASH" />
        <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" />

<script>

var selector = "#ometria_form_landing_page_01"

var form = document.querySelectorAll(selector)[0];

form.addEventListener('submit', function(event) {
event.preventDefault();

  var formElements = event.target.elements;

        var urlEncodedDataPairs = Object.keys(formElements)

                        .map(function(key) {
                            return encodeURIComponent(formElements[key].name) + '=' + encodeURIComponent(formElements[key].value)
                        });

        var formBody = []

        formBody = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

        fetch('https://api.ometria.com/forms/signup/ajax', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
          },
          body: formBody
        }).then(function() {
          //do anything
          alert("The form has been submitted");
        })

})

</script>

Comments

1 comment

Ivan Melnyk

09 March 2023 16:56
Hello, is this the same as using your API?
POST https://api.ometria.com/v2/push

Is it just a different way of integration?
What if we, for example, implemented our own form, and when customer is submitting our subscription form we send the data to Ometria using the API (POST https://api.ometria.com/v2/push), will it do the same on Ometria end as submitting your Ajax form?

Is it possible to configure Double Opt In on Ometria end for Ajax form? Can it also work using my own form but sending the data to Ometria via API (POST https://api.ometria.com/v2/push)?

Thanks, Inan.
0

Please sign in to leave a comment.

Before you begin

Steps

Testing

Validation (optional)

Using Ometria forms with fetch

Related articles