Create form with fields side by side

4

Here’s another possible solution (not tested with multiple browsers, only Chrome):

You can use columns and column in the form frontmatter to group fields and then use css (or scss) to style them.

In my example, I found using flexbox along with a little trick from Stackoverflow for fixing spacing, works well.

Starting with the Sample Contact Form, I edited as follows:

---
title: Contact Form

form:
    name: contact

    fields:
      columns:
        type: columns
        fields:
            column1:
                type: column
                classes: my-column-class
                fields:
                  name:
                    label: Name
                    classes: my-field-class-1
                    placeholder: Enter your name
                    autocomplete: on
                    type: text
                    validate:
                      required: true

                  email:
                    label: Email
                    classes: my-field-class-2
                    placeholder: Enter your email address
                    type: email
                    validate:
                      required: true

      message:
        label: Message
        placeholder: Enter your message
        type: textarea
        validate:
          required: true

      g-recaptcha-response:
        label: Captcha
        type: captcha
        recaptcha_not_validated: 'Captcha not valid!'

    buttons:
        submit:
          type: submit
          value: Submit
        reset:
          type: reset
          value: Reset

    process:
        captcha: true
        save:
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
            body: "{% include 'forms/data.txt.twig' %}"
        email:
            subject: "[Site Contact Form] {{ form.value.name|e }}"
            body: "{% include 'forms/data.html.twig' %}"
        message: Thank you for getting in touch!
        display: thankyou
---

# Contact form

Some sample page content

Note: the lines with classes: are optional. You can use those to style individual columns or fields. In the scss example below, I style the columns and fields without using custom classes, only the ones that are default to a grav form.

And of course, you can use columns and column to group any fields you want. I use them to group a first name and last name field on the same level in my forms.

SCSS:

form .form-column {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1em; // trick to space items (see https://stackoverflow.com/a/42875628)
    > div {
        flex-basis: 10%; // far smaller than we need
        flex-grow: 1; // flex-grow fills up the space
        min-width: 18em; // just here to demonstrate responsive on mobile, can remove
        margin: 0 1em; // other part of the trick to space items
    }
  }
  .form-label span.required {
    line-height: 0; // may not be needed. on one of my forms, this fixes a vertical misalignment between the two side-by-side fields
  }

Note the comments in the scss. And of course, if you’re styling only with css, not scss, convert the scss above to css (or get help doing so).

There may be errors here, but I hope that helps someone!