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.

Align Submit button with inline fields

  1. mlemmond
    Member

    I'm new to CSS and Gravity Form. Here's what I'm working on: http://lemmonddesign.dreamhosters.com

    I want to customize this form in the CSS but nothing was there so I plugged in:

    .gf_inline { float: left; margin: 0px -10px 0px 0px; width: 100px; } ---and--- .button gform_button { float: right; }

    I've been at it literally all day and can't seem to:
    1. Get all fields and submit button the same size and aligned
    2. Put the "descriptions" within the form field

    Here's a preliminary design I did, it needs to look like this.

    Thanks.

    Posted 12 years ago on Saturday July 21, 2012 | Permalink
  2. mlemmond
    Member

    Oops. Here's what I need it to look like: http://ad-site-p2.lemmond-design-test.yourwebisonline.com/

    Please help!

    Posted 12 years ago on Saturday July 21, 2012 | Permalink
  3. Here is a tutorial on how you can do value clearing and placement:
    http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/

    Let me know when you've got that working and then we'll look at the styling.

    Posted 12 years ago on Sunday July 22, 2012 | Permalink
  4. mlemmond
    Member

    I think I got it. Check it out: lemmonddesign.dreamhosters.com.

    On to styling:

    1. Fields and Button same size on same line.
    -The code I added in the CSS is still there. Seems to be working. Should that happen?
    2. I read that including a "Default Value" makes it so nothing is required? Is this still true? These fields have to be required.
    -On this topic: I'd like to make everything required but hide the "*" asterisks.
    -Is this possible?

    Get back to me when you can. Thanks!

    (Side note: FYI, when I put in the "CSS Class Name" and "Default Value" and then deleted the field label it would negate the "Default Value." It was there, I just had to copy and paste it back in. Not sure if this a bug or what.)

    Posted 12 years ago on Sunday July 22, 2012 | Permalink
  5. mlemmond
    Member

    Oh and with the CSS styling questions, it looks like what I need to do is build this structure (http://www.gravityhelp.com/resources/cssguide/css_guide.html) into my CSS and edit from there, correct?

    Posted 12 years ago on Sunday July 22, 2012 | Permalink
  6. mlemmond
    Member

    I just noticed the drop down arrow isn't working on Safari. Any thoughts?

    Posted 12 years ago on Sunday July 22, 2012 | Permalink
  7. Because you are using default values - technically the fields can submit because there is content in them. However, you could alternatively try out this approach - which would take the labels and place them in the inputs (so you would want to add your labels back in). http://www.wduffy.co.uk/jLabel/

    Posted 12 years ago on Sunday July 22, 2012 | Permalink
  8. mlemmond
    Member

    Am I on the right track with the CSS stuff?

    Posted 12 years ago on Sunday July 22, 2012 | Permalink
  9. Looks good to me!

    Posted 12 years ago on Monday July 23, 2012 | Permalink
  10. mlemmond
    Member

    Thanks for your help, I'm impressed. Few more needs:

    http://lemmonddesign.dreamhosters.com
    1. The type within the form is touching the left edge of the form field. How do I correct that?
    2. The drop down arrow isn't showing up in Safari. Thoughts?

    Thanks!

    Posted 12 years ago on Monday July 23, 2012 | Permalink
  11. Drop this into your theme's stylesheet for the input padding:

    [css]
    .gform_wrapper .top_label li.gfield.gf_inline input[type="text"].medium, .gform_wrapper .top_label li.gfield.gf_inline input[type="url"].medium, .gform_wrapper .top_label li.gfield.gf_inline input[type="email"].medium, .gform_wrapper .top_label li.gfield.gf_inline input[type="tel"].medium, .gform_wrapper .top_label li.gfield.gf_inline input[type="number"].medium, .gform_wrapper .top_label li.gfield.gf_inline input[type="password"].medium {
    padding-left: 5px;
    }

    Here is your culprit on the select: Screenshot

    Posted 12 years ago on Monday July 23, 2012 | Permalink