Spreadsheet to form

JSS forms is a premium extension to create an 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.

Author

Jspreadsheet Pro Team.

License

Available on the premium or enterprise plan.

Configuration

The following options are available to customize the plugin's behavior.
MethodDescription
url?: String The URL where the data should be sent.
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 the users after submitting the form. Default: 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 and the data will be added to a spreadsheet. But, you can send this data to a server for example.



Create a new row in the spreadsheet with the form data





Source code

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/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" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/css/dist/style.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/forms/dist/index.min.js"></script>

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

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

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

<script>
var create = function() {
    // Spreadsheet instance of the first worksheet
    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;
        }
    });
}

// Set the license for both plugin and the spreadsheet
jspreadsheet.setLicense('OTFiNDAwYjM4NDU5NDcwZmIxZjE5MmZiN2YyYzI5MTAzZGQ2ZmVlNTIzODgxM2FlZjUxNmQzZmVjMDAyN2NmOTY0NGE1MjdjNDI3MTU3ZTkzYjZiZWI1Y2YyODVjYzIwNmJhN2JkNjcyYTVhNzU3ZTU2NzQzYjRlNzM1ODgxMzAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGs1T1RjeE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

// 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>



Create applications with spreadsheet-like controls