First Try on FORM.IO

A combined form and API platform for Serverless applications



Installation

Requirements

  • Node.js 
    installed version: v6.10.3
  • MongoDB
    installed version: MongoDB shell version v3.4.5
  • Web Proxy
    installed: Apache 2.4.x

Demo (R&D)

Max’s Notes

  • Change API URL: formio/client/dist/config.js; i.e. 
    var APP_URL = ‘http://form.YourSite.com/';
    var API_URL = ‘http://form.YourSite.com/';
  • First Working Code
<html>
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
<script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
var form = new FormioForm(document.getElementById('formio'), {
readOnly: false
});
form.src = 'http://form.YourSite.com/user';
form.on('submit', (submission) => {
console.log('The form was just submitted!!!');
console.log(db.collection.find())
form.reset();
});
form.on('error', (errors) => {
console.log('We have errors!');
})
}
</script>
</head>
<body>
<center><div style="width:80%;">
<div id='formio'>form area</div>
</div></center>
</body>
</html>

Work in progress — Customized Form

https://github.com/formio/formio.js/wiki/JavaScript-API#attach-to-html-form

Attach to HTML Form

This Formio library can also be used to attach an existing HTML Form to the Form.io API service using the Formio.form method. Let's suppose you have the following HTML form.

<form action='https://examples.form.io/example' id="myform">
<label>First Name
<input id="first-name" name="data[user][firstName]" type="text" placeholder="First name only" required="" autofocus="">
<label>Last Name
<input id="last-name" name="data[user][lastName]" type="text" placeholder="Last name only" required="" autofocus="">
<label>Email
<input id="email" name="data[user][email]" type="email" placeholder="example@domain.com" required="">
</form>

You can now attach this form to the Form.io API by calling the following.

var form = document.querySelector('form#myform');
Formio.form(form, function(err, submission) {
console.log(submission);
});

This will now let the user fill out the form, and then when they press the submit button, will execute the API call into Form.io.

This also works with jQuery like so…

Formio.form($('form#myform'), function(err, submission) {
console.log(submission);
});