Vertically stack name fields [RESOLVED]

Would anybody know how to get the name fields (specifically: First name, Last name) to stack vertically instead of side-by-side, using current flex code and not legacy markup? I see a couple of outdated queries on this, but nothing for the current format.

(See subscription form in the footer of temporary staging site: )

Note that I have tested CSS making the input fields with {display:block !important and width:100%} but that would only work in the legacy markup, as current code uses flex. We actually do not want the input fields to be 100% width anyway, the current width is ideal. Thanks.

Hey @devrap
To align the button in a new line, please try the following code in your child theme’s style.css file in Appearance → Customize → Additional CSS.

form#gform_4 input {
  width: 152px !important;
form#gform_4 .has_first_name {
  flex-direction: column !important;
form#gform_4 .has_first_name .name_last {
  padding-left: 0 !important;
  margin-top: 7px;

After that, the final output will look like the following screenshot. :point_down:

Give it a try, and let me know how that goes! :smile:

Thank you, Faisal! I actually had a bit of a tight deadline, so had submitted to GF support, and they wrote back with a solution similar but different to yours, using flex-flow:column instead of flex-direction:column (and I added different width constraints for desktop and mobile layouts):

body .gform_wrapper .gform_body .gform_fields .gfield #input_4_1 {
flex-flow: column;
gap: 0.5em;
align-items: inherit;
body .gform_wrapper .gform_body .gform_fields .gfield #input_4_1 span {
padding: 0;

Very much appreciated–