Introduction – Create Multipage Registration Forms in WordPress
Multipage registration forms are common. 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. 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 were introduced in v 3.1.7 Gold Edition. Pages are created and managed in Custom Field Manager section. Pages are represented as tabs on left side of the fields. See the image below:
Multipage Registration Pages
There’s always a Page 1 and we can add subsequent pages by clicking New Page link below the last page’s tab. 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 the page tab that we want to rename and press Rename Page on top of the custom fields area. A popup box will appear with text box to type in the page name.
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:
See the tabs on the left side now say Personal and Business? 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. This feature is only available in RegistrationMagic Premium.
Here’s the first page of the form on front end. Notice a new button Prev (otherwise not visible on one page forms)? It is a navigational button that allows users to go back to the previous page of the form. Currently the Prev button is disabled (and faded out) since there is no previous page.
Clicking on Submit Button will move user to next page named Business.
This is the last page in our registration form. When user clicks the Submit button the form data is sent to RegistrationMagic database. Noticed the active Prev button on Business page? Being on Page 2, it is active now and user can go back to Personal page by clicking it.
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.
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:
- Section Background Color
- Section Text Color
- Section Text Style
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:
Coming back to the dashboard, Multipage registration forms submissions look like normal single page submissions with all fields and their values in vertical order.
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!
- How to display registration forms on WordPress site? - July 26, 2022
- Create Your First WordPress Registration Page – Starter Guide - July 13, 2022
- Setup payments on Registration form using Products [Payments Guide] - June 10, 2022
- WordPress Registration Shortcodes List - April 14, 2022
- WordPress User Registration Status Guide - April 9, 2022
- How to add or update user profile fields using WordPress forms - August 5, 2020
- Boost RegistrationMagic User Profiles With ProfileGrid Integration - February 19, 2019
- Advance WordPress User Login Plugin Guide - August 8, 2018
- Create Intelligent Contact Form in WordPress [Breakthrough Ideas] - February 8, 2018
- How to Add Custom Fields to WooCommerce Checkout Form - November 3, 2017