Gravity Forms is a popular WordPress form builder plugin with extensive set of features which can let you create complex forms without any coding. It has more than one million active installs. Here are some of the features that will make you fall in love with this awesome plugin.
Drag & Drop: It is easy to add new fields within the form with drag and drop functionality. All you need to do is to drag the field to appropriate place. You can also arrange the fields by moving them around.
Conditional Logic: By using conditional logic you have dynamically show/hide fields depending upon user input in the form. This feature can be activated by navigating to field properte and then selecting conditional logic option.
Email Notification: This feature lets you get an email whenever a form is submitted. It is also possible to set conditional logic for email notification which lets you get the email only when certain fields are filled inside form.
Spam Protection: It comes equipped with multiple spam protection features. You can easily add Google recapcha as well as use honeypot mechanism to trick the bots and prevent submissions.
Limit Submissions: Sometimes it becomes necessary to limit how many submission should be make. Consider you are organizing an event with limited seats then the form shouldn't take more entries then the number of total seats. In such cases you can leverage the power of this Gravity Forms feature.
Ajax Support: Ajax lets you submit forms without reloading the page. Gravity Forms has inbuilt support for Ajax and it can be enabled from options while adding the form in page.
Border for Gravity Form can be set using custom CSS code or with the help of Styles & Layouts plugin. In this article you will know how to set border width, color , style and border radius. Here is brief of the various border properties.
border-width : This property defines the width of the border that will surround the header section. You can set its value in pixels (fixed size), percentage (variable size), em,cm or pt.
border-style : It defines how the border will look. It can be set to dotted, dashed, solid, double, grove, ridge, inset, outset, none and hidden.
border-color: Use this property to set color for border. Color names, hex codes are acceptable values.
border-radius: It defines the curvature at the corners of border.
Steps to Set Border for Gravity Form Header
Method 1: Styles & Layouts for Gravity Forms Plugin
This plugin is built on top of WordPress customizer API so that you get live preview of the style changes you make.
- Install and Activate Styler for Gravity Forms from official plugin repository.
- Open customizer from admin menu bar and the go to 'Styles & Layouts Gravity Forms' panel. Here you will get a section to select your form. It will have list of all the forms.
- After you select the page will refresh with an alert message.
- Now open Form Header section and here you will get the options to set border width, color, style and radius.
- Once you finalize your styling then click on Save and Publish button to save your settings.
Method 2: Using Custom CSS
Open style.css file of your active theme in your favorite editor( notepad, notepad++, sublime etc) and add the following code at the end of file.
body #gform_wrapper_**FORM_ID** .gform_heading {
border: 1px solid red;
border-radius: 2px;
}
Replace *FORM_ID** with actual form id
Code Explanation
body #gform_wrapper_**FORM_ID** .gform_heading => This code finds the header of Gravity form in the page.
border: 1px solid red => This CSS code sets 1px width for border with a solid style and red color.
border-radius: 2px => This will set the border radius to 2px.
If you face any issues with this tutorial then leave a comment here.
Tags:- How to Set Border for Gravity Form Header,Trick to How to Set Border for Gravity Form Header,How to Set Border for Gravity Form Header 2017,How to Set Border for Gravity Form Header in wordpress,wordpress gravity border,
Tags
Blogging Tricks