Forms: stack form fields and submit button by default

[monsieur-z]

Impacted plugin

Jetpack

What

Ensure a form submit button doesn't float when its preceding field is not 100% wide

How

Summary

In a form, setting the width of the field that precedes the submit button to less than 100% causes the button to be inlined with that field.

Width = 100%	Width = 25%

Note: moreover, the field and button are not vertically aligned

While this behavior could make sense for forms with a single field, such as login or search forms, it's unusual for most other forms. A workaround is to group the fields, as shown in the capture below, however, it adds unnecessary friction.

I'd recommend stacking the fields and the submit button by default:

Steps to Reproduce

1. Spin up a Jetpack site
2. Create a new post or page
3. Add a form
4. Set the width of the field preceding the submit button to something other than 100%

[monsieur-z]

cc. @Automattic/zap since you're focusing on forms.

[tellthemachines]

I'd recommend stacking the fields and the submit button by default

Would users be able to easily unstack them if needed?

It might be worth getting some feedback from themers on how common this type of pattern is. Additionally, if the ability to align buttons next to forms is a desirable feature, should they have a default vertical alignment, or would it also be good to provide controls to align vertically?

It might also be nice to make button height the same as input height.

[simison]

Ideally, it would be as easy to do horizontal and vertical forms, in one or multiple columns/rows. Currently it's quite hard:

We might need some simple layout options for that to be possible.

[tellthemachines]

We might need some simple layout options for that to be possible.

If converting fields to inner blocks goes forward, we could add layout support to the form block! That would give us a lot of flexibility out of the box.