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).
#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:
#contact with the id of your form.576px with the width of your choice.Hope this helps…
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!