Setup

Youappz Formz is the perfect solution for static sites that need a form backend, and works anywhere HTML forms can be rendered.

Basic Setup

To start using Formz to power your web forms, you'll need the following:

A Website Hosted on Youappz Sitez
An HTML Form

Step 1 - Creating a simple HTML Form

In order to use Formz, you’re going to need an HTML form . If you don't already have one, you can start with the following example:

<form action="#" method="POST"> <input type="text" name="name" /> <input type="email" name="email" /> <input type="text" name="message" /> <button type="submit">Send</button>
</form>

The action="#" determines where submitted data will be posted for processing.

Step 2 - Change the form action to Formz Endpoint

<form action="/__formz" method="POST"> <input type="text" name="name" /> <input type="email" name="email" /> <input type="text" name="message" /> <button type="submit">Send</button>
</form>

And that's it. You’re all set to receive submissions.

Every form input field you added to your form must have the name attribute with a unique name.
If you want to post your data using JavaScript, you should add a content type to your form tag. Supported content types are "Content-Type: json", "Content-Type: formdata", and "Content-Type: x-www-form-urlencoded"
If you want to get response message as JSON, then you must set the HTTP Accept Header to application/json .

Advanced features

Form inputs can have specially named name-attributes, which alter functionality

Email "Reply To" address

You can automatically set up the "Reply To" address of emails that you receive to come from your form. This will allow you to easily reply to website visitors who fill out your form.

To do this, you will add a special input field with the name attribute set to email. Here is an example:

<input type="text" name="email" placeholder="Your email" />

Now when visitors fill out your form, the value of this input will be used for the email's "Reply To" field. This way you can directly "Reply" to the email to respond to the person who originally submitted the form.

Email subject line

To customize the submission email subject line, add an input with the name subject. This will let you reply to submissions without having to edit the subject line each time. Here's an example:

<input name="subject" value="Need help with order" />

Honeypot spam filtering

Sometimes you can fool automated form scrapers by adding a hidden "honeypot" input with the name _gotcha. This is an input field that normal visitors won't fill out because it's hidden with CSS. However an algorithm scraping forms might not know to ignore the field, and might fill it with spammy content.

When our servers receive a submission, if the _gotcha field is filled in, we take that as a sign that a bot has submitted the form, and we silently ignore the submission.

All forms come with reCAPTCHA, which uses machine learning techniques to distinguish between humans and bots, so for most forms this isn't necessary.

Here's an example of how to use the _gotcha field. Note that we use an inline style here, but it's best to hide the input with a CSS class.

<input type="text" name="_gotcha" style="display:none" />

<input type="hidden" name="_gotcha" />

"Thank You" redirect

By default, after submitting a form the user is redirected to the Formz "Thank You" page. You can redirect the user to an alternative page on your own website.

To do this, you will add a special input field with the name attribute set to _redirect. Here is an example:

<input type="hidden" name="_redirect" value="/custom-thank-you/" />

Sending Submissions with AJAX

Collect submission data easily through AJAX requests while taking full control of the front-end experience.

Axios is a promise-based HTTP client for the browser and node.js, it's lightweight and a common library for making HTTP requests.

You can also use Axios to submit your forms

Simple Axios Setup

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Getform | AJAX with Axios</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <script> axios .post('https://my-website/__formz', { message: 'Hello, World', }) .then((response) => console.log(response)) .catch((error) => console.log(error)) </script> </body>
</html>