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!