Welcome

BoltWire is a content management system developed by Dan Vis.

Welcome Tour
Documentation
Mailing List



Popular Posts

Version 5.11 Released
May 26, 2016

Big Changes Coming Soon...
April 28, 2016

Catching Up
April 6, 2016



Other Sites

Here's some other sites by Dan Vis:

Alexa Echoes
Join my adventures developing for Amazons exciting new voice platform.

Firefly Spot
Personal rambling about new gadgets, technology news, and space travel.

FAST Missions
My ministry hub, with news and updates about our online school.

You can follow him at www.danvis.info.

Forms

Documentation > 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:

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

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

Fieldsets & Legends
Javascript
Validation

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 link type which allows users to submit a form by clicking some text 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 the 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]
Phone: [text phone]
Email: [text email]
[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 is a data variable pulling data from the member page. 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 processor.

Miscellaneous Info

To leave a comment, please login using your Facebook account: