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.

Help with Form Styling (Still Jumping)

  1. Hi, I'm new to Gravity Forms and bought the entry membership to try it out and until now it has done anything but make life easier. (Please forgive my tone is somewhat harsh, I mean no disrespect, but have lost more time than I have to style a simple Gravity Form)

    I did make a ticket on the jumping behavior but apparently you don't offer support to sites haven't been deployed yet. So I've been attempting to trouble shoot this issue without your support!

    After putting in as much time as I have I would like to resolve this issue without having to resort to another option like contact form 7. I value support very much as you can read in my article (http://webupon.com/audio/hosting-corp-behemoth-go-daddy-goes-down-big-time/)

    I'm deploying a Gravity Form in a Widget Area and apparently the jumping is occurring because of a php conflict with one of my other plugins. I know this because when I don't use the short code the jumping doesn't occur.

    However, for the the life of me I can't imagine why you haven't provided a standard HTML CSS Combo Tutorial. Like you find on Chris Coyers site — http://css-tricks.com/

    I have read your tutorials and looked at the visual representation but am slightly confused.

    I have thus far only been able to accomplish the styling of the —

    .optin_landing #gform_wrapper_1 — (Widget has a Class of Optin_Landing)

    The HTML is —
    <div id = "gform_wrapper_1"></div>

    The CSS is —

    [css]
    .optin_landing #gform_wrapper_1{
    	border:4px solid red;
    	width: 220px;
    	height: 179px;
    	position: relative;
    	left: 0px;
    	top: -65px;
    )

    However, going a step further the CSS no longer works. For example when the

    The HTML is —
    <div id = "gform_wrapper_1"><div class="gform_body">
    </div></div>

    The CSS is —

    [css]
    .optin_landing #gform_wrapper_1 .gform_body {
    	position: relative;
    	left: 10px;
    	top: 10px;
    	width: 50px;
    	height: 50px;
    	background: #7A38FF;
    )

    I simply want to style the name field label and input along with an email field label and input. Thats all I'm using.

    So in targeting I am working down and at the second step as referenced above the CSS is not sticking.

    By the way is it even possible to embed a gravity form without the short code?

    Please Advise!

    Thx

    PS I believe that I would really like to work with Gravity Forms once I'm able to work out the basic styling. I do know CSS but have very little understanding of PHP.

    Posted 12 years ago on Tuesday January 17, 2012 | Permalink
  2. To style the labels and inputs, you have to target the labels and inputs. I don't see any of that above. Since I can't see whats going on at all on your site, this is all theory and blind, but you could do should be able to target them with these selectors:

    [css]
    .optin_landing #gform_wrapper_1 .gform_body .gfield_label {}
    .optin_landing #gform_wrapper_1 .gform_body .gfield input[type="email"],
    .optin_landing #gform_wrapper_1 .gform_body .gfield input[type="text"]  {}

    Also, depending on what you are looking to do, you potentially may need to use !important declarations if you are overriding other styles that already exist in another stylesheet.

    Posted 12 years ago on Tuesday January 17, 2012 | Permalink
  3. Thank you. I appreciate you help. Not sure what's going on with the jump factor, and I will certainly provide the URL once the site goes live in the next week or so...

    Cheers

    Posted 12 years ago on Sunday January 22, 2012 | Permalink