close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Add a Progress Bar

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Design, Dreamweaver, PHP

rating

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.

arrow downRequirements

You will need the following items before starting this tutorial:

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

arrow downAdding a Progress Bar

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

  1. Open your form, then from the WebAssist menu choose Forms > Progress Bar.
  2. 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.

  3. Choose the Design that best suits your page.
  4. 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.

arrow downChanging Progress Bar

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

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

arrow downRemoving the progress bar

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

arrow downReviews 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
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.