https://legacy.forums.gravityhelp.com/topic/make-my-forms-look-like-the-garvity-site Gravity Support Forums Topic: Make my forms look like the Gravity site? en-US Tue, 21 Apr 2026 10:53:40 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/make-my-forms-look-like-the-garvity-site#post-30476 Tue, 19 Jul 2011 21:06:06 +0000 Kevin Flahaut 30476@https://legacy.forums.gravityhelp.com/ <p>You would have to create background images for the buttons, then apply styles to the submit element, etc. "Simple" is very relative. If you're not very proficient with CSS, the button image is your best bet. The nicest thing about that is the buttons look the same in all the browsers without a lot of CSS tweaking to pull it off. </p> https://legacy.forums.gravityhelp.com/topic/make-my-forms-look-like-the-garvity-site#post-30474 Tue, 19 Jul 2011 20:17:49 +0000 patrickcash6 30474@https://legacy.forums.gravityhelp.com/ <p>ok i can live with that. Is there a simple way to add the text to the button rather than have to create a button for each form?</p> <p>Thank you guys so much for your help.</p> <p>Patrick </p> https://legacy.forums.gravityhelp.com/topic/make-my-forms-look-like-the-garvity-site#post-30472 Tue, 19 Jul 2011 19:50:43 +0000 Kevin Flahaut 30472@https://legacy.forums.gravityhelp.com/ <p>Yep, that's a button. It's a huge button, but the plugin is doing exactly what you tell it to do, it's outputting the button path you put in the admin. I would suggest creating a smaller button image, but it is working properly.</p> <p>I notice you put a button class name in the form settings. You shouldn't need that there. The CSS class name setting there is applied to the main FORM tag so a button class wouldn't necessarily apply. If you've already defined styles for that class, you could end up with some other wonky styling because you're trying to apply button properties/styling to the form element itself. </p> https://legacy.forums.gravityhelp.com/topic/make-my-forms-look-like-the-garvity-site#post-30471 Tue, 19 Jul 2011 18:54:46 +0000 patrickcash6 30471@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin, ok I'm afraid I get some of this but not other parts. I used the image setting too. :(</p> <p>Here's the page it's on. I'm really just trying to get a feel for this at this point...<br /> <a href="http://www.gadsden-alabama.com/submit-or-edit-your-business-listing" rel="nofollow">http://www.gadsden-alabama.com/submit-or-edit-your-business-listing</a></p> <p>Here is a screenshot of the setting.<br /> <a href="http://www.screencast.com/t/ehwfIif2FdV" rel="nofollow">http://www.screencast.com/t/ehwfIif2FdV</a> </p> https://legacy.forums.gravityhelp.com/topic/make-my-forms-look-like-the-garvity-site#post-30470 Tue, 19 Jul 2011 18:20:47 +0000 Kevin Flahaut 30470@https://legacy.forums.gravityhelp.com/ <p>I can't really tell you what you're doing wrong unless I can see the form in the page. You're probably going to run into problems trying to copy our CSS directly because those buttons aren't necessarily applied to Gravity Forms and the markup may not be the same.</p> <p>I would suggest creating your buttons, then using the built-in image button option in the form editor. That's going to be a lot less of a headache for you.</p> <p><a href="http://www.gravityhelp.com/documentation/page/Form_Settings" rel="nofollow">http://www.gravityhelp.com/documentation/page/Form_Settings</a></p> <p><a href="http://www.gravityhelp.com/documentation/page/File:Form-settings-advanced.png" rel="nofollow">http://www.gravityhelp.com/documentation/page/File:Form-settings-advanced.png</a> </p> https://legacy.forums.gravityhelp.com/topic/make-my-forms-look-like-the-garvity-site#post-30469 Tue, 19 Jul 2011 18:06:29 +0000 patrickcash6 30469@https://legacy.forums.gravityhelp.com/ <p>Thanks! The link really helped. I'm about 1/2 way there.</p> <p>Here's a link to the page.<br /> <a href="http://www.gadsden-alabama.com/submit-or-edit-your-business-listing" rel="nofollow"></a></p> <p>I have the following code in my custom.css file but no luck on the button.<br /> <pre><code>a.gf_home_pricing_button { background-image: url(&quot;../images/homepricingbutton.png&quot;); background-position: 0 0; background-repeat: no-repeat; color: #FFFFFF; display: block; font-family: &quot;proxima-nova-1&quot;,&quot;proxima-nova-2&quot;,Helvetica,Arial,sans-serif; font-size: 22px; height: 92px; line-height: 60px; margin: 0 auto; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); width: 410px; }</code></pre> <p>I have set this form class to gf_home_pricing_button on the "form settings" tab. </p> <p>If I view source I do not see this class where the button is. I see a class of gform_image_button<br /> Can you see what I'm doing wrong?</p> <p>Thanks again!<br /> Patrick </p> https://legacy.forums.gravityhelp.com/topic/make-my-forms-look-like-the-garvity-site#post-30425 Tue, 19 Jul 2011 15:01:02 +0000 Carl Hancock 30425@https://legacy.forums.gravityhelp.com/ <p>The forms on this site uses images for buttons. There is an option in the Form Settings under the Advanced tab to use an image for your Submit button. You select that option and then enter the full path to the image you want to use. It's as simple as telling you waht code you need to make your form look like ours because we use 3rd party services such as TypeKit for the fonts on our site, etc.</p> <p>The best thing to do is learn by trial and error, play around with the CSS. Inspect and browse our CSS using FireBug. Turn elements on and off using FireBug and see how it impacts the form, etc. Study the CSS Targeting documentation here:</p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a></p> <p>The key with CSS is simply putting it to use and learning via trial and error. Gravity Forms markup is standard markup and standard CSS so there isn't anything specific to Gravity Forms going on, it's all standards based design and markup. </p> https://legacy.forums.gravityhelp.com/topic/make-my-forms-look-like-the-garvity-site#post-30418 Tue, 19 Jul 2011 13:11:02 +0000 patrickcash6 30418@https://legacy.forums.gravityhelp.com/ <p>I'm using Thesis and am familiar with the custom.css file.<br /> I've tried looking at the Gravity site with firebug but I'm a novice at css, etc.</p> <p>Can someone please tell me what code I'd need to make the forms on my sites look like the forms on here (including the submit button).<br /> These all look so good and mine, well, mine not so much lol.</p> <p>Thanks!<br /> Patrick </p>