Align group fields side by side

I would like to format some fields with forminator Pro. Group fields like name and address.
I'm hoping to get this for the group, as I will apply this approach in many other forms, too
I would like to have like
For the name, In the order Firstname, middlename, Lastname
For the address: 2 lines:
Address
Postal code / City

  • Nahid

    Hey there mpress !
    Hope you are having a great day!

    First of all, could you please open the edit screen of your form and add "my-name-field-group" CSS class to the "Name" field and "my-address-field-group" class to the "Address" field? CSS classes can be set in the field under the "Styling" tab in the "Edit Field" modal. Here's a screenshot for reference:

    Afterwards, could you please add the following custom CSS?

    .forminator-field.my-name-field-group .forminator-row {
        display: inline-flex;
    }
    
    .forminator-field.my-name-field.my-name-field-group .forminator-row:first-child {
        width: 33.333%;
        margin-right: 15px;
    }
    
    .forminator-field.my-name-field.my-name-field-group .forminator-row:last-child {
        width: 66.666%;
    }
    
    .forminator-field.my-address-field-group .forminator-row:nth-of-type(2),
    .forminator-field.my-address-field-group .forminator-row:nth-of-type(3) {
        display: inline-flex;
        width: 50%;
    }
    
    .forminator-field.my-address-field-group .forminator-row:nth-of-type(2) {
        margin-right: 15px;
    }
    
    .forminator-field.my-address-field-group .forminator-row:nth-of-type(3) {
        margin-left: 15px;
    }

    You can add the Custom CSS in your WordPress Dashboard->Appearance->Customize->Additional CSS. Alternatively, you can also add it in your theme's (most preferably, child theme's) stylesheet or a custom CSS plugin.

    The above CSS should temporarily align your group fields as you want. However, I've also sent a feature request to our developers so that they can introduce an out of the box way to align group fields. Unfortunately, we don't have any ETA regarding this at this moment, but as soon as we have any updates, me or one of my colleagues will let you know here in this thread. We really appreciate your patience and consideration regarding this. Thanks!

    Hope this helps. Please let us know if you need any further assistance regarding this. Thanks!

    Kind regards,
    Nahid

  • mpress

    Hi nahid,

    Thanks for your help.
    Based on your advise I have set de css, with some changes (as some settings seemed incorrect in your advise). It is close to the way I want it, but not yet exactly. The firstname, middle name and lastname are not appearing nicely on 1 line.
    See the attachment for the form.

    I have now the following settings:

    .forminator-field.my-name-field-group .forminator-row:nth-of-type(1),
    .forminator-field.my-name-field-group .forminator-row:nth-of-type(2) {
        display: inline-flex;
        width: 30%;
    }
    .forminator-field.my-name-field-group .forminator-row:nth-of-type(3)  {
        display: inline-flex;
        width: 50%;
    }
    .forminator-field.my-name-field-group .forminator-row:nth-of-type(1) {
        margin-right: 15px;
    }
    
    .forminator-field.my-address-field-group .forminator-row:nth-of-type(2),
    .forminator-field.my-address-field-group .forminator-row:nth-of-type(3) {
        display: inline-flex;
        width: 50%;
    }
    
    .forminator-field.my-address-field-group .forminator-row:nth-of-type(2) {
        margin-right: 15px;
    }
    .forminator-field.my-address-field-group .forminator-row:nth-of-type(3) {
        margin-left: 15px;
    }

    I am sure corrections on this css are needed. Can you help?

  • Dimitris

    Hello there mpress,

    hope you're doing well today! :slight_smile:

    Please try to replace

    .forminator-field.my-name-field-group .forminator-row:nth-of-type(1),
    .forminator-field.my-name-field-group .forminator-row:nth-of-type(2) {
        display: inline-flex;
        width: 30%;
    }

    with

    .forminator-custom-form-82.forminator-design--material .forminator-field.my-name-field-group .forminator-row:nth-of-type(1) {
      display: inline-flex !important;
      width: 34% !important;
    }
    .forminator-custom-form-82.forminator-design--material .forminator-field.my-name-field-group .forminator-row:nth-of-type(2) {
      display: inline-flex !important;
      width: 68% !important;
    }

    and this should do the trick!

    Take care,
    Dimitris

  • Dimitris

    Hello there mpress,

    in order to better check this, could you please grant temporary support access via WPMUDEV Dashboard plugin? No need to share any WP admin credentials, just navigate in WP admin area under WPMU DEV -> Support page and click on the "grant support access" button. You can find detailed information about it here: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5
    Please do reply back here when access is granted because we don't get any notifications about it.

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.