Example of what a border-radius looks like when added to WordPress form fields
Adding rounded corners to WordPress form fields should be a quick and easy task. But often, it can be a real headache getting your WordPress form to do what you want.
Not only do you encounter issues with competing stylesheets, but oftentimes you are required to learn a new set of style classes just to be able to make a few quick tweaks.
With our Layout and Styles add-on, we’ve made it easy.
Forget about creating new stylesheets or learning new classes. Instead, spend time refining your form in minutes rather than days. Below we’ll run show you how to use Layout and Styles to make your square fields round with just one line of CSS.
How to add rounded corners to your WordPress form fields
First, determine whether you want all of your form fields to appear with rounded corners or just a specific form. If you want ALL form field corners rounded, See method 1; otherwise, move on to method 2.
Method 1: Add rounded corners to ALL form fields.
If you are following a branding guide for your website, chances are you want all the forms to appear uniform sitewide. With the Ninja Forms Layout and Styles add-on, that is very easy to do and doesn’t require the use of stylesheets. Head over to the Ninja Form menu and navigate to Styling > Default Field Styles > Element Styles.
From here, Toggle on Show Advanced CSS Properties, and add border-radius: 20px; the Advanced CSS field. Save Settings, and view your form. Done, easy as that.
Method 2: Add rounded corners to INDIVIDUAL form fields.
If your forms are going to be a vehicle for landing pages, this is the method for you.
Assuming you’ve generated your form and installed Layout and Styles, you can access the styling settings of your form by hovering over the form field and clicking the gear icon. Look for the Styles dropdown and open it up. Consider this your “style playground,” where you can change colors, widths, fonts, margins, and more.
Find the Element Styles section. This is the part of the field that users type their responses into. To make rounded corners, we will give the form element a border-radius value, as it is set to 0 by default.
Toggle on Show Advanced CSS Properties, and add border-radius: 20px; the Advanced CSS field. Repeat the process for the rest of the fields, and that’s it.
🔥 Hot Tip 🔥
Instead of applying styles one by one to every field, clone your form field after applying the styles. This will save you time, and its easy. Hover over the gear icon then the clone button.
To increase the roundness of the border, crank up the radius by adding a larger value. Otherwise, add a smaller value to reduce the radius. That’s it, you got it!
To enhance your form field further, play around with the Border Width, Border Style ( Solid, Dashed, Dotted ), and Border Color. By default, the border is set to 1px solid #c4c4c4;
Congrats! Adding rounded corners to your form fields with Layout and Styles is a breeze 👨🏽💻
Now that you know how to create rounded form fields with the Layout and Styles, put your new styling skills to work and see what other creations you can come up with.
Did you know pairing Layout and Styles with the Multi-Step Forms add-on unlocks access to a hidden styling section called MutiPart Styles? It includes settings to style breadcrumbs, the progress bar, part titles, and the previous and next buttons too.
Get the Layout and Styles add-on for Ninja Form today.
Besides styling borders, you can change text and background colors with the built-in color picker. Need to create a multi-column layout but don’t have time to implement Flexbox or CSS grid? Don’t worry; with our easy-to-use drag-and-drop, you can create an advanced multi-column layout in just minutes.
Unlike our competition, you can get Layout and Styles on its own or as part of a membership. As one of the most popular add-ons Ninja Forms offers, you won’t regret it.
