Align Gravity Forms Input boxes and submit button

Howdy,

Trying to align the newsletter signup form and button so it looks like the screen shot attached (both fields and button on same line).

And also hide the "first name" label (that part is working).

Page: http://alchemisteating.com/alchemist-eating-newsletter/

This CSS doesn't seem to be doing the trick:

#gform_3 .gform_body {
width: 64%;
float: left;
}

#gform_3 #input_3_2_3 {
z-index: 2;
background-color: #fff;
position: relative;
}

#gform_3 #input_3_2_3 + label {
margin-top: -33px;
z-index: 1;
}

#gform_3 #input_3_1 {
width: 100%;
}

#gform_3 .gform_wrapper ul li.gfield {
width: 47%;
float: left;
}

#gform_3 .gform_wrapper .gform_footer {
margin: 45px 0 0;
width: 20%;
float: left;
}

Thanks in advance,
Casper

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hi Casper!

    I took a look at the page, and it looks like your CSS isn't being applied at all. That could be for a few reasons, the two most like are these:
    1. You may need to add the !important declaration for each of your arguments to override the default settings.

    Example:
    #gform_3 .gform_body {
    width: 64% !important;
    float: left!important;
    }

    Normally, we should avoid using !important, but it looks like the default CSS uses it pretty liberally.

    2. You may have some broken CSS above this CSS, if you've added a lot of custom CSS to your site. If there's an element that doesn't have a closing curly brace ( } ) or is missing the ending semi-colon, any CSS after it won't be noticed or rendered.

    Can you check on both of these solutions and let me know what you find out?

    Thanks, and have a great weekend!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.