Skip to main content

Quick start

Connect your first form, collect submissions, and get email notifications - in just a few minutes

Before you begin

Here is what you will need:

  • A Form-Data account. You can sign up here.
  • An HTML form. If you just want to test things up, you can use this codepen form.

Create a form endpoint in Form-Data

After you have signed up and logged in to Form-Data, follow these steps:

1. Click 'New form' button

After you've signed up and logged in to Form-Data webapp, click New form button

New Form

2. Name your form endpoint

  • Give your form endpoint a name ⓵
  • Click the checkmark ⓶ or press enter in order to save

New Form

3. Turn on email notifications

  • Click the Email menu ⓵
  • Turn on the Email notifications toggle ⓶
  • Enter your email address ⓷. You can enter multiple addresses separated by comma or enter.
  • Click the checkmark ⓸ in order to save

New Form

4. Copy the form-handler URL

  • Click Test & Deploy ⓵
  • Click the Copy button ⓶. The URL will be copied to your clipboard
  • Continue to the next step to see how to use it

New Form

Build your HTML form

  • You can use plain HTML, or any frontend framework that you like, such as Vue, React, Svelte, etc. You can also use full-blown site builders such as Webflow.
  • If you just want to test things up, you can use this codepen form.
  • Or, you can just use the test form that is available inside Form-Data under Test & Deploy > Test form handler

Regardless of the stack that you choose, a form will essentially look like this:

<form id="contact" action="YOUR_FORM_HANDLER_URL" method="post">
<input placeholder="Your name" type="text" name="name" required >
<input placeholder="Your Email Address" type="email" name="email" required>
<textarea placeholder="Type your Message Here...." name="message" required></textarea>
<button name="submit" type="submit">Submit</button>

There are 2 important thing to note here:

  • The form's action attribute. Paste your form's handler URL into the action attribute, replacing the string YOUR_FORM_HANDLER_URL.
  • Each field has a name attribute. This is the name of the field that you'll get inside Form-Data when the form is submitted.


That's it! You now have a fully functional form that can collect submissions and send you email notifications.

Read the rest of the documentation to find out about all the other features.