Are you looking to quickly change the size of your form fields in your form without the hassle of coding or editing your WordPress theme’s stylesheet? Look no further!
With Ninja Forms styling plugin, Layout & Styles, you can easily adjust the width of your form fields. In today’s tutorial, we will show you how to resize your form fields, and also, how to make your fields rounded instead of the default rectangular shape. Let’s dig in!
Table of contents
- How to adjust the width (length) of the WordPress form fields?
- How to change the length of form fields in a two-column layout?
- How can you make the form fields have rounded corners?
1. How to adjust the width (length) of the WordPress form fields?
The width of your form fields should depend on your design goals but one factor that plays a big role in designing your fields is the type of data you are collecting. Based on that, you may need to adjust the size of the input fields.
For example, while the Zip code field size can be relatively short, the mailing address field should provide enough space to accommodate the user typing all the necessary information.
In this tutorial, we selected the Email field to demonstrate how to change the size of your form field. We will show you how to adjust the length (width) of your form field from this:
Into a shorter length:
Once you install the Layout & Styles add-on, you will see an additional form settings called Styles under the Email field.
Open the Styles settings and find the Element Styles section. Navigate to Width and enter 230px to modify the default length size of your form field. This simple adjustment will make your field shorter than the default longer size.
Additionally, you can adjust the size of your form fields by using a two-column layout. This involves dragging and dropping form fields to align them in two columns. We will demonstrate this in the next section.
2. How to change the length of form fields in a two-column layout?
In our previous example, we showed you how to change the size of a form field using the Style settings. We applied this example to a single form with form fields aligned in one column.
However, if you have a form with a two-column layout, there is a trick to adjusting the width of a form field differently. But before we show you that, here is how you can easily create a two-column form layout with Layout & Styles add-on:
Now that you know how to create a two-column layout, you can easily adjust the length of your form field and you don’t need any CSS to get this done. All you have to do is click on the new column bar and move it left or right with your mouse.
Using the Resize bar (a grey vertical line), you can adjust the width of fields between columns. As you move the Resize bar back and forth, percentages will appear, indicating the relative size of each column.
If you want to use this trick on your single-column form, delete the field from the second column but don’t delete the column.
3. How can you make the form fields have rounded corners?
With the Layout & Styles add-on installed, you will access an additional “feature tab” called Styles, that unlocks multiple customization options for your fields. We selected the Email field for our example below.
Once you open the Styles tab, find the section Elements Styles. This is an area where you can play around and customize the look of your form field.
Navigate to Show Advanced CSS Properties and toggle the button on, so it is green as shown in our screenshot below.
This will display an additional field. Here, you can type in and write CSS rules. To add rounded corners to the Email field, enter the following:
border-radius: 20px;
This trick will turn this rectangular-shaped email field:
into this:
You can change the size of the rounded corners by changing the value of 20px. For a more rounded effect, you will increase the number. (e.g. 40px) For a smaller rounded effect, you will decrease the number.
That’s it! This is how you create an input text box with rounded corners.
Don’t want to show the Email label above the field? Hide the form label and use a placeholder instead! Learn more about placeholders in our tutorial How to Add a Placeholder to a WordPress Form Field.
Explore styling possibilities with the Layout & Styles add-on
The Layout & Style add-on is a powerful styling plugin that offers a wide range of customization features for your WordPress forms. With this add-on, you can do the following:
- Want Row & Column Form Layouts? Just Drag & Drop!
- How To Style Your WordPress Forms (Easy Examples)
- How to Customize WordPress Forms (Font Styling)
- How to Make a Single-Line WordPress Form (Three Steps)
- Quickly Style Your WordPress Forms Checkbox and Radio Fields with One Line of Code
- Add Style to Previous and Next Buttons on your WordPress Form
- How to Style Submit Button in WordPress
- Add a Gradient to Your CTA Button in WordPress
- How to Make a Gradient Submit Button for your WordPress Form
- How to Change Button Hover Color in WordPress
Stop struggling with complicated form customization solutions and choose an easier alternative with a styling plugin from Ninja Forms!
And in case you are a DIY person, feel free to check out our guide How Do I Use Custom CSS? and Want to Add Custom CSS to WordPress Forms (a Beginner’s Guide).
Lamborghini top speed says:
Your expertise on this subject shines through in this post.