Skip to main content
Appz’s serverless form handling allows you to manage forms effortlessly without the need for extra API calls or additional JavaScript. Once enabled, the built-in form detection feature empowers our build system to automatically parse your HTML at deployment time, eliminating the necessity for you to make API calls or embed extra JavaScript on your site. To begin, activate automatic form detection and then incorporate an appz attribute to your HTML form.
Curious about how Appz handles form submissions?Explore our form submissions documentation to discover more about the form submissions UI, API endpoints, and additional details.

​
HTML Forms

Integrate an HTML form into your site using either a data-appz="true" or an appz attribute within the <form> tag. Deploy your site with this form, and you will start receiving submissions through your Appz site administration panel. The name attribute of your form determines its identification in the Appz UI. If your site hosts multiple forms, ensure each one has a unique name attribute. Below is an example of how to utilize either the data-appz="true" attribute or the appz attribute in your form: 
<form name="contact" method="POST" data-appz="true">
  <p>
    <label>Your Name: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Your Role: <select name="role[]" multiple>
      <option value="leader">Leader</option>
      <option value="follower">Follower</option>
    </select></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>
When Appz processes the static HTML of your form, the build system automatically removes the data-appz="true" or appz attribute from the <form> tag and injects a hidden input named form-name. In the HTML that is deployed, the data-appz="true" or appz attribute will be removed, and the hidden form-name input will have a value that corresponds to the name attribute of the <form> like this: 
<input type="hidden" name="form-name" value="contact">

​
Success Messages

When visitors successfully submit a form on your site, they are typically redirected to a default success page. This page often displays a basic, generically styled success message along with a link that directs users back to the form page.

​
Custom Success Page

To enhance the user experience, you can create a custom success page to replace the default one. This involves modifying the <form> tag to include an action attribute. This attribute should contain the path to your custom success page, which must be relative to the site root and prefixed with a /. Here is an example: 
<form
  name="contact"
  action="/pages/success"
  method="POST"
  data-appz="true"
></form>
By specifying the action attribute in your form, you ensure that upon successful form submission, users are redirected to your custom-designed success page, providing a more personalized and branded experience.