PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Custom CSS

  1. Hi,

    I am a Graphic Designer, with knowledge of Wordpress and Gravity forms GUI but not beyond. I want to customise a Contact form on my site. I've done as much as I could to aid the process I have a .PSD and set up all the classes for each field.
    But now when it comes down to CSS we have a problem - I need to know if it is possible to do what I have planned. see here http://d.pr/i/8PQx

    Any CSS Pro can help me out to know where to get started, that would be great!
    My current form is here: http://flashpoets.co.za/photography-service (then click BAND)

    Thanks a lot.

    Posted 11 years ago on Wednesday April 3, 2013 | Permalink
  2. Richard Vav
    Administrator

    I'm not an expert but I can get you started, a couple of quick changes to your form will start forming your basic layout like this http://imgur.com/D6XcbZ2

    Start by editing your form and moving the inquiry field to the top, then edit it and to the CSS Class Name on the advanced tab I would add the class gf_right_half

    Next you want to edit all your other fields and add the class gf_left_half

    You can find out more about those ready made classes and other in the documentation here
    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes
    and the following page has examples of how to target the various elements using css
    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    Posted 11 years ago on Thursday April 4, 2013 | Permalink
  3. Richard Vav
    Administrator

    The following should change the inputs backgrounds to white like so http://imgur.com/3C0MVoV

    .gform_wrapper textarea, .gform_wrapper input[type=text], .gform_wrapper input[type=url], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=number], .gform_wrapper input[type=password] {
       background: white;
    }
    Posted 11 years ago on Thursday April 4, 2013 | Permalink
  4. richardvav... You are a genius!
    Thanks a lot!!! this is defiantly looking much better!!!!

    I thought about it long and hard:
    To my knowledge Gforms dont allow you to pre-populate the forms, with text disappears when you click on the form (like in Contact Form7 for example).

    So I was thinking: can I set an image Background to each field?
    Then have the background change on mouse over and on-click?
    all I'd have to do then is; add padding-right to the text so the image in each form will be visible.

    Posted 11 years ago on Thursday April 4, 2013 | Permalink
  5. Richard Vav
    Administrator

    The placeholders are the tricky part, there are some plugins that will do it but you can also accomplish it using jQuery like so,

    $('#input_5_1').attr('placeholder','Name');
    $('#input_5_2').attr('placeholder','Email');
    $('#input_5_3').attr('placeholder','Phone');

    etc... and then use either css or jquery .hide to hide the existing field labels. And as you say you can use css to add the images inside the fields and add padding to the left side of the fields to keep any entered text away from the images.

    Posted 11 years ago on Thursday April 4, 2013 | Permalink
  6. Thank you Richard.

    Posted 11 years ago on Monday April 8, 2013 | Permalink
  7. Richard Vav
    Administrator

    No problem Chris

    Posted 11 years ago on Monday April 8, 2013 | Permalink
  8. Richard, can I ask what plugins are you talking about?
    and also.. im not familiar with jQuery. could you help me understand where the code you specified goes...
    I think I get it, the code you provided will allow me to target the "text label" which I can then hide in CSS? and leave the fields like: #input_5_1 to be styled with CSS

    And I am still struggling to figure out how would I change the background for a field?
    Thank You Your help is Always so greatly appreciated!

    Contact Form
    http://i.imgur.com/GGP22NU.jpg

    sliced CSS Background for Contact Form
    http://i.imgur.com/KSnoMz4.jpg

    Posted 11 years ago on Saturday April 27, 2013 | Permalink
  9. Richard Vav
    Administrator

    The following plugins available from the wordpress.org plugin directory will convert your field labels into placeholders
    http://wordpress.org/extend/plugins/gravity-forms-placeholders/
    http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/

    If you opt to use the jQuery instead you would use the following

    <script>
    jQuery(document).ready(function($){
        $('#input_5_1').attr('placeholder','Name');
        $('#input_5_2').attr('placeholder','Email');
        $('#input_5_3').attr('placeholder','Phone');
    });
    </script>

    Here's a guide to where to put code http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F

    And with that you would use the following CSS to hide the field labels and add left side padding and increase the margin between the inputs

    #field_5_1 .gfield_label, #field_5_2 .gfield_label, #field_5_3 .gfield_label, #field_5_6 .gfield_label, #field_5_5 .gfield_label {
        display: none;
    }
    #field_5_1 input, #field_5_2 input, #field_5_3 input {
        padding-left: 30px;
        width: 85%;
        margin-bottom: 20px;
    }

    The above figures are just examples so customise them until you get the positioning how you want it.

    To add the background image you can target the inputs like so

    #field_5_1 input{
        /* your normal background rules go here*/
    }
    #field_5_1 input:focus{
        /* your focus background rules go here*/
    }

    You can find out more about css backgrounds here http://www.w3schools.com/css/css_background.asp

    Regards,
    Richard

    Posted 11 years ago on Saturday April 27, 2013 | Permalink