Vertically stack name fields [RESOLVED]

Get Help
, , ,
1

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: https://www.staging3.maplestaror.org/ )

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.

2

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:

CleanShot 2023-11-09 at 04.30.38@2x
CleanShot 2023-11-09 at 04.30.38@2x1548×738 43.6 KB

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

3

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–
Devra