Gravity Support Forums Topic: Custom CSS

Gravity Support Forums Topic: Custom CSS https://legacy.forums.gravityhelp.com/topic/custom-css Gravity Support Forums Topic: Custom CSS en-US Fri, 24 Apr 2026 12:53:51 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Richard Vav on "Custom CSS" https://legacy.forums.gravityhelp.com/topic/custom-css#post-226629 Sat, 27 Apr 2013 03:07:25 +0000 Richard Vav 226629@https://legacy.forums.gravityhelp.com/ The following plugins available from the wordpress.org plugin directory will convert your field labels into placeholders <a href="http://wordpress.org/extend/plugins/gravity-forms-placeholders/" rel="nofollow">http://wordpress.org/extend/plugins/gravity-forms-placeholders/</a> <a href="http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/" rel="nofollow">http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/</a> If you opt to use the jQuery instead you would use the following <pre><code><script> jQuery(document).ready(function($){ $('#input_5_1').attr('placeholder','Name'); $('#input_5_2').attr('placeholder','Email'); $('#input_5_3').attr('placeholder','Phone'); }); </script></code></pre> Here's a guide to where to put code <a href="http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F" rel="nofollow">http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F</a> 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 <pre><code>#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; }</code></pre> 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 <pre><code>#field_5_1 input{ /* your normal background rules go here*/ } #field_5_1 input:focus{ /* your focus background rules go here*/ }</code></pre> You can find out more about css backgrounds here <a href="http://www.w3schools.com/css/css_background.asp" rel="nofollow">http://www.w3schools.com/css/css_background.asp</a> Regards, Richard AlikA on "Custom CSS" https://legacy.forums.gravityhelp.com/topic/custom-css#post-226133 Fri, 26 Apr 2013 21:32:56 +0000 AlikA 226133@https://legacy.forums.gravityhelp.com/ 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 <a href="http://i.imgur.com/GGP22NU.jpg" rel="nofollow">http://i.imgur.com/GGP22NU.jpg</a> sliced CSS Background for Contact Form <a href="http://i.imgur.com/KSnoMz4.jpg" rel="nofollow">http://i.imgur.com/KSnoMz4.jpg</a> Richard Vav on "Custom CSS" https://legacy.forums.gravityhelp.com/topic/custom-css#post-201395 Mon, 08 Apr 2013 14:58:42 +0000 Richard Vav 201395@https://legacy.forums.gravityhelp.com/ No problem Chris Chris Hajer on "Custom CSS" https://legacy.forums.gravityhelp.com/topic/custom-css#post-201389 Mon, 08 Apr 2013 14:53:44 +0000 Chris Hajer 201389@https://legacy.forums.gravityhelp.com/ Thank you Richard. Richard Vav on "Custom CSS" https://legacy.forums.gravityhelp.com/topic/custom-css#post-196576 Thu, 04 Apr 2013 10:41:35 +0000 Richard Vav 196576@https://legacy.forums.gravityhelp.com/ The placeholders are the tricky part, there are some plugins that will do it but you can also accomplish it using jQuery like so, <pre><code>$('#input_5_1').attr('placeholder','Name'); $('#input_5_2').attr('placeholder','Email'); $('#input_5_3').attr('placeholder','Phone');</code></pre> 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. AlikA on "Custom CSS" https://legacy.forums.gravityhelp.com/topic/custom-css#post-196511 Thu, 04 Apr 2013 09:39:32 +0000 AlikA 196511@https://legacy.forums.gravityhelp.com/ 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. Richard Vav on "Custom CSS" https://legacy.forums.gravityhelp.com/topic/custom-css#post-196263 Thu, 04 Apr 2013 04:06:59 +0000 Richard Vav 196263@https://legacy.forums.gravityhelp.com/ The following should change the inputs backgrounds to white like so <a href="http://imgur.com/3C0MVoV" rel="nofollow">http://imgur.com/3C0MVoV</a> <pre><code>.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; }</code></pre> Richard Vav on "Custom CSS" https://legacy.forums.gravityhelp.com/topic/custom-css#post-196256 Thu, 04 Apr 2013 04:02:28 +0000 Richard Vav 196256@https://legacy.forums.gravityhelp.com/ 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 <a href="http://imgur.com/D6XcbZ2" rel="nofollow">http://imgur.com/D6XcbZ2</a> 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 <a href="http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes</a> and the following page has examples of how to target the various elements using css <a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a> AlikA on "Custom CSS" https://legacy.forums.gravityhelp.com/topic/custom-css#post-195852 Wed, 03 Apr 2013 19:55:37 +0000 AlikA 195852@https://legacy.forums.gravityhelp.com/ 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 <a href="http://d.pr/i/8PQx" rel="nofollow">http://d.pr/i/8PQx</a> Any CSS Pro can help me out to know where to get started, that would be great! My current form is here: <a href="http://flashpoets.co.za/photography-service" rel="nofollow">http://flashpoets.co.za/photography-service</a> (then click BAND) Thanks a lot.