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

Метаданные статьи

Идентификатор статьи:
101
Категория:
Дата добавления:
04.05.2023 10:12:49
Просмотры:
483
Рейтинг (Голоса):
(0)

Связанные статьи