CSS for customize Gravity Forms template for Wordpress
Here is example for creating custom design of your Gravity Forms for Wordpress
// Form Wrapper
body .gform_wrapper {
}
// Form Heading
body .gform_wrapper .gform_heading {
}
// Form Title
body .gform_wrapper .gform_heading .gform_title {
}
// Form Description
body .gform_wrapper .gform_heading .gform_description {
}
// Form Body
body .gform_wrapper .gform_body {
}
// Form List Container
body .gform_wrapper .gform_body .gform_fields {
}
// Form List Items
body .gform_wrapper .gform_body .gform_fields .gfield {
}
// Input Field Container
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container {
}
// Input Field Description Container
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_description {
}
// Standard Field Label
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
}
// Required Field Indicator (Asterisk)
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {
}
// Text Field
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {
}
// Drop-Down (Select) Field
body .gform_wrapper .gform_body .gform_fields .gfield select {
}
// Paragraph (Textarea) Field
body .gform_wrapper .gform_body .gform_fields .gfield textarea {
}
// Multiple-Choice (Radio) List
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio {
}
// Multiple-Choice (Radio) List Items
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li {
}
// Multiple-Choice (Radio) Inputs
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li input[type=radio] {
}
// Checkbox List
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox {
}
// Checkbox List Items
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li {
}
// Checkbox Inputs
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li input[type=checkbox] {
}
// Advanced Field (multi-field) Container
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex {
}
// Advanced Field – Left Container
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left {
}
// Sub-Label: Advanced Field – Left Container
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left label {
}
// Advanced Field – Right Container
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right {
}
// Sub-Label: Advanced Field – Right Container
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {
}
// Advanced Fields – Full Container
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full {
}
// Sub-Label: Advanced Field – Full Container
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full label {
}
// Time – Hours Container
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour {
}
// Time – Hours Input Field
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour input {
}
// Sub-Label: Time – Hours
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label {
}
// Time – Minutes Container
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute {
}
// Time – Minutes Input Field
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute input {
}
// Sub-Label: Time – Minutes
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label {
}
// Time – AM/PM Container
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm {
}
// Time – AM/PM Selector
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm select {
}
// Date – Input Field (Datepicker Option)
body .gform_wrapper .gform_body .gform_fields .gfield .datepicker {
}
// Date – Icon Image (Datepicker Option)
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_input_datepicker_icon {
}
// Date – Month Container
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month {
}
// Date – Month Input Field
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month input {
}
// Sub-Label: Date – Month
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label {
}
// Date – Day Container
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day {
}
// Date – Day Field Input
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day input {
}
// Sub-Label: Date – Day
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label {
}
// Date – Year Container
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year {
}
// Date – Year Input Field
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year input {
}
// Sub-Label: Date – Year
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label {
}
// Email Input Field (HTML 5 Option)
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email] {
}
// Telephone Input Field (HTML 5 Option)
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel] {
}
// Website Input Field (HTML 5 Option)
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url] {
}
// Section Break Container
body .gform_wrapper .gform_body .gform_fields .gsection {
}
// Section Break Title
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title {
}
// Section Break Description
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description {
}
// ReCaptcha Container
body .gform_wrapper .gform_body .gform_fields .gfield .recaptcha_widget_div .recaptcha_area {
}
// Captcha Container (Really Simple Captcha Option)
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container {
}
// Captcha Image (Really Simple Captcha Option)
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha {
}
// Captcha Input Field (Really Simple Captcha Option)
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha_input_container input {
}
// Form Footer
body .gform_wrapper .gform_footer {
}
// Submit Button
body .gform_wrapper .gform_footer input[type=submit] {
}
// Submit Button (image)
body .gform_wrapper .gform_footer input[type=image] {
}
// Inline Confirmation Message
body #gforms_confirmation_message {
}
// Validation Error Message
body .gform_wrapper .validation_error {
}
// Validation – Error Container
body .gform_wrapper .gform_body .gform_fields .gfield_error {
}
// Validation – Error Description Message
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {
}
// Multi-Page Form Progress Bar Container
body .gform_wrapper .gf_progressbar_wrapper {
}
// Multi-Page Form Progress Bar Title
body .gform_wrapper .gform_body .gf_progressbar_wrapper .gf_progressbar_title {
}
// Multi-Page Form Progress Bar
body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar {
}
// Multi-Page Form Progress Bar – Percentage Completed
body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {
}
// Multi-Page Form Steps Container
body .gform_wrapper .gf_page_steps {
}
// Multi-Page Form Step
body .gform_wrapper .gf_page_steps .gf_step {
}
// Multi-Page Form Active Step
body .gform_wrapper .gf_page_steps .gf_step_active {
}
// Multi-Page Form Page
body .gform_wrapper .gform_body .gform_page {
}
// Multi-Page Form Footer
body .gform_wrapper .gform_body .gform_page_footer {
}
// Multi-Page Form – Next Button
body .gform_wrapper .gform_body .gform_page_footer .gform_next_button {
}
// Multi-Page Form – Previous Button
body .gform_wrapper .gform_body .gform_page_footer .gform_previous_button {
}
// Multi-Page Form – Submit Button
body .gform_wrapper .gform_body .gform_page_footer .gform_button {
}
// List Field Container
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_listbody .gform_wrapper .gform_body .gform_fields .gfield .ginput_list {
}
// List Field Table
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_listbody .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list {
}
// List Field Table Columns
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list colgroup col.gfield_list_col_odd {
}
// List Field Table Headers
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list thead thtable.gfield_list thead th {
}
// List Field Table Rows
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr.gfield_list_row_odd {
}
// List Field Table Cells
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_cell {
}
Just copy and use