Adding a Progress Bar

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.

What you need to start:

  • CSS Form Builder 2
  • Dreamweaver CS3, CS4 or CS5
  • Dreamweaver site defined
  • PHP page open in Dreamweaver
    • Adding 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.

      5. 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.

       
      NOTE: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.
    Changing 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.
    Removing 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.
    Last Updated: October 15, 2010
    Feedback on this tutorial?

    If you did not find this helpful or you are stuck on a particular step, click here to let us know what we can do to improve this tutorial.

      • Required *
      • Invalid format.Please enter a full email address
        Please provide a comment
      • Security Code
        Entered text does not match; please try again

    This form was built using CSS Form Builder.