By Neil on September 5, 2014
See lots more Gravity Forms tutorials here.
This is a detailed Gravity Forms tutorial working through every single step of the creation and stlying / formatting of a multi-page form that uses conditional logic and custom CSS styling. The first page of the form asks for general information such as name, email, and age range. The second page asks some survey questions and uses multiple choice radio fields.
[mashshare]
Step-by-step tutorial to come soon but for now all the CSS styling and the code needed to make the TAB feature work correctly is shown below.
All CSS styling code for the style.css Stylesheet from this tutorial (my Gravity Form had an ID of 10):
/*Remove default styling from gravity forms */
body .gform_wrapper form .gform_body ul,
body .gform_wrapper form .gform_body ul li {
list-style-type: none !important;
list-style-image: none !important;
list-style: none !important;
background-image: none !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important
}
body .gform_wrapper form .gform_body ul > li:before {
content: “”;
}
/*Style the form wrapper */
body #gform_wrapper_10
{
margin-left: 5%;
}
/*Style the form fields */
body #gform_wrapper_10 .gform_body .gform_fields .gfield
{
width: 280px;
float: left;
margin-right: 10px !important;
margin-bottom: 15px !important;
}
body .gform_wrapper .gform_body .gform_fields #field_10_3.gfield
{
float: left;
width: 280px;
clear: left;
}
body #gform_wrapper_10 .gform_body .gform_fields .gfield input[type=email]
{
height: 55px;
}
body #gform_wrapper_10 .gform_body .gform_fields .gfield select
{
height: 55px;
}
body #gform_wrapper_10 .gform_body .gform_fields .gfield .gfield_label
{
font-size: 18px;
}
/*Style the form buttons */
body #gform_wrapper_10 .gform_body .gform_page_footer .gform_next_button
{
float: left;
clear: both;
width: 150px;
height: 55px;
background: #0083a9;
font-weight: bold;
font-size: 20px;
margin-top: 30px !important;
}
body #gform_wrapper_10 .gform_body .gform_page_footer .gform_next_button:hover
{
float: left;
clear: both;
width: 150px;
height: 55px;
background: #00a7d7;
font-weight: bold;
font-size: 20px;
margin-top: 30px !important;
}
body #gform_wrapper_10 .gform_body .gform_page_footer .gform_previous_button
{
float: left;
clear: both;
width: 150px;
height: 55px;
background: #0083a9;
font-weight: bold;
font-size: 20px;
margin-right: 10px !important;
margin-top: 30px !important;
}
body #gform_wrapper_10 .gform_body .gform_page_footer .gform_previous_button:hover
{
float: left;
clear: both;
width: 150px;
height: 55px;
background: #00a7d7;
font-weight: bold;
font-size: 20px;
margin-right: 10px !important;
margin-top: 30px !important;
}
body #gform_wrapper_10 .gform_body .gform_page_footer .gform_button
{
float: left;
width: 150px;
height: 55px;
background: #ffbe00;
font-weight: bold;
font-size: 20px;
margin-top: 30px !important;
}
body #gform_wrapper_10 .gform_body .gform_page_footer .gform_button:hover
{
float: left;
width: 150px;
height: 55px;
background: #ffd96c;
font-weight: bold;
font-size: 20px;
margin-top: 30px !important;
}
/*Style the form radio buttons */
body #gform_wrapper_10 .gform_body .gform_fields .gfield_radio li
{
display: inline;
padding: 5px !important;
margin-right: 10px !important;
}
body #gform_wrapper_10 .gform_body .gform_fields .gfield_radio li:hover
{
background: #ffbe00 !important;
}
body #gform_wrapper_10 .gform_body .gform_fields .gfield.questionairefield
{
width: 100%;
}
body #gform_wrapper_10 .gform_body .gform_fields .gfield.questionairefield .gfield_label
{
font-size: 30px;
line-height: 20px;
}
/*Style the form HTML Elements */
body #gform_wrapper_10 .gform_body .gform_fields .gfield.HTML
{
width: 100%;
line-height: 20px;
font-size: 16px;
}
body #gform_wrapper_10 .gform_body .gform_fields .gfield.HTMLrequired
{
font-size: 14px;
font-weight: bold;
margin-bottom: 30px !important;
width: 100%;
}
Code for making the TAB function work correctly in Gravity Forms (replace _10 with your form ID):
Code for the functions.php file.
//* Gravity Form – Control Tab Order
add_filter(“gform_tabindex_10”, create_function(“”, “return 4;”));
Leave a Reply