Web development tutorial

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Design, Dreamweaver, PHP

1 ratings | Sign in to rate this tutorial | View comments

Print tutorial
Share this tutorial

CSS Form Builder 2 includes Progress Bars that you can apply to any PHP form in the event that form submissions is taking a while. This improves usability for your site visitor.

Additionally, if you are using the Email Delay option of CSS Form Builder 2's Create Email Message functionality, you can add a progress bar that will display how many emails have been sent and how many are remaining.

NOTE: CSS Form Builder 2 automatically adds the progress bar to your forms when your form is created. If you want to remove this progress bar from your form, see Removing the Progress Bar below.

next section

Requirements

You will need the following items before starting this tutorial:

Dreamweaver CS3 or later
CSS Form Builder 2 Installed (click here for installation instructions)
Dreamweaver site defined
PHP page open in Dreamweaver

next section

Adding a Progress Bar

With your form open, adding a progress bar is a simple operation.

Open your form, then from the WebAssist menu choose Forms > Progress Bar.
From the Category menu, choose the progress bar type you desire.
Refer to the preview for an example of what the selected category looks like.
Choose the Design that best suits your page.
Click OK to apply the progress bar to your page.

Although the progress bar is useful for seeing the process for sending many emails, it is not necessary, and you can always navigate away from the page after it starts sending the emails.

If your form does not take a while to submit, the progress bar may never display. This does not mean the progress bar does not work, but simply that it was not necessary and therefore did not show.

next section

Changing Progress Bar

If you need to make changes to your progress bar after applying it to your form, follow these steps.

Hover your mouse over the form which the progress bar has been applied to.
Notice a blue bounding box appear, click once to select this bounding box.
From the Properties Inspector, choose Edit to launch the dialog for selecting your progress bar.

Removing the progress bar

Hover your mouse over the form which the progress bar has been applied to.
Notice a blue bounding box appear, click once to select this bounding box.
From the Properties Inspector, choose Remove to remove the progress bar from the page.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

1 ratings | Sign in to rate this tutorial