Alpaca Forms - Easy Forms for jQuery

Latest version: 1.5.27 released on 5/14/2019.

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.

Everything you need is provided out of the box. Alpaca comes pre-stocked with a large library of controls, templates, layouts and features to make rendering JSON-driven forms easy. It is designed around an extensible object-oriented pattern, allowing you to implement new controls, templates, I18N bundles and custom data persistence for your projects.

Alpaca is open-source and provided to you under the Apache 2.0 license. It is supported by Cloud CMS and is in use by organizations and within projects all around the world.

How do I use Alpaca?

Copy the following into the <head/> block of your web page:

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

Enjoy your newly rendered Alpaca form!

The example above uses the Alpaca + Bootstrap combination. Combinations are also available for jQuery UI, jQuery Mobile and straight-up web HTML5. The required assets (jQuery, Bootstrap and Handlebars) are loaded from CDN sources.

To get started on your own projects, take a look at the sample Alpaca/Bootstrap HTML page.

Who uses Alpaca?

Lots of people. Alpaca is an open-source project and has been under active development for 5 years! We've had a great time building it and have enjoyed the pull requests and adoption within some really great companies worldwide. Here are a few notable ones:

If you'd like to have your company logo listed above, please drop us a line.

What Browsers are Supported?

Alpaca works in with any browser that supports jQuery 1.10.x and above. This includes web browsers and browsers running on mobile devices.

We've tested Alpaca against IE 9 and beyond. It may work with earlier versions but you're getting into tedious territory there. This is not your fault. Don't blame yourself. Just be thorough and give your forms a test on IE 8 and below.

Is Alpaca open source?

Yes. Alpaca is an open-source project and the source code is freely available under the Apache 2 license. We chose the Apache 2 license because it is permissive and lets you get the most out of open source.

With any luck, Alpaca will improve your life. Save you time. And let you play with your kids more.

Alpaca is supported by the community and several active contributors who have supplied pull requests with new features, ideas and technical wonder. The project started at Cloud CMS where we used Alpaca as our forms engine of choice.

You can freely fork Alpaca by visiting the Alpaca project at GitHub.

Is Alpaca supported?

Yes, Alpaca is supported if you sign up for a support contract with Cloud CMS. We have engineers who offer consulting services, technical support and training.

Cloud CMS sponsors Alpaca and is ready to work with you to support your live engagements. Let us know how we can help!

If you don't want production support, the project is open source and has an active community. Check out our contribution page to learn how you can get involved

How do I get started?

You can drop Alpaca into your new or existing web or mobile projects. Alpaca is a simple JavaScript library that you can plug in wherever you'd like. You can install or download Alpaca using conventional tools like Bower or NPM. Or you can grab a release from our download page.

How do I get help from the community?

If you have a question, we recommend asking away on Stack Overflow or within your developer community of choice. We recommend Stack Overflow based on the quality of developers who respond. Chances are that someone has run into something similar and can help out.

Join a Meetup


Sydney, Australia	Cleveland, OH USA	Boston, MA USA

If you're interested in presenting Alpaca at a local meetup, contact us and we'll work with you.

How do I contribute to Alpaca?

Alpaca is truly a community project; we welcome your involvement!

When contributing, please attempt to match the code style already in the codebase. Note that we use four spaces per indentation stop.

For more thoughts on code style, see https://github.com/rwldrn/idiomatic.js/.

Best Practices

As a best practice, leave space in your code so as to make things more human-readable. The goal with any code contributions is to have them be useful and consumable by others. A good strategy therefore is to make things as easy to understand as possible. We don't like concise code simply for the sake of being concise. Keep it nice and readable.

When fixing bugs and adding features, when appropriate please also:

Provide inline comments so that others can understand what your code is doing
Updated related doc comments (we use JSDoc 3)
Add/update any related unit tests (if applicable)
Add/update any documentation pages

Make it happen, captain

If you're new to the project, check out our good first contribution issues for some places to dip your toe in the water.

If you're new to open source in general, check out GitHub's open source intro guide.

Once you're ready, submit a pull request! The core team will work with you to review your request and merge your feature in.

Alpaca - Easy Forms for jQuery