Blog

Create multipage registration forms in WordPress

How to create multipage multistep registration forms in WordPress?

Multipage Registration Forms in WordPress

Multipage registration forms are common on WordPress sites. Not everyone needs a single page registration form with all fields stacked one above the other. Some registration forms are large while some forms need to have sections within them. A good example would be a registration form asking for personal details in one section and business information in another. Therefore, many registration forms we fill in real life (the one printed on good old paper) have multiple leafs, whether clipped or pinned together, to separate sections and large number of fields.

RegistrationMagic always tried to give power to the admins to move their offline multipage registration forms processes, online. Multipage registration forms in WordPress are natural evolution in this line. Multipage registration forms is one of the many powerful features of RegistrationMagic Premium. RegistrationMagic form pages are created and managed from the Field Manager section of a form. Pages are represented as containers of fields, stacked vertically. See the image below for reference:

Multipage Registration Forms

 

Multipage Multistep Registration Pages

There’s always a Page 1 and we can add subsequent pages by clicking Add Page link below the last page. The pages do not necessarily be named Page 1, Page 2… It’s the default nomenclature that RegistrationMagic follows. To rename a page, we click on setting icon at the top right of the page. A popup box will appear with a text box to type in the page name.

 

Multipage registration forms

 

For this demonstration, we will name the first page as “Personal” and second page as “Business”. User will be able to submit the registration form from second page.

 

 

After going through the renaming process, here’s how the Field Manager looks like:

 

RegistrationMagic Multi Form

 

See the names on the top of each page now says Personal and Business respectively? Let’s move ahead and add few random fields to both pages and publish it on the site using short code.

 

Tip: You can disable the Previous button on multi-page forms by checking the box Hide “Previous” Button at the bottom left of the Fields Manager page.

 

Multipage registration forms front-end-view-1

Here’s the first page of the form on front end. Notice a new button Next (otherwise not visible on one page forms)? It is a navigational button that allows users to go to the next page of the form. Clicking on Next button will move user to the next page of our form, which we had named “Business”.

Multipage registration forms front-end-view-2

 

Navigating to the next page will reveal a new Prev button. This is the button that’ll navigate back to the previous page of the form. Since this is the last page of our form, the Submit button will also be revealed. When user clicks the Submit button the form data is sent to RegistrationMagic database.

Registration Forms Page Reordering

With RegistrationMagic multipage forms, you also have the option to reorder your form pages. Let’s say you don’t like the default order of your form pages, which is Page 1 followed by Page 2 and so on. You can reorder the pages by clicking on the stacked lines icon at the top right of any page.

This will open up a popup where you can reorder the pages by dragging and dropping the page blocks. Once you are done with your reordering changes, click on the Done button to save your changes.

Your form pages will now appear in the new order that you have configured.

Multipage Registration Forms Configuration

One more thing – you should have also noticed the page names appear on top of each page above the form front end. Right now they are plain and pretty generic. If we want, we can easily style them. This is done from View section of Form Configuration.

 

Multipage registration forms view

 

Inside, click on the topmost pulsating circle to open Form Styling panel. There are 3 setting inside this panel which directly style the view of the Page name:

  1. Section Background Color
  2. Section Text Color
  3. Section Text Style

Multipage registration forms styling-section

 

I have fiddled around and tried to make section name standout a little. Also added few icons. You can always style it based on your theme color. Our form looks like this now:

 

Multipage registration forms styled-page

 

Coming back to the dashboard, Multipage registration forms submissions look like normal single page submissions with all fields and their values in vertical order.

 

Multipage registration forms submission-view

 

This is only but the start. In coming days Multipage registration forms system will be fleshed out even further with more customization options and presentation settings.  Until next time!

About RegistrationMagic

RegistrationMagic Editorial Staff (rmagic) is a team of WordPress registration experts and major contributor to the development of RegistrationMagic - WordPress User Registration Plugin.
Subscribe
Notify of
guest

11 Comments
Inline Feedbacks
View all comments
Kenny
Kenny
2 months ago

Can you move fields across pages or copy fields from one page to another? Thank you

RegistrationMagic
Admin
RegistrationMagic
2 months ago
Reply to  Kenny

Hi Kenny,

Fields can only be moved within their own page. We will plan on adding this functionality in a future update.

Paviado
Paviado
4 years ago

Hey guys, is the information in one of the pages saved automatically when clicking ‘next’, or only when clicked on the final ‘submit’? As in, is it saving also not 100% completed forms?

RegistrationMagic
RegistrationMagic
4 years ago
Reply to  Paviado

The information will be saved only on clicking the final submit button.

Donard
Donard
5 years ago

how can i remove the prev button on the first page only ?

RegistrationMagic
RegistrationMagic
5 years ago
Reply to  Donard

In the newer version of RegistrationMagic, the shortcode removes prev button on the first page. You may update to the latest version and verify.

Bee
Bee
5 years ago

Can fields be moved from one page to another, to convert an existing form to multipage?

RegistrationMagic
RegistrationMagic
5 years ago
Reply to  Bee

You will need to add new pages and fields separately to convert form to multipage form. Please note that existing fields are not movable to newly added pages though.

Kenny
Kenny
2 months ago

It will be great to add that functionality, or at least be able to copy fields from a page & paste them in another.

zahra
zahra
5 years ago

hi, how can I have multipage registration forms in version 4??
I can’t find page!!!

RegistrationMagic
RegistrationMagic
5 years ago
Reply to  zahra

To create a multi-page registration form, go to RegistrationMagic > fields of the form > click on ‘new page’ to add a page to the form and now add required fields to this page.