jQuery Order Form Builder

To construct your order form, start by adding input fields from the "Add..." menu to the left. There are a wide range of inputs to choose from.

Then, you can configure the order form by clicking on the "Form" button in the "Configure..." menu (under the "Add..." menu). These options allow you full control over the order form.

You can preview your form before downloading it in a zip file by clicking the Preview button in the top menu bar. The top menu also allows you to Save your form configuration for editing later, and Load it again to resume editing. When you are finished, click the Download button in the top menu bar to download a zip file containing your order form.

If you have a copy of jQuery Price Calculator Pro, you can configure the price calculator by clicking "jQuery PCP" from the "Configure..." menu to the left.

Configure the form using the options below. You can see more about each option by hovering over it's label. You can find an exhaustive explanation of these options in the jQuery Order Form Builder documentation.

Options:

Configure jQuery Price Calculator Pro using the options below. You can see more about each option by hovering over it's label. You can find an exhaustive explanation of these options in the jQuery Price Calculator Pro documentation.

jQuery Order Form Builder v1.0 is compatible with jQuery Price Calculator Pro v1.3.

Options:

Copy the text in the Save Order Form box to save a copy of the complete configuration for this Order Form.

Enter text into the Load Order Form box to reload an Order Form previously saved.

Save Order Form:

Load Order Form:

You can preview what the forms will look like below. Please note that in the demo these examples will not reflect the form that you have built. In the full version, you can preview exactly what your form will look like before downloading.

Default Example (Non jQuery Price Calculator Pro)

Example with jQuery Price Calculator Pro functionality

Downloading has been disabled in the demo :(

Click on the option's name (e.g. Radio Button Group) to add that Option to the Info Group. You can see a demo of each of the options underneath each title.

Radio Button Group
Checkbox Group
Drop Down List
Multi Select
Text (Single-line)
Text (Multi-line)