Trouble Positioning Submit Button Inline

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

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.

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.

@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

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.

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

@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/