AJAX Form ajax-form.scss ajax-form.js Use the AJAXForm module to setup basic AJAX form behavior, such as: Showing loading, success, and error states Constructing the URL Wrangling form data into an API-friendly format Rendering results Examples Basic Send a response! Submit Please Wait... Error! Success! <div class="ajax-form js-ajax-form" data-ajax-form-type="basic"> <form action="https://reqres.in/api/users?delay=1" method="GET" class="ajax-form__form form js-ajax-form__form"> <p>Send a response!</p> <button class="button" type="submit">Submit</button> </form> <div class="ajax-form__loading js-ajax-form__loading">Please Wait...</div> <div class="ajax-form__error js-ajax-form__error">Error!</div> <div class="ajax-form__success js-ajax-form__success">Success!</div> </div> Copy Show Results Note the use of the Validation module to perform front-end form validation. Get User By ID Submit Please Wait... Sorry, there are no users with that ID. Try Another ID Try Another ID <div class="ajax-form js-ajax-form" data-ajax-form-type="get-user"> <form action="https://reqres.in/api/users" method="GET" class="form ajax-form__form form js-ajax-form__form js-validate"> <p>Get User By ID</p> <div class="form__field"> <input type="text" name="user_id" placeholder="User ID" required /> </div> <button class="button" type="submit">Submit</button> </form> <div class="ajax-form__loading js-ajax-form__loading">Please Wait...</div> <div class="ajax-form__error js-ajax-form__error"> <div>Sorry, there are no users with that ID.</div> <button class="button js-ajax-form__reset">Try Another ID</button> </div> <div class="ajax-form__success js-ajax-form__success"> <div class="js-ajax-form__results"></div> <button class="button js-ajax-form__reset">Try Another ID</button> </div> </div> Copy