Free Open Source JQuery Form Builder

Alpaca Forms  Free Form Builder

Open Source jQuery Form Builder for interactive HTML5 Forms

Alpaca Forms is an open-source jQuery Form Builder, for interactive html5 forms for your web and mobile applications using JSON Schema and Handlebars templates.

Free Open Source JQuery Form Builder

Alpaca Forms

GitHub

Overview

There are lots of free HTML5 form generator tools available. But, Alpaca Forms is a very simple and easy-to-use jQuery Form Builder to generate HTML5 forms for web and mobile applications. It lets you generate great-looking user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile, and HTML5 using JSON Schema and simple Handlebars templates.

Alpaca is a very useful jquery form designer, and everything you need is provided out of the box. It comes pre-packaged with a large library of controls, templates, layouts, and features. Alpaca is a JSON-driven javascript form creator which makes it very easy to render beautiful forms.

It is very extensible and designed around an expandable object-oriented pattern. This built-in extensibility allows you to extend and implement new controls, templates, I18 bundles, and custom data persistence for your projects.

Alpaca Forms provides comprehensive documentation that Form builders and developers can reference for working with field controls, layouts, templates, callbacks, and other extensibility points within Alpaca.

Features

Following are the key features of Alpaca Forms

  • JSON-Driven
  • Supports jQuery UI, jQuery Mobile, and HTML5 for Rendered Output
  • Handlebars Templates
  • Extensibility
  • A comprehensive documentation
  • A great number of supported controls
  • Support multiple types of data sources
  • Support for Callbacks
  • Supported by Cloud CMS
  • Its Free and Open Source

Installation Instructions

Copy the following code into theblock of your webpage:

    <!-- dependencies (jquery, handlebars and bootstrap) -->
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
      <link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
      <!-- alpaca -->
      <link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet"/>
      <script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>

Call $.alpaca() with your form schema and any configuration:

     
    <div id="form1"></div>
    <script type="text/javascript">
    $("#form1").alpaca({
        "schema": {
            "title": "What do you think of Alpaca?",
            "type": "object",
            "properties": {
                "name": {
                    "type": "string",
                    "title": "Name"
                },
                "ranking": {
                    "type": "string",
                    "title": "Ranking",
                    "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']
                }
            }
        }
    });
    </script>

This will generate the following html5 form using Twitter bootstrap and Alpaca combination.

 English