# Creating a contact form with Aamu.appUsing the Aamu.app database for contact formsPublished: 2025-05-13


<p><strong>Short answer:</strong> Using the Aamu.app database for contact forms</p>
<p>A contact form is one of the simplest useful ways to connect a public website to Aamu.app. A visitor fills in a form on your site, the submission is stored in an Aamu Database, and your team can handle the message inside the same workspace where the rest of the work happens.</p><p>This article shows the simplest version: an HTML form that posts directly to an Aamu Forms endpoint. You do not need to expose a database API key in the browser for this. The Forms endpoint is designed for public form submissions; it can add rows to the selected table, but it is not a general database API key.</p><h2>What we are building</h2><p>The flow is:</p><pre><code class="language-plaintext">Website form
  -&gt; Aamu Forms endpoint
  -&gt; Aamu Database row
  -&gt; optional automation, task, email, or follow-up workflow</code></pre><p>For a contact form, the database usually has fields such as Name, Email, and Message. When someone submits the form, Aamu creates a new row with those values.</p><h2>Ingredients</h2><p>You need:</p><ul><li><p>an Aamu Database for storing contact form submissions,</p></li><li><p>Forms enabled for that database,</p></li><li><p>a table selected as the destination for submissions,</p></li><li><p>the Forms endpoint URL from the database settings, and</p></li><li><p>an HTML form on your website.</p></li></ul><p>You can use your own HTML or start from the example repository at <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/AamuApp/contact-form">https://github.com/AamuApp/contact-form</a>.</p><h2>Create the database</h2><p>Create a database in Aamu.app for the submissions. If the contact form template is available in your workspace, use it as a starting point. Otherwise, create a simple table yourself.</p><p>For a basic contact form, the table can be as small as:</p><ul><li><p><code>Name</code></p></li><li><p><code>Email</code></p></li><li><p><code>Message</code></p></li></ul><p>You can add more fields later, such as Company, Phone, Subject, Source page, or Consent, depending on what your site needs to collect.</p><h2>Enable Forms</h2><p>Open the database settings and enable Forms. Select the table where form submissions should be stored. Aamu will show a Forms endpoint for that table.</p><p>Copy that endpoint and use it as the form's <code>action</code> URL. The endpoint is the public submission target. Do not put your database API key into the form HTML.</p><h2>The basic HTML form</h2><p>Here is the important part of a simple no-JavaScript form:</p><pre><code class="language-html">&lt;form action="FORMS_ENDPOINT_HERE" method="POST" enctype="multipart/form-data"&gt;
  &lt;input type="hidden" name="redirect-success" value="https://example.com/thank-you"&gt;
  &lt;input type="hidden" name="redirect-error" value="https://example.com/form-error"&gt;

  &lt;label&gt;
    Name
    &lt;input name="name" type="text" autocomplete="name" required&gt;
  &lt;/label&gt;

  &lt;label&gt;
    Email
    &lt;input name="email" type="email" autocomplete="email" required&gt;
  &lt;/label&gt;

  &lt;label&gt;
    Message
    &lt;textarea name="message" required&gt;&lt;/textarea&gt;
  &lt;/label&gt;

  &lt;button type="submit"&gt;Send&lt;/button&gt;
&lt;/form&gt;</code></pre><p>Replace <code>FORMS_ENDPOINT_HERE</code> with the endpoint from your Aamu database settings. Replace the redirect URLs with pages on your own site.</p><h2>How field names map to database fields</h2><p>The form input names need to match the database field bindings. In the simple example above:</p><ul><li><p><code>name</code> maps to <code>Name</code>,</p></li><li><p><code>email</code> maps to <code>Email</code>, and</p></li><li><p><code>message</code> maps to <code>Message</code>.</p></li></ul><p>Aamu shows the correct form field names in the database Forms settings. Use those generated names when you build your form. As a rule of thumb, field names are usually lowercase and spaces become underscores, but the settings screen is the source of truth.</p><h2>Redirects and progressive enhancement</h2><p>The hidden <code>redirect-success</code> and <code>redirect-error</code> fields let the form work without JavaScript. If the visitor's browser submits the form normally, Aamu can redirect the visitor to the right page after success or failure.</p><p>You can also submit the form with JavaScript for a smoother experience, but it is still good to keep the plain HTML form working. That gives you a robust fallback and makes the form easier to test.</p><h2>Submitting with JavaScript</h2><p>If you want to avoid a full page reload, submit the form with <code>fetch</code> and <code>FormData</code>:</p><pre><code class="language-javascript">const form = document.querySelector('form');

form.addEventListener('submit', async (event) =&gt; {
  event.preventDefault();

  const response = await fetch(form.action, {
    method: 'POST',
    body: new FormData(form)
  });

  if (!response.ok) {
    throw new Error('Form submission failed');
  }

  form.reset();
});</code></pre><p>This still uses the Forms endpoint. It still does not expose a database API key.</p><h2>Security notes</h2><p>A public contact form receives public internet traffic, so treat it as an input surface.</p><ul><li><p>Do not publish a database API key in your form or frontend JavaScript.</p></li><li><p>Collect only the information you actually need.</p></li><li><p>Use appropriate consent text if the form collects personal data.</p></li><li><p>Validate important fields in the browser for usability, but remember that server-side validation is what matters.</p></li><li><p>Consider anti-spam measures if the form is published on a high-traffic site.</p></li></ul><p>The Forms endpoint is safer than using the GraphQL database API from the browser because it is limited to accepting submissions for the configured form target.</p><h2>What happens after submission?</h2><p>Once the row is in Aamu, the useful part begins. Because the submission is stored in a normal Aamu Database table, your team can work with it like other structured data.</p><p>For example, you can:</p><ul><li><p>review submissions in the database,</p></li><li><p>create an automation that sends an email notification,</p></li><li><p>create a task for follow-up,</p></li><li><p>use the row as part of a customer workflow, or</p></li><li><p>connect later reporting or integrations through the database API.</p></li></ul><p>The follow-up article on database automations shows how to send an email when a new contact form row is inserted.</p><h2>Testing</h2><p>After the form is in place, submit a test message from the public page. Then open the Aamu database and confirm that a new row appears with the expected field values.</p><p>If the row does not appear, check these first:</p><ul><li><p>the form <code>action</code> points to the current Forms endpoint,</p></li><li><p>Forms are enabled for the database,</p></li><li><p>the correct destination table is selected,</p></li><li><p>the input <code>name</code> attributes match the field bindings, and</p></li><li><p>required fields are actually included in the submitted form.</p></li></ul><h2>That's it</h2><p>The simplest Aamu contact form is just an HTML form plus a Forms endpoint. Aamu stores the submission in a database row, and from there the message can become part of the team's normal workflow: email notifications, tasks, follow-up, reporting, or anything else you build around the data.</p><h2>Frequently asked questions</h2><h3>What is Creating a contact form with Aamu.app?</h3><p>Using the Aamu.app database for contact forms</p><h3>Who is Creating a contact form with Aamu.app for?</h3><p>This guide is intended for developers and technical teams.</p><h3>What does this guide explain?</h3><p>It explains the main concepts, setup, and practical workflow for creating a contact form with aamu.app.</p><h2>Related articles</h2><ul><li><a href="/blog/posts/creating-survey-forms-with-aamuapp-form-builder/">Creating survey forms with Aamu.app Form Builder</a></li><li><a href="/blog/posts/from-form-submission-to-follow-up-workflows-with-aamuapp/">From form submission to follow-up: workflows with Aamu.app</a></li><li><a href="/blog/posts/database-automations-with-aamuapp/">Database automations with Aamu.app</a></li><li><a href="/blog/posts/aamuapp-databases-practical-feature-guide/">Aamu.app Databases: a practical feature guide</a></li><li><a href="/blog/posts/creating-a-blog-with-aamuapp/">Creating a blog with Aamu.app</a></li></ul>
