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…


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/’ to ‘pages/01.home/’
  • 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


  • 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

    name: contact

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

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

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

        label: Captcha
        type: captcha
        recaptcha_not_validated: 'Captcha not valid!'

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

        captcha: true
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
            body: "{% include 'forms/data.txt.twig' %}"
            subject: "[Site Contact Form] {{|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.


form .form-column {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1em; // trick to space items (see
    > 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!