• Skip to primary navigation
  • Skip to content

Neil Curtis

Learn how to make money online

  • Home
  • About
  • Start an Online Business
  • Latest Articles
  • My Resources
  • Contact

Styling Gravity Forms Tutorial 2014 – Create a multi-page website survey

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;”));

LIKE WHAT YOU’VE READ?
I publish new tutorials all the time so it would be great let you know when something is ready for you to check out. I also have lots more to share with you about how to easily customize and style your WordPress website, so why not join my gang.

TELL ME MORE >>

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2021 · NeilCurtis.me · Website powered by the Genesis Framework and uses the Maker Pro Theme

/* ----------------------------------------- */ /* Content Template: Guides Layout - start */ /* ----------------------------------------- */ #ninetypercent { width: 90%; margin: 0 auto; } #profilebox { border: dashed 2px #ccc; background: #E8E8E8; padding: 10px; padding-bottom: 15px; margin-bottom: 20px; } #profileimage { float: left; max-width: 150px; margin-right: 3%; } #profilebio { font-size: 90%; } #stepfont1 { float: left; font-size: 30px; font-weight: bold; padding: 5px; padding-left: 3%; background: #f96e5b; width: 100%; min-width: 280px; color: #FFFFFF; } #arrow { float: left; } #UWBwrap { padding-top: 10px; border-top: solid 3px #ccc; border-bottom: solid 3px #ccc; } /* ----------------------------------------- */ /* Content Template: Guides Layout - end */ /* ----------------------------------------- */