Back

Getting Started

Create and wire up your first form!

StaticForms lets you submit HTML forms from your static website and saves them in a database that you can view in the dashboard. It's a great solution for contact forms, email list subscriptions, user surveys, and more.

To create a new form, start by clicking on the Create Form button the Dashboard.

There are three sections to configure your form but only the first one, the name, needs to be entered.

img

For now, let's leave the other two sections with their defaults... img

...the user submitting the form will be and you will get an email notification every time a form is submitted.

Click Save and you'll see a confirmation that the form was created successfully. img

This page has the link you'll need to set as the action. Click on it to copy it to the clipboard and we'll use it in a second when we create our form.

We'll create the simplest possible form for this example, one which captures an email address. You might use something like this for capturing leads or sign-ups for an email newsletter.

The code looks like this:

<form action="https://api.staticforms.co/submit?form=bWTn" method="post">
  <label for="email">Email address</label>
  <input name="email" type="email" id="email" />
  <button type="submit">Submit</button>
</form>

Let's look at the key elements that make this work with StaticForms...

The first thing is action attribute:

action="https://api.staticforms.co/submit?form=bWTn"

This specifies the URL that the form will be posted to when it is submitted. When you create a form you would replace the URL in this example with the one you copied from the confirmation page.

Next is the input field:

<input name="email" type="email" />

The critical thing here is the name attribute. StaticForms will store the value of any field that has a name, so make sure any fields you want to be stored have a name.

And that's it. If you drop this in to a HTML page it will just work. You'll have a fully fuctioning form. When someone submits it they will see a confirmation page and you will get a confirmation email containing the values of the form's fields, and you can view and download all subissions through the dashboard.

The next step would be to style the form to make it look a bit more attractive and to add validation, perhaps ensuring that a valid email address has been entered. You might also want to enable spam filtering.