Overview


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


The usual procedure for form processing relies on the user hitting ‘submit’, which refreshes the page and the screen reloads in order to send the information to Ometria.


Ajax allows for more advanced validation options, such as sending information to Ometria 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.



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="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>


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:


<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>


Your form is now Ajax ready and you are free to proceed with 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, you can enter your own:


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 2 items; the form key and error message.