Is there a way to layout the fields inline instead of vertical (Stacked on top of each other).
Using Bootstrap I would like to lay the form out with inline. Wrap the individual field in a Div.
Example
First_Name Field | Last_Name Field (Inline)
Subject Field (Below the two fields)
Thanks in Advance.
Hello,
That’s a CSS matter.
What you can do is adding float: left; width:50%; to the fields you want to have inline. Or display:inline-block;
As seen here, you can add a css to the div wrapping the fields <div class="form-field"> by adding outerclasses: 'whatever' in the frontmatter.
<div class="form-field whatever">
<div class="form-label">
<label class="inline">
Message
<span class="required">*</span>
</label>
</div>
<div class="form-data" data-grav-field="textarea" data-grav-disabled="true" data-grav-default="null">
<div class="form-textarea-wrapper ">
<textarea name="data[message2]" class="input" placeholder="Message" autofocus="autofocus" required="required"></textarea>
</div>
</div>
</div>
First let me thank you, I missed that “outerclasses” in the docs that really helped. To be clear I’m actually using Bootstrap in my theme and I was able to get the fields to layout the way I wanted them to. I’m not actually sure how your example works - data-grav-field=“textarea”? But in any case I got things working by:
Frontmatter
form:
name: contact
fields:
- name: name
label: Name
outerclasses: col-md-6
classes: form-control input-lg
placeholder: Enter your name
autocomplete: on
type: text
validate:
required: true
- name: email
label: Email
outerclasses: col-md-6
classes: form-control input-lg
placeholder: Enter your email address
type: email
validate:
required: true
- name: message
label: Message
outerclasses: col-md-12
classes: form-control input-lg
placeholder: Enter your message
type: textarea
validate:
required: true
buttons:
- type: submit
value: Submit
outerclasses: col-md-12
classes: btn btn-primary btn-lg pull-right
Place in Content
title: Location
process:
twig: true
Contact Form
{% include “forms/form.html.twig” %}
Or Place in Twig Template
Result
