Gravity Forms First Last Name Fields in Separate Lines

Gravity Form Name fields are squished in sidebar widget

Gravity Forms First Last Name Fields in Separate Lines

In a widget, Gravity Forms name fields need full width

How do you get first name and last name to be vertical instead of horizontal? When you are integrating with a mailing list you must have the advanced name field to map to MailChimp’s or AWeber’s database.

Gravity forms premium support is fantastic but sometimes you don’t want to ask for help, so here is the CSS for first name and last name in a sidebar widget. The change will apply to ALL forms,  to apply to a specific form change .gform_wrapper to something like #gform_wrapper_1. Gravity forms applies a number to each form.

.gform_wrapper .ginput_complex .ginput_right {
float: none !important;
width: 100% !important;
}
.gform_wrapper .ginput_complex .ginput_left {
float: none !important;
width: 100% !important;
}

In a widget, the email address is also too narrow in this form. To make the email field 100% width for Gravity form number 2 only (change to your form’s appropriate number):

#gform_2 .ginput_container input.medium {
width: 95% !important;
}