en-USzh-CNes-ESfr-FR
Search
You are here:Support  >  Articles
Articles
How to create a multi-step form through DNNSmart.QuickForm module?

How to create multi-step forms?

When you want to create a multi-step form, you need to consider three things. The first is how to create multiple steps. The second is how to add your controls in each step. Third, how to debug the appearance of the whole form. In the following article, we will introduce these three aspects in details.


How to manage steps?

After you install the module and add it on a page, you can click "Dashboard" and enter the following page.

这里是图片

1.In default, step name of the first step is "Step1". You can input your step name in area#1 and then click "Save" button. Please refer to screenshot below.

这里是图片


2.When you want to add more steps, please click "Add New Step" button and enter following inerface.

这里是图片

You can input your step name and click "Save" button.

3.If you find that we added the wrong step name, how can we delete this step? Please see screenshot below.

这里是图片

For example, if you want to delete the third step--"Employment History".
#1, please click this step.
#2, please double check the step name to make sure it is the one you want to delete.
#2, please click "Delete Step" button.

How to add controls in each step?

1, First of all, please choose the step which you want to add controls in. See below, we can click the step number, then it will take us to that step. For example, we click step 1.

这里是图片


2.According to the prompts on the page, please select and drag the control you want to add in the form and then drop it.

这里是图片

#1, For example, we want to add Agree control. Then we select and drag it.
#2, We drop it in this area.
#3, You can configure this control, please refer to our user manual.

3.When we finish adding one control, how could we add the next one? After we finish adding one control, it will automatically appear a new row at the very bottom. Then we can drag and drop our next control in this new row. See the screenshot below.

这里是图片


4, If we want to insert a new control between two added controls, how could we operate? See below, how could we add a new control between "Agree" and "Checkbox"?

这里是图片

Please put your mouse over the "Checkbox" row, then it will appear one plus icon as below.

这里是图片

You can click this plus icon, then it will appear as below.

这里是图片

A new row is inserted successfully, then you can drag your new control and put it in this new row.

More Info

For each row, there’s one sort icon and delete icon included. See below.

这里是图片

#1, this is the sort icon. This icon can help you drag and drop this entire row to other row as you want.
#2, this is the delete icon. This icon can help you delete the entire row including all controls in this row.
Tip: Please notice the difference between it and the delete button next to each control. For the delete button next to each control, it can only delete this one control.

How to adjust the appearance of the form?

There are two tabs including options for adjusting the appearance. For the tab "Form Styles", it can help us change background color, text color, control border color, control background color, control text color, button background color, button text color and the width of field title. For details, pleae refer to our user manual. For the tab "Multi Step Options", it can help us adjust the appearance of the step bar.

这里是图片

Display Step Name option
If this option is checked, the step name will display in the front-end. See below.

这里是图片

Otherwise, it won't display step name and only step numbers will display. See below.

这里是图片


Display Progress Bar option
If this option is checked, a progress bar will display in the front-end. This progress bar indicates the percentage of the form completed by the user. See below.

这里是图片

If unchecked, there's no progress bar displayed.

Multi Step Theme Color option
After you click this control, a color picker will display as below.

这里是图片

Through this option, you can pick one color theme and front-end will display as below.

这里是图片


That's all! Thanks for your reading. I believe that you would know how to create a multi-step form after reading this article. If you have any question, please send an email to us directly.

about author

DNNSmart

Developer

Although DNNSmart was newly founded in August 2012, we devoted to DNN development work since 2008. We specializes on the DotNetNuke (DNN) Content Management System including DNN skin design, DNN programming and website construction. Our development team is located in China, our professional and outstanding developers are passionate about web design, programming and web applications.

Comments (0)

    Leave a comment

    2000 character(s) remaining. Comment limited to 2000 characters.
    Post Comment
    Support
    Search
    Calendar
    Categories
    Authors
    Archives
    Most
    • online quran says: Online Quran

      Sep 30, 2019
    • iwantcheats says: Iwantcheats

      Sep 30, 2019
    • Online Quran Academy says: Online Quran Academy

      Sep 30, 2019
    • Learn Quran Online says: Learn Quran Online

      Sep 30, 2019
    • bilal khan says: Stunning! This could be one unequivocal of the most productive regions We ave ever get together transversely over as for this issue. Genuinely Excellent. I am in addition an expert in this subject so I can comprehend your exertion.



      Walnoten

      Sep 29, 2019
    • macrame toran says: Thanks for this beautiful blog if you want to learn macrame arts then contact me any time

      Sep 28, 2019
    Home   |   EffectCollection   |   DNNSmart Store   |   Membership   |   Free Downloads   |   Support   |   Service
    Quick Contact