Progress Step Form

⌘K
  1. Home
  2. Docs
  3. Progress Step Form
  4. How to use

How to use

Progress Steps –

Progress-step components are an invaluable tool in any project or task that needs to be broken down into manageable steps. They allow users to monitor progress and keep track of the status of a project. By visualizing the tasks, progress-step components can help ensure that all objectives are met efficiently and effectively.

– How to implement it on your website ?

Implementing a new feature on your website can be a challenging yet rewarding process. It is important to break it down into manageable steps in order to ensure a successful outcome.

The fill components form allows you to display each step of a process with a short description. This form of progress-steps components is useful for quickly conveying key details about how to accomplish a task. The bullet components form, on the other hand, has fewer words and can be used when there are more steps involved in a process or if a user wants a quick overview of the steps. Whichever components form you choose, it will give your users a clear idea of where they are in the process and what the next step is.

For the fill progress steps, use the following snippet:
 
    
    <form id="ib-progress-steps-fill-pack">
    
         <ul id="ib-progressbar-fill-pack">
             <li class="active-link">Form 1</li>
             <li>Form 2</li>
             <li>Form 3</li>
             <li>Form 4</li>
             <li>Form 5</li>
         </ul>
   
         <!-- fieldsets -->
         <fieldset class="fieldset fieldset1">
             <h2>Parsonal Information</h2>
             <input type="text" placeholder="First Name">
             <input type="text" placeholder="Last Name">
             <div class="flx-bx">
                 <select>
                     <option>Male</option>
                     <option>Female</option>
                     <option>Others</option>
                 </select>
                 <input type="number" placeholder="Age">
             </div>
             <input type="button" name="next" class="next-fill action-button" value="Next" />
             <!--Waves Container-->
             <div class="waves wavekey">
                 <div class="wavesinner bgwave1">
                     <div class="wave wave1"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                     </div>
                 </div>
                 <div class="wavesinner bgwave2">
                     <div class="wave wave2"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                     </div>
                 </div>
             </div>
         </fieldset>
         <fieldset class="fieldset fieldset1">
             <h2>Details of Health Condition</h2>
             <textarea cols="30" rows="7">Describe Your Issues</textarea>
             <input type="button" name="prev" class="prev-fill action-button" value="Previous" />
             <input type="button" name="next" class="next-fill action-button" value="Next" />
             <!--Waves Container-->
             <div class="waves wavekey">
                 <div class="wavesinner bgwave1">
                     <div class="wave wave1"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                     </div>
                 </div>
                 <div class="wavesinner bgwave2">
                     <div class="wave wave2"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                     </div>
                 </div>
             </div>
         </fieldset>
         <fieldset class="fieldset fieldset1">
             <h2>Fill The Details</h2>
             <input type="text" placeholder="Name Of The Doctor">
             <input placeholder="Date of Visit" type="text" onfocus="(this.type = 'date')" id="date">
             <input type="button" name="prev" class="prev-fill action-button" value="Previous" />
             <input type="button" name="next" class="next-fill action-button" value="Next" />
             <!--Waves Container-->
             <div class="waves wavekey">
                 <div class="wavesinner bgwave1">
                     <div class="wave wave1"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                     </div>
                 </div>
                 <div class="wavesinner bgwave2">
                     <div class="wave wave2"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                     </div>
                 </div>
             </div>
         </fieldset>
         <fieldset class="fieldset fieldset1">
             <h2>Email For Contact</h2>
             <input type="email" placeholder="Email">
             <input type="button" name="prev" class="prev-fill action-button" value="Previous" />
             <input type="button" name="next" class="next-fill action-button" value="Next" />
             <!--Waves Container-->
             <div class="waves wavekey">
                 <div class="wavesinner bgwave1">
                     <div class="wave wave1"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                     </div>
                 </div>
                 <div class="wavesinner bgwave2">
                     <div class="wave wave2"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                     </div>
                 </div>
             </div>
         </fieldset>
         <fieldset class="fieldset fieldset1">
             <h2>Terms & Conditions</h2>
             <div class="terms">
                 <input type="checkbox">
                 <p>I've read and agree with all the Terms & Conditions.</p>
             </div>
             <input type="button" name="prev" class="prev-fill action-button" value="Previous" />
             <input type="submit" name="submit" class="submit action-button" value="Submit" />
             <!--Waves Container-->
             <div class="waves wavekey">
                 <div class="wavesinner bgwave1">
                     <div class="wave wave1"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                     </div>
                 </div>
                 <div class="wavesinner bgwave2">
                     <div class="wave wave2"style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                     </div>
                 </div>
             </div>
         </fieldset>
    </form>
    
    
And for the bullet progress steps, use the following snippet:
 
    
    <form id="ib-progress-steps-bullet-pack">
        <!-- progressbar -->
        <ul id="ib-progressbar-bullet-pack">
                <li class="active-link">Form 1</li>
                <li>Form 2</li>
                <li>Form 3</li>
                <li>Form 4</li>
                <li>Form 5</li>
        </ul>

        <!-- fieldsets -->
        <fieldset class="fieldset fieldset1">
                <h2>Parsonal Information</h2>
                <input type="text" placeholder="First Name">
                <input type="text" placeholder="Last Name">
                <div class="flx-bx">
                        <select>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Others</option>
                        </select>
                        <input type="number" placeholder="Age">
                </div>
                <input type="button" name="next" class="next-fill action-button" value="Next" />
                <!--Waves Container-->
                <div class="waves wavekey">
                        <div class="wavesinner bgwave1">
                                <div class="wave wave1"
                                                style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                                </div>
                        </div>
                        <div class="wavesinner bgwave2">
                                <div class="wave wave2"
                                        style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                                </div>
                        </div>
                </div>
        </fieldset>

        <fieldset class="fieldset fieldset1">
                <h2>Details of Health Condition</h2>
                <textarea name="" id="" cols="30" rows="7">Describe Your Issues</textarea>
                <input type="button" name="prev" class="prev-fill action-button" value="Previous" />
                <input type="button" name="next" class="next-fill action-button" value="Next" />
                <!--Waves Container-->
                <div class="waves wavekey">
                        <div class="wavesinner bgwave1">
                                <div class="wave wave1" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                                </div>
                        </div>
                        <div class="wavesinner bgwave2">
                                <div class="wave wave2" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                                </div>
                        </div>
                </div>
        </fieldset>

        <fieldset class="fieldset fieldset1">
                <h2>Fill The Details</h2>
                <input type="text" placeholder="Name Of The Doctor">
                <input placeholder="Date of Visit" type="text" onfocus="(this.type = 'date')" id="date">
                <input type="button" name="prev" class="prev-fill action-button" value="Previous" />
                <input type="button" name="next" class="next-fill action-button" value="Next" />
                <!--Waves Container-->
                <div class="waves wavekey">
                        <div class="wavesinner bgwave1">
                                <div class="wave wave1" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                                </div>
                        </div>
                        <div class="wavesinner bgwave2">
                                <div class="wave wave2" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                                </div>
                        </div>
                </div>
        </fieldset>

        <fieldset class="fieldset fieldset1">
                <h2>Email For Contact</h2>
                <input type="email" placeholder="Your Email">
                <input placeholder="Date of Visit" type="text" onfocus="(this.type = 'date')" id="date">
                <input type="button" name="prev" class="prev-fill action-button" value="Previous" />
                <input type="button" name="next" class="next-fill action-button" value="Next" />
                <!--Waves Container-->
                <div class="waves wavekey">
                        <div class="wavesinner bgwave1">
                                <div class="wave wave1" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                                </div>
                        </div>
                        <div class="wavesinner bgwave2">
                                <div class="wave wave2" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                                </div>
                        </div>
                </div>
        </fieldset>
        
        <fieldset class="fieldset fieldset1">
                <h2>Terms & Conditions</h2>
                <div class="terms">
                <input type="checkbox">
                <p>I've read and agree with all the Terms & Conditions.</p>
                </div>
                <input type="button" name="prev" class="prev-fill action-button" value="Previous" />
                <input type="button" name="next" class="next-fill action-button" value="Next" />
                <!--Waves Container-->
                <div class="waves wavekey">
                        <div class="wavesinner bgwave1">
                                <div class="wave wave1" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                                </div>
                        </div>
                        <div class="wavesinner bgwave2">
                                <div class="wave wave2" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                                </div>
                        </div>
                </div>
        </fieldset>
    </form>
    
    
Customizing the link name is easy and can be done quickly.
 
    
    <!-- progressbar -->
    <ul id="ib-progressbar-fill-pack">
            <li class="active-link">Form 1</li>
            <li>Form 2</li>
            <li>Form 3</li>
            <li>Form 4</li>
            <li>Form 5</li>
    </ul> 
    
    
Customizing content is an important aspect of delivering a successful online experience.
 
    
    <!-- fieldsets -->
    <fieldset class="fieldset fieldset1">
            <h2>Parsonal Information</h2>
            <input type="text" placeholder="First Name">
            <input type="text" placeholder="Last Name">
            <div class="flx-bx">
            
            <select>
                    <option>Male</option>
                    <option>Female</option>
                    <option>Others</option>
            </select>

            <input type="number" placeholder="Age">
            </div>
            <input type="button" name="next" class="next-fill action-button" value="Next" />
            <!--Waves Container-->
            <div class="waves wavekey">
                    <div class="wavesinner bgwave1">
                            <div class="wave wave1" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave1.png')">
                            </div>
                    </div>
                    <div class="wavesinner bgwave2">
                            <div class="wave wave2" style="background-image: url('https://docs.ibsofts.com/wp-content/uploads/2023/02/formwave2.png')">
                            </div>
                    </div>
            </div>
    </fieldset> 
    
    

**Fieldsets are an important form field feature and serve as a way to organize and group related elements in a form.

How can we help?