Create form with fields side by side

Can anyone post complete sample code to make a form that repeatedly places two fields side by side, instead of below each other? I’m using the default Quark theme, with the Form plugin installed, and selecting form as the display template for the page. All the examples I have found in these forums are incomplete or do not work.

Thank you

@jason, If the following responsive layout reflects your requirement, read-on, else I’m sorry…

horizontal-form

I did the following using a fresh Grav 1.6 install, Quark and the sample Contact form from the docs (deleted recaptcha).

  • Renamed ‘pages/01.home/default.md’ to ‘pages/01.home/form.md’
  • Copied contact form example into header of page
  • Added the following css:
    #contact {
      display: grid;
      grid-template-columns: 1fr;        // Use 1 column for small devices
      grid-column-gap: 1rem;             // Add space of 1rem between columns
    }
    
    #contact .button-wrapper {
      grid-column: 1/2;                  // Force buttons to occupy 2 columns
    }
    
    @media (min-width: 576px) {
      #contact {
        grid-template-columns: 1fr 1fr;  // Use 2 columns on devices with width >= 576px
      }
    }
    

Todo:

  • Replace #contact with the id of your form.
  • Replace 576px with the width of your choice.
  • Add the css to the theme. See: Custom CSS, or Theme Inheritance

Hope this helps…

1 Like

Thank you very much for your help! I was trying to accomplish exactly what your picture showed, and the code you posted helped me do so!

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!