Moving a Field Below Progressive Fields

[lhoyland]

Posting for @Mandyjess14 

Right now our forms have First Name, Last Name, Business Email, Company Name, Job Title, Phone Number, and an optional Message. I am wanting to add in progressive fields Job Role and Job Function to replace Company Name & Phone Number after the first form submission. However, when the progressive fields are displayed, the "Message" field is sandwiched in the middle of the form and looks weird.

Any ideas on a workaround to have Message always displayed at the bottom? 

[Stephanie-OG · Accepted solution]

Hi @Mandyjess14 !

Unfortunately I don't think there's an easy way of accomplishing this. One CSS idea that comes to mind is using flexbox's ability to order elements. So you might have something like: 

form {
  display: flex; 
  flex-direction: column;
}
form .hs-submit { order: 10; }
form .legal-consent-container { order: 9; }
form .hs_message { order: 8; }

What that's doing is taking everything inside the form and ordering it in a column, then I've set the button area to be last (I put 10 to be on the safe side), the legal consent container before that and then the message field before that (the selector for your message field might be a little different). 

On my form the "Last name" was the last field and the above moved things around: 

Using CSS flexbox to reorder progressive fields on HubSpot

It's a start but definitely something you would want to run some tests with to make sure it doens't break anything else on the form (and it also depends on preexisting styling on your site). 

I hope that helps!

---

Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!