In today’s rapidly evolving digital landscape, a disjointed user experience can severely hinder the success of any online marketing campaign. One frequently neglected aspect is the design and style of the previous and next buttons on multi-part or multi-step forms.
As digital marketers, we must address the pressing issue of poorly customized buttons, which can lead to a subpar user experience, stagnant conversion rates, increased form abandonment, and a lack of personalization.
In this post, we’re going to show you how to create custom previous and next buttons for your multi-part WordPress form. We’ll be using the Layout and Styles add-on to style your form in a way that makes sense according to your brand.
Let’s get started.
Customizing Previous and Next Buttons with Layout and Styles from Ninja Forms
Let’s dive into how to customize your buttons with the Layout and Styles add-on.
Step 1: Install and Activate the Layout and Styles Add-on.
First things first, install and activate the Layout and Styles add-on. After it’s activated, hover over Ninja Forms in the menu dashboard, and look for a new item called, Styling. This will take you to Style Settings. This is where we will begin our journey of the MultiPart form customization.
Click on the MultiPart Styles tab to reveal the customization settings for your Multi-Step forms. You should see the following sections:
- Breadcrumb
- Progress Bar
- Part Titles
- Navigation
- Previous Button
- Next Button
- Navigation Hover Styles
Today we were going to focus on the Previous, Next, and Navigation hover styles. Below I will show you how to change the background and text color of your buttons. I encourage you to look around at the other settings once you have a feel for things.
✨ The Opinionated styles found in the Ninja Forms settings overrides the Multi-Part buttons. To fix this, head over to Ninja Forms > Settings > Opinionated Styles and set it to None. Depnding on your theme, you many need to adjust your form fields. For help refer to our easy examples stying guide. ✨
Step 2: Customize your Previous Button.
To keep things simple, we are going to show you how to change the background and text color of the button.
- Open the Previous Button Styles drop-down.
- Click on Select Color to choose a color for your Previous button’s Background Color. I’m going to choose red ( #ef4748).
- To change the Text Color, click on Select Color. I’m going to choose white, ( #ffff )
- Save Settings
- Preview your form.
Step 3: Customize your Next Button.
Just so we get a feel for things, we are going to keep things simple and show you how to change the background and text color of the button.
- Open the Next Button Styles drop-down.
- Click on Select Color to choose a color for your Next button’s background color. I’m going to choose red ( #ef4748).
- To change the Text Color, click on Select Color. I’m going to choose white, ( #ffff )
- Save Settings
- Preview your form.
Step 4: Add hover styles to your buttons.
By default, the background color of the hover on the previous and next buttons turns to “x.” I’m not a fan of that, so I’m going to change the background to blue. I’m going to keep the text white, so I won’t need to change the text color.
- Open the Navigation Hover Styles drop-down.
- Click on Select Color to choose a hover background. I’m going to choose blue ( #3d83db).
- Save Settings
- Preview your form.
I want the styles to be form specific.
Ok, so what do you do if you don’t want every single form to have the exact same styles? I have an answer for that, and it involves heading over to your form.
Once you are in your form, click on the Advanced tab, then click on Multi-Part, look for the Styles dropdown, and voila. You have access to the same style settings you saw in the Style menu.
Forget CSS. Use Layout and Styles to personalize your previous and next buttons today!
There you have it! In this guide, we showed you how to make your previous and next buttons look stunning with the Layout and Styles add-on. From customizing the button appearance to adding a personal touch to it, you can give your WordPress form a unique look that matches your brand.
Add the Layout and Styles add-on to your form-building toolbelt today. It comes included with our Plus, Pro, and Elite memberships. And with a no-risk 14-day money-back guarantee, it’s a clear choice.
As a digital marketer or freelancer, you know that personalized buttons provide a better user experience, leading to higher submission rates, which ultimately helps grow your business.
So, why wait? Add the Layout and Styles add-on to your form-building toolkit today.
