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.

Trouble Positioning Submit Button Inline

  1. AB
    Member

    I need one of my forms to display the submit button on the same line as my email address field (the only field in the form). What's the easiest way to go about this? I've read articles on this forum, but the approaches all seem to cater to the specific needs of the original post user. I know this is easy to do and it's probably because I haven't slept in 36 hours that I'm having trouble seeing what my CSS issue is. The form is at the bottom of this page in the footer.

    http://bit.ly/hyHB7I

    The ID for this form is gravity_wrapper_3

    Posted 8 years ago on Thursday March 3, 2011 | Permalink
  2. The submit button is contained in the form footer which isn't part of the main list structure. That's why you can't simply float that button next to a field which is where most people go wrong. You have to go about it another way.

    For reference, here's a guide to the basic form structure.

    http://www.gravityhelp.com/documentation/visual-css-guide/

    Now, on to your request. This is the same technique I've given other folks, you just need to tweak it for your form. As you'll notice, I've used your form ID (actually form ID #1 instead of #3) in this example.

    Here's what we're doing.. making the form wrapper position:relative so we can absolutely position the footer element relative to the form itself. Then, we simply set the width to auto on the form footer, remove the un-needed padding and margins then set a top and left value to place it exactly where we want it. Easy peasy.

    Add this to the end of your theme's stylesheet, tweak it a bit if you want and you should be good to go.

    /* make the form container relative for positioning */
    
    body #gform_wrapper_1 {
        position: relative;
    }
    
    /* resize and position the form footer with the button */
    
    body #gform_wrapper_1 .gform_footer {
        width: auto;
        position: absolute;
        top: 46px;
        left: 150px;
        padding: 0;
        margin: 0;
    }

    test screenshot: http://grab.by/9gl1

    Posted 8 years ago on Thursday March 3, 2011 | Permalink
  3. AB
    Member

    Thank you for your help. That worked perfectly. Would the same method be used if I was using a submit button image?

    Posted 8 years ago on Thursday March 3, 2011 | Permalink
  4. Yes, if you are using an image for the submit button the CSS should be similar as the button is output in the same container when using a custom image.

    Posted 8 years ago on Thursday March 3, 2011 | Permalink
  5. Yep. The image button is still located in the same place in the markup - in the footer. The input type changes from "submit" to "image" but the snippet above would still work to position it without any changes.

    Posted 8 years ago on Thursday March 3, 2011 | Permalink
  6. Nick
    Member

    Any suggestions for how to deal with things when form validation is done and errors are present? I'm testing it on newscubamarketing.com in the sidebar and if the email is invalid, it gets pretty ugly. Also, the spinning circle for ajax submission is showing up behind and below the submit button.

    Posted 8 years ago on Friday April 8, 2011 | Permalink
  7. yeah, since it a custom layout you'd need to change a few of the things like the ajax spinner placement, probably go with relative positioning rather than absolute if you're using validation, etc. I'll do a test form, tinker with it and post back a CSS snippet here as soon as I can.

    Posted 8 years ago on Friday April 8, 2011 | Permalink
  8. Here's a way to do it, but you'll need to hide the validation message that ends up pushing everything down. It's not a big deal anyhow for a simple form. My CSS is below. You'll need to replace the form ID (#gform_wrapper_71 where the _71 is the form ID) and input ID's in my example with those from your actual form.

    [css]
    
    /* make the form container relative for positioning */
    
    body #gform_wrapper_71 {
        position: relative;
    }
    
    /* hide the validation error message */
    
    body #gform_wrapper_71 div.validation_error {
    	display:none
    }
    
    /* reset the error message box width so nothing shifts */
    
    body #gform_wrapper_71 .gfield_error {
        width: 100%;
        border:none;
    }
    
    /* set the top padding to the same value as the error message to avoid shifting */
    
    li#field_71_2 {
    	padding-top:6px
    }
    
    /* set the width of the actual text input */
    
    li#field_71_2 input {
    	width:75%
    }
    
    /* resize and position the form footer with the button */
    
    body #gform_wrapper_71 .gform_footer {
        width: auto;
        position: absolute;
        top: 35px;
        left: 78%;
        padding: 0;
        margin: 0;
    }
    
    /* hide the edit link because it's annoying me right now */
    
    body #gform_wrapper_71 .gform_footer .gform_edit_link {
    	display:none
    }

    and my result

    http://screencast.com/t/8pECyWMUMfM

    Of course you'll want to tweak the widths, etc to suit your form, but it should give you something to get started with. Have fun.

    Posted 8 years ago on Friday April 8, 2011 | Permalink
  9. Ok, I tried doing the initial code sample and the send button was not put in the right place. I am using Genesis + the Enterprise Child Theme. Here is a link (CSS restored to the default):

    http://blacktipit.com/how/

    How do I get the send button to the right of the form? Thanks so much!

    Posted 8 years ago on Sunday June 19, 2011 | Permalink
  10. @mbookspan,

    did you change the form ID in the sample when you tried to use it on your site? Your form ID is 4 and the sample was for form ID 1.

    This should be appropriate for your form.. it will still probably require some tweaking to suit but should work.

    [css]
    /* make the form container relative for positioning */
    
    body #gform_wrapper_4 {
        position: relative;
    }
    
    /* resize and position the form footer with the button */
    
    body #gform_wrapper_4 .gform_footer {
        width: auto;
        position: absolute;
        top: 0;
        left: 170px;
        padding: 0;
        margin: 0;
    }

    screenshot: http://grab.by/ao9L

    Posted 8 years ago on Sunday June 19, 2011 | Permalink
  11. Odd. I had done exactly what you recommended (with the id of 4). Now it works - I tightened up the left and padding. Thanks!

    http://blacktipit.com/how/

    Posted 8 years ago on Sunday June 19, 2011 | Permalink
  12. You probably didn't hold your tongue right or something the first time.. some days it just wants to work and others not it seems.

    Glad you got it fixed up.

    Posted 8 years ago on Sunday June 19, 2011 | Permalink
  13. Hello everyone,

    I'm very new to Gravity Forms so I do hope you'll bear with me.

    I've followed the code to reposition the submit button, alas it's not working :-(

    Any help would be appreciated.
    http://www.leepmusic.net/

    Thank you in advance

    Ken

    Posted 7 years ago on Tuesday October 4, 2011 | Permalink
  14. Ken,

    I don't see any custom styles being applied. Where did you put your custom CSS rules?

    If you apply the rules in the right place, they should work properly. This is what I used for my quick test..

    [css]
    /* make the form container relative for positioning */
    
    body #gform_wrapper_3 {
        position: relative;
    }
    
    /* resize and position the form footer with the button */
    
    body #gform_wrapper_3 .gform_footer {
        width: auto;
        position: absolute;
        top: 0;
        right: 225px;
        padding: 0;
        margin: 0;
    }

    screenshot: http://bit.ly/qj6nqv

    Posted 7 years ago on Tuesday October 4, 2011 | Permalink
  15. Anonymous
    Unregistered

    Ok, I'm struggling to get this to work. I want to achieve the styling like "blacktipit.com" ( a few posts above this one.) I put up a simple test form with just an email field and I've copied the above code. I've added it to the custom css page of Headway. I've even tried moving the entire forms.css page into the theme. I'm obviously doing something wrong. Oh and I made sure it was the right ID.

    Please help thx,
    http://superfoodsamerica.com/test-page/

    Posted 7 years ago on Thursday December 8, 2011 | Permalink
  16. I'm not seeing any custom CSS related to that form link you posted. Does your stylesheet cache?

    Posted 7 years ago on Thursday December 8, 2011 | Permalink
  17. Anonymous
    Unregistered

    Rob, I got it moved, now I would like to put the "field label" for "type in email" inside the box.

    Posted 7 years ago on Thursday December 8, 2011 | Permalink
  18. @rcuster8 You can't put the field label itself in the email input. What you want is a placeholder, where the label appears in the input and goes away when the user clicks on it. This isn't currently a built in feature.

    In order to do what you want to do you'll need to hide the field label using CSS, or edit your form and set the Field Label so it's empty/blank and then select the Advanced tab and give it an Admin Label of Email. This will change the form so the Field Label doesn't appear on the front end, but the Admin Label is then used when you view the entry in the admin.

    After you do that you would then have to implement this customization:

    http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/

    Posted 7 years ago on Thursday December 8, 2011 | Permalink
  19. Greetings

    I'm new to GF, and I play with my first form to style it

    I have followed Kevin Flahaut advises

    it works all fine so far except that the submit button is misplaced on the error message

    my css is

    body #gform_wrapper_1 {position: relative;}
      body #gform_wrapper_1 #gform_fields_1  input { border:3px solid #bfbfbf;background-color:#2a2a2a;text-align:center; color:#bfbfbf;padding:5px; width:290px; }
      body #gform_wrapper_1 .gfield_label{display:none;}
      body #gform_wrapper_1 .gfield_description {display:none;}
      body #gform_wrapper_1 .validation_error {position: absolute; top: 50px;}
    
    .gform_validation_error {background:#f6e69c; color:red; padding:10px 10px 40px 10px; border: 1px solid red; margin:0 0 20px 0;}
    
    /* reset the error message box width so nothing shifts */
    
    body #gform_wrapper_1 .gfield_error {
        width: 100%;
        border:none;
    }
    
    body #gform_wrapper_1 .gform_footer {
        width: auto;
        position: absolute;
        top: 0;
        left: 333px;
        padding: 0;
        margin: 0;
    }
    
    body #gforms_confirmation_message {background:#f6e69c;color:green; padding:10px; border: 1px solid red; font-weight:bold;}

    here is my questions
    1° how would you change the .gform_footer 'top' only on the error? so that I can adjust it, or maybe there is a better solutiion
    2° I have notice that most of the time you start the css with the body value, why is it best to do so?

    the url of my page is http://ozonetravel.newdawnmedialtd.com/kiteboard/
    and I'm talking of the first form (newsletter form)

    Thank you in advance for your help

    Posted 7 years ago on Tuesday December 13, 2011 | Permalink
  20. Hey Greg, you are absolutely positioning your submit button, so the added padding of the error message is causing the shift. Add this line in to your styles:

    [css]
    body .gform_validation_error .gform_footer {
    top: 10px !important;
    }
    Posted 7 years ago on Tuesday December 13, 2011 | Permalink
  21. @Rob
    yeah man, you are the one !!!:

    I understand the logic and tried something similar but look like I failed

    thank you again for your assistance, you rock,

    now it is time to play with the second form on that page !!!

    Posted 7 years ago on Tuesday December 13, 2011 | Permalink
  22. tangidea
    Member

    Hello everyone!

    Wow I've been stuck for days on this - I've tried the code in this thread, as well as about 5 other snippets in different threads here and still haven't been able to get the submit button to line up to the right of the email entry box.

    Can someone take a glance here and see what I'm doing wrong? http://jonathangaxiola.com/email

    Posted 7 years ago on Monday July 9, 2012 | Permalink
  23. No problem, so axe all of what you have for the body #gform_wrapper_1 .gform_footer selector(s) and replaced them with this:

    [css]
    body #gform_wrapper_1 .gform_footer {
    width: auto;
    padding: 0;
    margin: -40px 180px 0 0;
    float: right;
    }

    Screenshot

    Posted 7 years ago on Monday July 9, 2012 | Permalink
  24. tangidea
    Member

    Really awesome of you Rob - that gets me a lot closer!

    However, even with tweaking the values over the last hour I can't get the email box to appear flush to the left like the rest of the paragraph. The box wants to be centered for some reason.

    I just don't think I'm getting this CSS concept. Nothing moves the way it would seem.

    Posted 7 years ago on Monday July 9, 2012 | Permalink
  25. No problem. Take a look at this screenshot. You are defining a width of the wrapper and floating it to the right.

    Removing that now moves it to the left, as shown. Then you should just need to adjust your right margin (180px) on the above snippet I gave you to move the submit button closer.

    Posted 7 years ago on Monday July 9, 2012 | Permalink
  26. tangidea
    Member

    Oh I see now - thanks! Looks like I had left a stray snippet from one of the other threads in the forum here in my style css.

    So thanks to your recommendations above, my email box and submit button now display *perfectly* in Safari.

    However, in Firefox the submit button now displays a few pixels too high, and a few pixels too far to the left (looks horrible) -- and on my cell phone, the button now displays completely UNDER the email box - rendering an opt-in impossible on a mobile phone.

    Is this a common problem?

    Posted 7 years ago on Monday July 9, 2012 | Permalink
  27. Welcome to the world of CSS my friend! Luckily, if you view the source you can see we append the browser name onto the container surrounding the form. You can hook onto that and write selectors appropriately.

    There are plenty of ways to achieve what you are looking to do - but hard to provide bulletproof snippets all the time for every situation from the outside.

    Posted 7 years ago on Monday July 9, 2012 | Permalink
  28. tangidea
    Member

    Oh I gotcha - well its back to WS3 schools and tutsplus for me! Thanks for everything Rob!

    Posted 7 years ago on Monday July 9, 2012 | Permalink
  29. No problem, if you get stuck - just create a new thread and we'll take a look.

    Posted 7 years ago on Monday July 9, 2012 | Permalink

This topic has been resolved and has been closed to new replies.