Skip to main content

Create 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.

Create A New Form End-Point#

To create a new form end-point, click the Create Form button the Dashboard

On the New Form page, give your form a name and click Create.

img

Your form end-point will be created and the Form Settings page will appear. For now, we can leave everything set to the defaults, so we just need to copy our form end-point URL to the clipboard for use in the next step.

img

Create A 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.

Add A Form To Your Website#

Adding a form to your web site starts by adding the following code to an existing page:

<form method="POST"></form>

Point The Form To Your Unique StaticForms End-Point#

Next, we need to tell the browser where to send the form's contents, by adding an action attribute and setting it's value to the unique end-point URL we copied to the clipboard earlier.

<form action="{YOUR UNIQUE FORM END-POINT}" method="POST"></form>

Add Fields To The Form#

Now, we need to add fields to capture the data we need. In this example, we'll just capture an email address. To do this we add an <input> field and a corresponding <label> to our form.

<form action="{YOUR UNIQUE FORM END-POINT}" method="POST"> <label for="email">Email address</label> <input name="email" type="email" /></form>

The key thing here is that the <input> field has a name attribute. StaticForms will store the value in any form field that has a name attribute, and will use the field's name as the name for the field in the StaticForms database.

Lastly, we need to add a <button> to allow the user to submit the form. We'll specify the type of button using the type attribute. In this case type="submit", which tells the browser to submit the form when the button is clicked.

<form action="{YOUR UNIQUE FORM END-POINT}" method="POST"> <label for="email">Email address</label> <input name="email" type="email" /> <button type="submit">Submit</button></form>

Start Receiving Submissions#

You now have a fully fuctioning form. When a user enters an email address and clicks Submit, they will see a confirmation page and you will get a notification email. You can view and download all subissions through the dashboard.