If you are reading this, we assume that you are aware of what is Ninja Form and what is a submit button. Still, let us brief about it.
What is Ninja Forms?
Ninja form is a popular plugin from WordPress which can be used to create any type of form.
What is a submit button?
Submit button is a form field that is placed at the end of a form. Responses are either saved somewhere or emailed after clicking on it.
Styling Ninja Form submit button?
For adding styles to Ninja form, you need a plugin Styler for Ninja Forms. Install it from your WordPress dashboard.
Steps to follow
- Once you are done with installing Styler for Ninja Forms, Open frontend of the page where the form is added and look for customize button on the top in the admin menu.
Customizer button at top of page - After clicking the button select the ‘Styler for Ninja Forms’ option from the sidebar as shown in the image below.
“Ninja forms Styler” section in cusotmizer - Now you will be asked to select the Ninja form of your choice to edit. Select it to proceed further.
submit section to style ninja forms button - After this step, all sections of the form for styles will be listed in sidebar. Select the ‘submit button’ as shown in the image below.
Style options for Submit button
You will get all styling options for the Submit button after that. Please have a look at the images. We will discuss them one by one.
A brief overview of styling options.
- Width: Width of the submit button. You can specify different widths for different screen sizes.
- Font Size: You can specify different font sizes for different screens.
- Height: Height of the submit button.
- Font Alignment: You can align the submit button text as per your requirement from here.
- Button Color: Change the background color of the button. Click and choose a color like an image below.
Background color for Submit button - Hover Color: This color will visible when someone hovers the cursor over the submit button.
- Font Color: Color of the submit button text.
Font color for Submit button - Hover Font Color: Color of the submit button text on hover.
- Border: it is used to style the border size, type, and radius of the button.
- Border Color: Color of the border. See this image for border controls.
Border options for Submit button - Padding: Padding is the spacing of the element from the containing element inside the container.
- Margin: Margin is the spacing of the element from the adjacent elements.
Final Step
When you are done with all the required changes, click on the publish button on the top.
Great ! You have styled your submit button successfully. Thanks for reading.