This tutorial will guide you through the process of styling the client onboarding form. We’ll be using a design created by our designer, so it’s advisable to have a designer for more complex designs.
If you don’t have a designer, don’t worry! This tutorial will also assist you in applying some simple styling to enhance the form’s appearance.
Design Preview
In this guide, we’re using our Scoop&Go theme and Elementor Page Builder for our WordPress website. The styling process is quite similar for other themes and builders.
Client Onboarding Form Styling – Initial Setup
As mentioned in the previous tutorial, after installing the plugin and adding the location, the initial step is to navigate to Client Onboarding > Setup. Ensure everything is configured there before proceeding to the next step, which is styling.
- Go to Client Onboarding > Setup tab
The initial preview of the setup tab
2. Next steps:
- Activate the client onboarding form
- Change “display select number of dogs as” to “Slider”
- Change “display cleanup frequency as” to “Slider”
After completing these, scroll down and hit “Save changes.”
Preview after saving changes
3. With the design prepared, proceed as follows:
- Go to Client Onboarding > Styling tab.
- Upload icons for “Icon for number of dogs” and “Icon for clean up frequency”
- Save Changes
Upload the slider icons
4. The next step is to set up for both sliders:
- Slider bar size
- Slider icon size
- Slider bar color (selected)
- Slider bar color (deselected)
- Label text color (selected)
The exact sizes for the slider bar and icons are flexible. Feel free to experiment to find what works best.
5. The design features a blue background with part of the form overlapping it. We’ll guide you on how to create this effect:
- HTML code
Please go to Sweep&Go > Pages > Client Onobarding and click on the “Edit” to edit the page:
In the text area switch to the “Text” tab so you can add the HTML code there:
The HTML elements that we targeted in this step and designed are:
- CSS class: form–bg-section
- CSS class: content-area
- CSS class: type-sng-page
- CSS class: page-header
- CSS class: entry-title
Next, navigate to either the child theme or “Appearance > Customizer > Additional CSS” to save your CSS. To specifically style the “Client Onboarding” page, use the following CSS:
body.sng_page-template-sng-client-onboarding-template-php .form-bg-section {
display: block;
background-color: #00ACC1;
width: 100%;
height: 380px;
}
body.sng_page-template-sng-client-onboarding-template-php .form-bg-section {
display: block;
background-color: #00ACC1;
width: 100%;
height: 380px;
}
body.sng_page-template-sng-client-onboarding-template-php .content-area {
margin-top: -265px;
position: relative;
z-index: 3;
}
body.sng_page-template-sng-client-onboarding-template-php .content-area .type-sng-page {
max-width: 740px;
margin: 0 auto 40px;
background: #F3FBFC;
border-radius: 27px;
padding: 30px 50px
}
6. In this step, we want to style the form title as on the design:
First, return to the WordPress dashboard. Navigate to Sweep&Go > Pages > Client Onboarding. Wrap “Onboarding” in a tag and save the changes.
Next, switch to the frontend and target the tag to view the changes:
Don’t forget to save these CSS changes in your theme!
body.sng_page-template-sng-client-onboarding-template-php .content-area .type-sng-page .page-header h1.entry-title span {
font-weight: bold; color: #00ACC1;
}
7. Our focus is going to be styling the:
- Labels
- Input fields
- Adjusting the gap between the slider and label above (Number Of Dogs* and Cleanup Frequency*)
- Dropdown
- Get Free Quote button
Preview before making those adjustments
Just for quick reference, this is what our CSS for the input field looks like:
form#client_onboarding_form input[type="text"] {
border-radius: 50px;
font-size: 17px;
padding: 10px 20px;
color: #444444;
}
CSS for the Number of dogs slider:
.sng-div-number-of-dogs {
margin-top: 2.5rem!important;
margin-bottom: 4rem!important;
}
Preview after making CSS adjustments
8. After choosing “Last Time Yard Was Thoroughly Cleaned” and clicking “Get Free Quote,” the form will expand. Let’s style this expanded section now:
Preview before making any CSS changes
Most CSS modifications occur within the DIV having the class “sng-pricing-table”.
Here’s an example of the CSS for the initial estimate section:
.sng-pricing-table #sng-initial-estimate {
background: #F3FBFC;
max-width: 80%;
width: 100%;
margin: 0 auto;
border-radius: 0px;
color: #444;
border: none;
font-size: 18px;
padding: 20px 30px;
}
Preview before making any CSS changes
We recommend testing how these changes appear on mobile devices as well. Don’t forget to check this.
If you have any questions, please contact us: https://www.sweepandgo.com/contact/
