​
Creating your first form

Get started with Formbox by creating your first form. You can create a form from scratch or use one of our templates to get started quickly.

​
Before we start, here is what you’ll need:

  • A Formbox account. You can sign up here
  • An HTML form. You can create a new form or use one of our templates.
  • Basic Javascript knowledge (optional)

​
Step 1. Creating an HTML form

Create a simple contact form using HTML:

<form action="#" method="POST">
  <label for="name">Name</label>
  <input type="name" name="name" id="name" />

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

  <label for="message">Message</label>
  <textarea name="message" id="message"><textarea>
  <button type="submit">Submit</button>
</form>

The most important aspect of an HTML form is the action="#" attribute, which specifies the URL where you want to process form data. In a typical website, it will look like this:

<form action="https://mysite.com/myform.php" method="POST">
  <label for="email">What is your Email Address?</label>
  <input type="email" name="email" id="email" />
  <button type="submit">Subscribe</button>
</form>

This sends form data to https://mysite.com/form.php, where you would need to write back-end code (in PHP, Node.js, Go, Ruby, etc.) to process the data. Formbox handles this process for you by providing a unique URL that processes your form without any back-end code. Your unique URL allows you to receive emails from your form, send auto-responses, upload files, and trigger integrations. An example Formbox endpoint looks like this: https://api.formbox.app/s/XXXXXXXX

​
Step 2. Creating a form in Formbox

First we need to create an Organization in Formbox dashboard. You can do this by clicking on the Create organization button in the dashboard.

When you create an organization, you will be redirected to the organization page. Click on the Create form button to create a new form.

When you create a form, you will be redirected to the form setup page where you can get your unique form endpoint. Copy this endpoint.

Your unique endpoint is a bridge between your form and Formbox that will deliver submissions.

​
Step 3. Adding the form endpoint to your HTML form

Paste the unique endpoint URL you copied in step 2 into your form’s action attribute:

//this is sample endpoint change it with your endpoint that you copied in step 2
<form action="https://api.formbox.app/s/{your_form_api}" method="POST">
  <label for="name">Name</label>
  <input type="name" name="name" id="name" />

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

  <label for="message">Message</label>
   <textarea name="message" id="message"><textarea>
  <button type="submit">Submit</button>
</form>

Now you have successfully created your first form with Formbox. You can test your form by submitting some data and viewing your submission in the dashboard.

Congratulations! You’re now ready to take full advantage of Formbox, including features like:

  • ✅ Email notifications
  • ✅ Google ReCaptcha
  • ✅ Spam blocking
  • ✅ Google sheets integration
  • ✅ Webhooks
  • ✅ CSV & JSON export
  • ✅ Autoresponses

​
Things to know

  1. Each input field must have a name attribute
<input name="email" type="email" />
<input name="fullName" type="text" />
<textarea name="message"><textarea>

  1. Content-Type: JSON, form-data, and x-www-form-urlencoded are supported. If you’re just using an HTML form without JavaScript, you don’t need to worry. However, if you’re using JavaScript to make a request, you should set this attribute.

  2. For file uploads, set the Content-Type to multipart/form-data.

  3. If you want to receive a JSON response message, you must set the HTTP Accept header to application/json.

Features overview