Web Form Generator

restdb.io lets you very quickly create your database with collections (tables), fields and a REST-API.

However, If you need to capture data from an HTML form on your web site and send them into a restdb.io collection, there is actually quite a few things you have to take care of:

• Create a HTML web form that matches the field types in the collection
• Develop asynchronous Javascript/ajax code for posting the data in JSON format or multipart/form-data for images/files - Create code to validate the data

Our Web Form Generator will kickstart this process and save you a lot of time.

Here's how you do it using the generator:

1. Navigate to the Collection you need a web form for.
2. Activate "Development Mode" (top right corner orange button)
3. Click the Form + JS generator button
4. Paste the code into the HTML body of a HTML page
5. Make your own adjustments, CSS styling etc.
6. Remember to add your Web API key (for CORS) and enable POST access. More about CORS API keys.
7. Add a copy of the API key under the settings also, show in the screen shot below.

This will generate the complete source code for your form, e.g.

<form role="form" id="applications-form">
<div class="form-group">
  <label>Name: </label><input class="form-control" name="name" data-type="text" type="text">
</div>
<div class="form-group">
  <label>Email: </label><input class="form-control" name="email" data-type="email" type="email">
</div>
<div class="form-group">
  <label>Status:</label>
    <select class="form-control"  name="status" data-type="option" >
      <option value="Candidate">Candidate</option>
      <option value="Interview">Interview</option>
      <option value="Hire">Hire</option>
      <option value="Decline">Decline</option> 
  </select>
</div>
<div class="form-group">
  <label>Education: </label><input class="form-control" name="education" data-type="text" type="text">
</div>
...

An example web form outputted by the generator is shown below:

As you can see, the generator has created a form that can now can be used to send both text and files/images from a web page and directly into a database.

Behind the scenes, the javascript generator code asynchronously send text data to the 'Application' collection and then uploads files into the Media Archive.

The resulting data sent by the generator code, can now be found in the database as shown below.

The generator saves a ton of time and gives you a good starting point for submitting data from any web page into your database.