Creating a contact form with Aamu.app

There are (at least) three ways to create a contact form with Aamu.app. Let’s look at the first one in detail.

Ingredients

The ingredients for this contact form are:

• HTML code for the form itself, which you can grab from https://github.com/AamuApp/contact-form

• Aamu.app database, with forms enabled

What you would do at your website is that you would add the HTML code, with CSS, to the appropriate location of your site, and tie the form to Aamu.app database with the Aamu.app database’s endpoint url and the Aamu.app database’s API key. Let’s see how to do all this.

Creating the Aamu.app database

We have a ready-made template of the database that you can use for storing the contact form’s data — it’s under the “arrow button” just next to the “plus button” that you would normally create an empty database with. So click the arrow button and select the Contact Form:

Setting up the database to accept form submissions

In the database settings, you should first enable the forms API:

You should select the table, where the form submissions will go to:

Then copy the Forms endpoint, and put it into the contact form’s HTML code, into <form action=”ENDPOINT HERE”>.

Creating the Form

To create the form, let’s start by grabbing the example HTML code from GitHub. The important part of it is the <form>...</form>:

<form id="contactForm" action="ENDPOINT_HERE" method="POST" enctype="multipart/form-data" >
	<input type="hidden" name="redirect-error" value="https://api.aamu.app/api/v1/forms/error">
	<input type="hidden" name="redirect-success" value="https://api.aamu.app/api/v1/forms/thank-you">
	<div>
		<input placeholder="Name" type="text" name="name" id="form_name" required autofocus>
	</div>
	<div>
		<input placeholder="Email" type="text" name="email" id="form_email" required>
	</div>
	<div>
		<textarea placeholder="Message" name="message" id="form_message" required></textarea>
	</div>
	<button id="submit" type="submit">Send</button>
</form>

The way this form works, is first by the action="ENDPOINT_HERE" which sends the form the API endpoint.

Note the two hidden fields: redirect-error and redirect-success. You can set the redirect URLs with these. When sending the form with JavaScript, you won’t need these, but they are good to be there, since JavaScript isn’t always enabled by the user.

Form input field bindings

Another important point is how the form input fields’ names are matched to the database fields. The way the input field names are created is pretty straightforward — they are basically lowercase words with spaces turned into underscores. The correct input field names can also be seen in the Database settings / Forms. You can copy the <form>‘s HTML code there and use it in your applications.

The form which you can get from GitHub has some other niceties — for example it is submitted by JavaScript on the fly, without causing a round-trip at the server (Aamu.app’s server).

For example, in our contact form database, there are three fields: Name, Email, Message. These correspond to form input fields name, email, message.

That’s about it!

Now, if you have the form in place, point your browser to it, and test if. All the form submissions should end up in the database.