Single row form for email signup - Gravity Forms override

gravity-forms-single-row-form.css

/*

I do not ever want to do this again. So annoying.

This takes two text fields, along with the submit button, and places them in a row or one line for desktop view.
The two text fields need to have custom classes on them. Name and change appropiately.

Ensure your Gravity Form has the correct ID number as well (shown below with ID 7).

This should force your form to display in one line no matter the theme.

*/


/* Force Form to Be a Single Flex Row */
#gform_wrapper_7 form {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
}

/* Force .gform_body to Behave Like a Flexbox Container */
#gform_wrapper_7 .gform_body {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
}

/* Ensure Name & Email Fields Stay Side by Side */
#gform_wrapper_7 .gform_body .gform_fields {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
}

/* Force Each Field to Share Space */
#gform_wrapper_7 .gf-name-inline, 
#gform_wrapper_7 .gf-email-inline {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
}

/* Make Inputs Fill Their Containers */
#gform_wrapper_7 .gf-name-inline input, 
#gform_wrapper_7 .gf-email-inline input {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 25px !important;
    flex: 1 !important;
}

/* Force Submit Button to Stay in Line */
#gform_wrapper_7 .gform_footer {
    flex: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Button Styling */
#gform_wrapper_7 .gform_footer input[type="submit"] {
    min-width: 150px !important;
    white-space: nowrap !important;
    padding: 12px 20px !important;
    border-radius: 25px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* Mobile Fix: Stack Fields */
@media (max-width: 768px) {
    #gform_wrapper_7 form {
        flex-wrap: wrap !important;
    }

    #gform_wrapper_7 .gform_body {
        flex-wrap: wrap !important;
    }

    #gform_wrapper_7 .gform_body .gform_fields {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    #gform_wrapper_7 .gf-name-inline, 
    #gform_wrapper_7 .gf-email-inline {
        width: 100% !important;
    }

    #gform_wrapper_7 .gform_footer {
        width: 100% !important;
        justify-content: center !important;
    }

    #gform_wrapper_7 .gform_footer input[type="submit"] {
        width: 100% !important;
    }
}

/* Ensure Gravity Forms Input Containers Fill Space */
#gform_wrapper_7 .ginput_container {
    width: 100% !important; /* Force inputs to expand inside flexbox */
}

/* FORCE STACK ON MOBILE */
@media (max-width: 768px) {
    /* Override form layout */
    #gform_wrapper_7 form {
        display: flex !important;
        flex-direction: column !important; /* Stack everything */
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 10px !important;
    }

    /* Make sure fields go full width */
    #gform_wrapper_7 .gform_body,
    #gform_wrapper_7 .gform_fields {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Force Name & Email Fields to Stack */
    #gform_wrapper_7 .gf-name-inline,
    #gform_wrapper_7 .gf-email-inline {
        width: 100% !important;
        max-width: 90% !important;
        display: block !important;
        margin: 0 auto 10px auto !important;
    }

    /* Force inputs inside to fill width */
    #gform_wrapper_7 .gf-name-inline input,
    #gform_wrapper_7 .gf-email-inline input {
        width: 100% !important;
    }

    /* Force button to be centered and stacked */
    #gform_wrapper_7 .gform_footer {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 10px !important;
    }

    /* Button should match input width */
    #gform_wrapper_7 .gform_footer input[type="submit"] {
        display: block !important;
        width: 90% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
}