BoltWire

Handbook

Forms

Creating interactive forms is easy in BoltWire. Below is a quick overview of how to create interactive forms in BoltWire. For specific information about one of the input types available in BoltWire, pleas select it from the list:

Here's a list of the available input types and how they look. You can also see how we recommend setting the default value:

check
password
radio
text box
file
hidden
select button
image
reset
submit

To read one of our tutorials on an advanced topic related to forms, choose one of these:

Fieldsets & Legends
Javascript
Validation

BoltWire also supports most HTML5 form inputs like color pickers, sliders, date choosers, etc. Use the text input type and set type=color, etc. Note these are not fully supported across all browsers, however.

Create Forms

One of the best way to learn how to create these forms is to study BoltWire's default action pages. Forms however are not limited to action pages--they can be put anywhere in your site by site editors and admins.

To create an interactive form, there are three main parts: an opening and closing form tag, form input fields, and form commands. Here's how you start and end the form:

[form]
...
[form]

In between these two form tags, you place your various form input fields, such as checkboxes, radio buttons, text input fields, and drop down menu's. Each will have the following basic format:

[type name="field" value="some value"]

Allowed types include: text, check, radio, password, hidden, image, select, option, box, file, button, submit, and reset. There is also a special image type which allows users to submit a form by clicking some graphic on the page.

Here is a sample form that might be created to setup an addressbook for example. (Without form commands however it will not do anything but display).

[form]
Name: [text name]
Phone: [text phone]
Email: [text email]
[submit]
[form]

This creates three text boxes and a submit button. We probably also want to do some input filtering. BoltWire has a number of possible parameters. Consider the following:

[form]
Name: [text name required=true]
Phone: [text phone filter=math]
Email: [text email pattern="/^\S+@\S+$/"]
[submit]
[form]

This means the form will not submit if the name field is left blank, if the phone field does not pass the prescribed filter, and the email field does not match the specified pattern. You also have full access to BoltWire's conditional engine (ie: if="inlist {+field} alpha,beta,gamma"). And you have three input parameters available to transform user input: case, trim, and fmt (for lists). For more information on input filtering, please see this tutorial?.

Note that the above form will not do much yet, because we have not added any commands. Commands are invisible to the viewer--but send instructions to the ZAP forms processor on what to do when the form is submitted. Let's add one to our form:

[form]
Name: [text name required=true]
Phone: [text phone filter=math]
Email: [text email pattern="/^\S+@\S+$/"]
[submit]
[command savedata name,phone,email page=some.page]
[form]

When the form is submitted, BoltWire receives the user submitted information along with the command to save three data fields on some.page. It performs that action and then reloads the page. For a full discussion of all the commands available in BoltWire, and how they work, please see this tutorial.

Suppose now we want to use this form to also modify this data? To do that, we just retrieve our information back into the form. Let's add that to our form now, and maybe a message indicating the information has been saved. And to make it useful, let's store it on the users member page, so everyone can use it:

[messages]
[form]
Name: [text name '{member.{id}:name}' required=true]
Phone: [text phone '{member.{id}:phone}' filter=math]
Email: [text email '{member.{id}:email}' pattern="/^\S+@\S+$/"]
[submit]
[command savedata name,phone,email page=member.{id}]
[command msg "Contact information has been saved."]
[form]

Notice the savedata command now saves it to their member page (which also stores their login password). The second parameter in each input field pulls in the appropriate information from the member page (if available) and displays it as the default value. The msg command sends a msg back, and the messages tag displays it in the page. We now have a working form for saving, retrieving and modifying member contact information.

This is about all there is to forms. An opening and closing tag, input fields, and commands for form processing.

Miscellaneous Info

For obvious security reasons, only admins and editors are able to create forms in BoltWire. If another user attempts to create a form, it will be escaped and be non-functional. If you put a form on a page, and someone who is not an admin or editor attempts to modify that page, any forms on it will be invalidated as well. One work around is to create a special forms page (like form.contacts) and then include that form into another page.

Normally you do not need to put any parameters in the initial form tag, but you can set any of the following: name, class, id, style, action, enctype, method, and accept-charset. (These are defined in variables.php and can be reset). By default, it uses UTF-8 for the charset, and the method is post.

The various input types also accept most standard html parameters. The allowed parameters are all defined in variables.php, and can be reset in a config.php page.

Javascript can be added into a form by defining an element in the $BOLTformJs array in your local config/config.php file, and then adding js=index (of the element) to the input's parameters. There's also a code.js page where you can put short js commands. It comes with several default ones, like clear, jump, print, alert, skip, and back. To clear the existing content on focus, for example add js=clear as a parameter to your input field. Feel free to edit the default values as needed.

Docs

Handbook

Create Forms

Miscellaneous Info