ProductsForms

Spreadsheet to HTML form

Spreadsheet to HTML Forms

ENTERPRISE

The Jspreadsheet Forms JavaScript extension allows you to create HTML forms directly from spreadsheet column definitions. You can use this tool to send form data to a remote server, add new rows to the spreadsheet, or define custom behavior with the onbeforesave function.

Documentation

Settings

Method Description
url?: String The URL where the data should be sent
logo?: String The URL of the form logo
instructions?: String Text with instructions for the user. Default: 'Please fill the form below'
completeMessage?: String Text shown to users after submitting the form. Default: 'Thank you for your time'
columns?: Array Form field definitions, extracted from a valid Jspreadsheet spreadsheet
onbeforesave?: Function Intercepts the save to change or cancel the user action
onsave?: Function Triggers the method after the form is submitted by the user

Installation

Choose one of the following options:

Using NPM

$ npm install @jspreadsheet/forms

Using a CDN

<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/forms/dist/index.min.js"></script>

Example

The following example creates an HTML form from a Jspreadsheet spreadsheet and adds the data to a spreadsheet. Alternatively, you can send this data to a server.

Create a Form From my Spreadsheet

Create a new row in the spreadsheet with the form data

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/forms/dist/index.min.js"></script>

<div id="spreadsheet1"></div>

<p><input type='button' value='Create form' id="btn1"></p>

<div id="spreadsheet2"></div>

<script>
let create = function() {
    // Spreadsheet instance of the first worksheet
    let worksheet = jss[0];

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

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

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

// Create the spreadsheet
let jss = jspreadsheet(document.getElementById('spreadsheet1'), {
    worksheets: [{
        filters: true,
        minDimensions: [ 6, 4 ],
        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',
            },
        ]
    }],
});

document.getElementById("btn1").onclick = create
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import forms from "@jspreadsheet/forms";

import "@lemonadejs/studio";
import "@lemonadejs/studio/dist/style.css";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Define the grid license
const license = 'ODc4YjE1OGFlOWVjYmRjOGJkNWRiNGIyNDNmODUwYmJkYWY4MjBkNjQxNTA2NWM1MTJhODgwOTg2MzcyOWVhMDliOTdiOTc2ZmQwYjQ3NjJkYjVkM2VjOTY2OWZjZjA5NTMzZjQwZmYyMDU0MGM4ODEwZDdiZDM3YzI0MjU5MzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreU1qSTNNVE14TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=';

// Define the grid extensions
const extensions = { forms };

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Form
    const form = useRef();
    // Columns
    const columns = [
        { title: 'Name' },
        { title: 'Birthday', type: 'calendar' },
        { title: 'Team color', type: 'color' },
        { title: 'Department', type: 'dropdown', source: ['Accounts','IT','Marketing'] },
        { title: 'Rating', type: 'rating', }, { title: 'Reviewed', type: 'checkbox', }
    ];
    // Create form
    const create = () => {
        // First worksheet instance
        let worksheet = spreadsheet.current[0];
        // Create form from the spreadsheet
        jspreadsheet.forms(form.current, {
            logo: 'https://jspreadsheet.com/jspreadsheet/logo.png',
            columns: worksheet.options.columns,
            onbeforesave: function(el, data) {
                // Get the values
                worksheet.insertRow([{ data: Object.values(data) }]);
                // Stop default behavior
                return false;
            }
        });
    }
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license} extensions={extensions}>
                <Worksheet columns={columns} minDimensions={[6, 4]}/>
            </Spreadsheet>
            <div ref={form}></div>
            <input type="button" value="Create form" onClick={() => create()} />
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions">
        <Worksheet :minDimensions="[6, 4]" :columns="columns" />
    </Spreadsheet>
    <div ref="form"></div>
    <input type="button" value="Create form" @click="create" />
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from '@jspreadsheet/vue';
import forms from '@jspreadsheet/forms';

import '@lemonadejs/studio';
import '@lemonadejs/studio/dist/style.css';
import 'jspreadsheet/dist/jspreadsheet.css';
import 'jsuites/dist/jsuites.css';

// Define the grid license
const license = 'ODc4YjE1OGFlOWVjYmRjOGJkNWRiNGIyNDNmODUwYmJkYWY4MjBkNjQxNTA2NWM1MTJhODgwOTg2MzcyOWVhMDliOTdiOTc2ZmQwYjQ3NjJkYjVkM2VjOTY2OWZjZjA5NTMzZjQwZmYyMDU0MGM4ODEwZDdiZDM3YzI0MjU5MzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreU1qSTNNVE14TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=';

// Define the grid extensions
const extensions = { forms };

export default {
  components: {
    Spreadsheet,
    Worksheet,
  },
  methods: {
    create() {
      // First worksheet instance
      let worksheet = this.$refs.spreadsheet.current[0];
      // Create form from the spreadsheet
      jspreadsheet.forms(this.$refs.form, {
        logo: 'https://jspreadsheet.com/jspreadsheet/logo.png',
        columns: worksheet.options.columns,
        onbeforesave: function (el, data) {
          // Get the values
          worksheet.insertRow([{ data: Object.values(data) }]);
          // Stop default behavior
          return false;
        },
      });
    },
  },
  data() {
    return {
      license,
      extensions,
      columns: [
        { title: 'Name' },
        { title: 'Birthday', type: 'calendar' },
        { title: 'Team color', type: 'color' },
        {
          title: 'Department',
          type: 'dropdown',
          source: ['Accounts', 'IT', 'Marketing'],
        },
        { title: 'Rating', type: 'rating' },
        { title: 'Reviewed', type: 'checkbox' },
      ],
    };
  },
};
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
import form from "@jspreadsheet/form";

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('ODc4YjE1OGFlOWVjYmRjOGJkNWRiNGIyNDNmODUwYmJkYWY4MjBkNjQxNTA2NWM1MTJhODgwOTg2MzcyOWVhMDliOTdiOTc2ZmQwYjQ3NjJkYjVkM2VjOTY2OWZjZjA5NTMzZjQwZmYyMDU0MGM4ODEwZDdiZDM3YzI0MjU5MzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreU1qSTNNVE14TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

// Extensions
jspreadsheet.setExtensions({ form });

@Component({
  selector: "app-root",
  template: `<div #spreadsheet></div>
    <div #form></div>
    <input type="button" value="Create form" (click)="create()" />`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    @ViewChild("form") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [ 6, 4 ],
                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',
                    },
                ]
            }],
        });
    }
    create() {
        // First worksheet instance
        let worksheet = this.worksheets[0];
        // Create form from the spreadsheet
        jspreadsheet.forms(this.form, {
            logo: 'https://jspreadsheet.com/jspreadsheet/logo.png',
            columns: worksheet.options.columns,
            onbeforesave: function(el, data) {
                // Get the values
                worksheet.insertRow([{ data: Object.values(data) }]);
                // Stop default behavior
                return false;
            }
        });
    }
}