Spreadsheet to form

The JSS forms is a premium extension to create a rich HTML form directly from your JSS spreadsheet column definitions. It is possible to send the data from the form to a remote server, create a new row in the spreadsheet, or even define a custom behavior using onbeforesave.

Regular price £ 58
£ 29 One-time fee

Author

Jspreadsheet Pro Team.

License

This plugin requires a license.

Configuration

The following options area available to customize the behavior of the plugin
MethodDescription
url?: String The URL where the data should be send.
logo?: String The URL of the form logo.
instructions?: String Text with the instructions for the user. Default: 'Please fill the form below'
completeMessage?: String Text with the complete message when the user submit the form. Default: 'Thank you for your time'
columns?: Array Form field definitions, extracted from a valid JSS spreadsheet.
onbeforesave?: Function Intercept the save to change or cancel the user action.
onsave?: Function Will trigger the method after the form is submitted by the user.


Example

The following example creates an HTML form from the JSS spreadsheet. In the first example, the form data will be added as a new row, and in the second example, the data is posted to a remote server.



Create a new row in the spreadsheet with the form data






Send the data from the form to a remove server





<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<script src="https://jspreadsheet.com/v8/plugins/forms.js"></script>

<div id="spreadsheet"></div>

<br><br>

<input type='button' value='Create form' onclick='create()' class='jbutton dark'>

<div id="form"></div>


<script>
var create = function() {
    // Spreadsheet instance
    var worksheet = document.getElementById('spreadsheet').jspreadsheet[0];

    // Create form from the spreadsheet
    jspreadsheet.forms(document.getElementById('form-1'), {
        logo: 'https://jspreadsheet.com/jspreadsheet/logo.png',
        columns: worksheet.options.columns,
        onbeforesave: function(el, data) {
            // Get the values
            worksheet.insertRow(Object.values(data));
            // Stop default behavior
            return false;
        }
    });
}

var create_2 = function() {
    // Spreadsheet instance
    var worksheet = document.getElementById('spreadsheet').jspreadsheet[0];

    // Create form from the spreadsheet
    jspreadsheet.forms(document.getElementById('form-2'), {
        url: '/v8/save',
        logo: 'https://jspreadsheet.com/jspreadsheet/logo.png',
        columns: worksheet.options.columns,
    });
}

// Set the license for both plugin and the spreadsheet
jspreadsheet.license = 'Yjg4Yzc5YjgzODljYmUwZWMzYzFiNjEyOTJhNzI4MDRkNGIxODNjN2EzZWVmYzAyMTM2MTFkMTFkNjAxZTM2Y2UzOWE3MTk2NDFkY2I3YWFmZGY1YzdjN2FhYzg5MjYwOTU5YmJiNzVlYzNlYWZlNGVmYWQwZDQ0YmFlMjdmZjAsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5UZzJNVGN5TURBc0ltUnZiV0ZwYmlJNld5SmhjSEpwYkM1amIyMHVZbklpTENKc2IyTmhiR2h2YzNRaVhTd2ljR3hoYmlJNklqRWlMQ0p6WTI5d1pTSTZXeUoyTnlJc0luWTRJaXdpWm05eWJYVnNZU0pkZlE9PQ==';

// Set the extensions
jspreadsheet.setExtensions({ forms });

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [ 6, 8 ],
        columns: [
            {
                title: 'Name'
            },
            {
                title: 'Birthday',
                type: 'calendar'
            },
            {
                title: 'Team color',
                type: 'color'
            },
            {
                title: 'Department',
                type: 'dropdown',
                source: ['Accounts','IT','Marketing'],
                width: '150px',
            },
            {
                title: 'Rating',
                type: 'rating',
            },
            {
                title: 'Reviewed',
                type: 'checkbox',
            },
        ]
    }],
});
</script>
</html>