In this tutorial you will learn how to build AJAX email form using the Spry Data Utilities Toolkit. As a result you will be able to turn your traditional email form into an AJAX-based one or build one from scratch.

Although for the purpose of this tutorial we will use PHP, the same approach can be adapted for any other server model.

Get the extension

Sending progress bar

Progress bar animation will indicate to the user that the email is currently being sent to the server.
Initially it needs to be hidden.

Add a div tag with the id attribute set to "sending" and style display property set to "none" right below the email form:

<div id="sending" align="center" style="display:none"></div>

This will be the container for the progress bar image.
Insert progress bar image (use your own or the one included with Spry Data Utilities Toolkit) inside this container.

Adding Spry Data Server Action

Now all we have to do is add Spry Data Action Object to execute the server code via AJAX.

Click Spry Data Action icon located on the Spry tab of the insert panel.

In the dialog select your email form from the Form dropdown and "sending" div (our progress bar) from Display progress indicator  dropdown. Also check "Display server message" checkbox to make sure user gets the success or error message once the operation is complete.

Click OK to insert the object.

Conclusion

That's all! You can upload the files to your server and test your email form.