Blog Posts - WpMonks
Text input fields are used in Gravity forms to capture single line of text. You can use them to ask for full name, profession, education qualifications etc. Even some advanced fields like Name, Address, phone number are also type of text input fields. In this tutorial I will teach you how to you can do the following styling:
- Set Background color
- Set border width, type, color and radius
- Set Font color and font size
- Set maximum width
- Set margin and padding
Tutorial to Style Text Fields using Free Plugin
- Download and install free Gravity form designer plugin. This plugin will solve all your designing needs for Gravity Forms. Once it is activated, open customizer by navigating to the page in which form is embedded in front-end and then click on Styles & Layouts Gravity Forms options.
- Select the form for which you want to style text fields. You will be automatically alerted for page refresh . Click on OK button and again navigate to Styles & Layouts Gravity Forms section.
Here you will get a separate section for Text Fields. Inside this section you will get the following options
- Maximum width: This will set the maximum width for text input fields. Its value can be set in pixels, percentage, centimeter or any browser supported unit.
- Font Size: This field is used to set font size of input for text fields.
- Font Color: This will set the color of font for text inputs. You can use the color picker to select the color or enter hex codes.
- Border Size: This field is used to set the border around text fields. If you don’t want any border the set its value to 0px.
- Border Type: It will set the type of border like solid, dotted, dashed.
- Border Color: Similar to font color but it works for borders.
- Border Radius: This add curvature to border corner. If you want to make your text input fields round then use a bigger value like 10px inside this field.
- Background Color: Background color will add a background inside text inputs.
- Margin: This setting is used to add space between adjacent element. It can be used to increase or decrease gap between two inputs.
- Padding: This setting acts adds the space in text inputs from its container.
After you make the desired changes click on Save & Publish button. All your settings are now saved and they will be shown to your website visitors.
Here is video tutorial about how to use this plugin
Steps to Style Text Fields using CSS Coding
Use this method if you have some experience of coding otherwise you can use the free plugin method. For changing the styling attributes you need to add the following CSS code
This CSS code will target all the text input fields present inside the form. Whatever attributes you will add inside this will work on text inputs. In the above code I have added border, font-size, color, border-style, margin and padding attributes.
You can also add any other attributes . If you need more info or have any questions then leave a comment below and I will help you.
Checkbox inputs are used in a form when a user can select more than one choice from list of multiple choices. If you have created a form to get information about user’s hobbies then it is more appropriate to use checkboxes as a user can have multiple hobbies. By the end of this tutorial you will be able to
- Set font size for checkbox inputs
- Font color of checkbox inputs
- Maximum width of checkbox inputs
- Padding for input boxes
If you want users to select only a single option out of a set of options then you can use and style radio inputs in your Gravity form.
Customize Design of Checkbox Inputs of Gravity Forms
To change the design of Gravity Forms checkbox inputs you don’t need to install any template/theme pack. You can do this using Styles and Layouts for Gravity forms plugin. You can style the complete form by changing its CSS attributes like colors, fonts, borders, margin, padding etc without the need of coding.
Modify Styling of Checkbox Inputs using Styles and Layouts plugin
- Install and Activate Styles and Layouts for Gravity Forms plugin form WordPress.org plugin repository. You can also do a quick search for ‘Styles and Layouts’ from ‘Add New‘ submenu of Plugins in WordPress dashboard to install the plugin.
- Open the page which has the Gravity form you want to design. Now click on the customize button. It will open customizer in the left sidebar. Customizer is a WordPress core feature that lets user design the various aspects of the website with live preview. Style and Layouts plugin hooks directly inside Customizer Sidebar so that you can easily design Gravity forms.
- Once the customizer is open then look for Styles & Layouts Gravity Forms menu. Inside this menu you will get the option to select Gravity form. Select the one which you have in your current page. Now Styles and Layouts plugin will automatically save the form and load the designing options after page refresh.
- Again go to Styles & Layouts Gravity Forms and then navigate to Checkbox Inputs.
- Here you will get the option to change font colour, width and padding for all the checkbox inputs fields present inside the form. Width and padding can have values in px, % and em. For setting the colour of checkbox inputs font you can use the inbuilt colour picker or add hex code.
- Save your changes by clicking on Save and Publish button.
Here is the video tutorial to change the design of Checkbox inputs
Modify Styling of Checkbox Inputs with CSS Coding
The CSS code required to change the font color, padding and width of checkbox inputs is as follows
Note:– Replace FORMID with real form id of your Gravity Form
After you have saved the above CSS code in your style.css file then you will notice that the font color is set to blue. The maximum width is now set to 150px with padding around the inputs to 19px.
You can change the value of above attributes to whatever that looks best on your website.
After making changes you should clear the cache of your browser as sometimes cached CSS file is loaded.
If you need any help about this tutorial then leave a comment below.
Radio buttons are used in form to let users select a single option out of multiple alternatives. It is possible to change layout as well as style of Gravity Forms radio buttons. By the end of this tutorial you will be able to
- Divide radio button choices into multiple columns
- Set font size for choices
- Set font color for choices
- Set width for choices
- Set Padding
How to Divide Radio Inputs into Multiple Columns
To change the layout of radio inputs we can use CSS Ready Classes that are built into Gravity Forms 1.5 and later versions.
To use CSS ready classes edit the form field in backend and then navigate to Advanced section . Here you will get the option with title “CSS class name“. This is the place where CSS Ready Classes should be entered.
To divide the radio inputs into 2, 3, 4, 5 columns use gf_list_2col, gf_list_3col, gf_list_4col and gf_list_5col classes respectively. This will divide the choices into columns so that they are equally spaced from each other.
Use gf_list_inline and the choices will have horizontal layout without equal spacing.
How to change the design of Radio buttons
For changing the design of radio buttons without any plugin you need to add the following lines of CSS code in your WordPress website’s stylesheet.
- body #gform_wrapper_1 => This code will locate the main form wrapper element in HTML whose form ID is ‘1’ . Its value should be changed to the actual form ID. If you want to have the same styling for all the forms then you can leave ‘_1’ from the above code and the styling will now work on all the Gravity Forms .
- .gform_body .gform_fields .gfield .gfield_radio li => This code is used to find the radio inputs present inside form.
- font-size: This will set the font size for radio input choices. You can set its value in pixels, percentage or em. In the above example I have set the font size to 19 pixels.
- color: This attribute will set the color of radio input choices. You can give standard english colour names, hex codes or RGB values.
- width: This will set the maximum width for the radio input choices. If the text is larger then the width then it will automatically shift to next line.
- padding: padding is used to add space between adjacent radio input choices.
Changing Design of radio buttons using Styles and Layouts Plugin
With Styles and Layouts for Gravity Forms plugin it is possible to do all the above design without writing a single line of code. Moreover this plugin is not limited to designing of mere radio fields but it covers all the segments of the form like header, sutbmit button, title and description styling and much more.
Follow these Steps to Change the Styling of Radio Inputs using Plugin
- Download and activate it in your WordPress installation from here.
- Now open customizer on the post where the form is embedded.
- Click on the Styles & Layouts Gravity Forms panel and then select the form.
- Now navigate to Radio Inputs section. Here you will see all the designing options for radio buttons. Simply edit the settings preview the changes live on your website.
- You can set maximum width, font color, font-size and padding from here.
- Once you have finalized the display, click on Save and Publish Button to publish the changes.
There are no additional steps required. If you will open the form without login then it will look exactly the same way you designed it.
Here is the video tutorial to show you how easy it is to use
Leave a comment for any question regarding this tutorial.