Contact Form Example

Let's continue from the previous page and hook up a contact form.

HTML

We'll start by writing some HTML:

<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" required>

    <label for="email">Email Address:</label>
    <input type="email" name="email" id="email" required>

    <label for="message">Message:</label>
    <textarea name="message" id="message"></textarea>

    <button type="submit">Send</button>
</form>

This HTML provides a very basic contact form that asks for the user's name, email and address and an optional message.

Connecting to Forma

If we visit our form's "Show" page, we can see a URL box and "Copy to clipboard" button under the "Integration" tab.

This URL should be used to point the contact form to Forma. Click the "Copy to clipboard" button and update your HTML like so:

<form action="https://useforma.app/submit/9404acc6-fe65-4d28-bf5d-96b0d34b62e9" method="POST">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" required>

    <label for="email">Email Address:</label>
    <input type="email" name="email" id="email" required>

    <label for="message">Message:</label>
    <textarea name="message" id="message"></textarea>

    <button type="submit">Send</button>
</form>

We've added the URL that was copied to the clipboard as the action attribute and also specified the POST method.

Forma will only accept POST submissions. Any attempt to use GET will fail and result in a bad submission.

Enabling Test Mode

Test mode is a feature that allows you to test your new form without eating into your monthly email quota (free plan). No submission notifications will be triggered when making a test submission, which is perfect for client-accessible forms.

To enable test mode, simply append ?test_mode=1 to the action URL.

When you're viewing your submissions, be sure to toggle "Test mode" under the "Submissions" tab.

Test mode submissions are automatically removed after 3 days.

Triggering a submission

If you visit your form in the browser, fill in all of the required fields and submit the form, you should be redirected to your configured "Default Redirect".

You can now visit the "Submissions" tab for your form, click on the submission and view all of the details that were submitted.

Screenshot of Submission

All data stored from a submission will be displayed here. The data is encrypted using AES-256 encryption.