More control of field placement?

Hello @owenwatson ,

It would require some additional custom CSS at this point. Would you mind sharing the URL to your form for us to take a look at it and suggest something?

Amazing that you can do the custom css, but wouldn’t it be better with an average form layout generator?
https://greypowerwellington.org.nz/membership/
I’d like the address, city and postcode in one line, with the address being about 50%, City 30%, and Postcode 20%
TIA!

Hi @owenwatson,

Please try the following CSS, it should help.

#forminator-module-1204 div#address-1 {
    flex-direction: row;
    display: flex;
}

#forminator-module-1204 div#address-1 .forminator-row:nth-child(1) {
    width: 50%;
}

#forminator-module-1204 div#address-1 .forminator-row:nth-child(2) {
    width: 20%;
}

You can add the CSS at WP Dashboard >> Appearance >> Customize >> Additional CSS.

Kind Regards,
Nebu John

Did it but no difference.
Sorry!

Hi @owenwatson

Thanks for response!

but wouldn’t it be better with an average form layout generator?

The built-in form editor doesn’t support such kind of layout for address fields yet and using any external/3rd-party “form layout builder” would result in a set of HTML that’d be pretty useless (as it couldn’t be applied to this form – Forminator generates HTML on its own) and CSS that would have to be heavily tweaked anyway. While I agree with you on the “idea” that it could be better this way, the only way for it to work would be if Forminator’s built-in generator would support such layout.

We are constantly improving plugin’s functionality, including the form editor, but I don’t have any ETA/details on such particular layouts.

For now, adding some custom CSS would still be the fastest and simplest method to achieve what you need.

Did it but no difference.

Yes, I see on your page that the address is still “split” into separate lines. However, I also don’t see the code that my colleague shared. Have you removed it already?

I just tried it by adding it to the CSS editor in browser and it seemed to do the trick but when I’m inspecting form elements it doesn’t look like that CSS is even loaded/applied to the form at all.

If you have removed that CSS already, could you try re-adding it but also:

1. make sure to clear all cache on site/server (and CDN if there is any) as this often affects such changes; makes sure to either clear your browser’s cache or try in “incognito” window

2. if above doesn’t help, try a slight modification of the code like this:

#forminator-module-1204 div#address-1 {
    flex-direction: row;
    display: flex;
}

#forminator-module-1204 div#address-1 .forminator-row:nth-child(1) {
    width: 50%!important;
}

#forminator-module-1204 div#address-1 .forminator-row:nth-child(2) {
    width: 20%!important;
}

It’s not particularly “elegant” but might help as it should cause these rules to “overpower” any other. Note: also clear all caches after making modification.

If that doesn’t work as well, please update us here.

Best regards,
Adam

The CSS was definitely there, but I’ve decided not to split out the address in aim of getting the form as simple as possible. Thanks very much for the css.
Thanks!