Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Forms & Blueprints

Create Form Layout Inline Fields

Started by Eric 9 years ago · 2 replies · 2849 views

9 years ago

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.

9 years ago

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.

HTML

<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>

9 years ago

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:

YAML

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

<div class="col-md-12">
{% include "forms/form.html.twig" %}
</div>

Result
14|690x300

last edited 07/30/17 by Eric

Topic	Replies	Views	Activity
Getting modular form to work with Typhoon template Forms & Blueprints · by Ton Haarmans, 5 years ago	13	1135	4 months ago
Form works different on different devices Forms & Blueprints · by Hugo Oliveira, 5 months ago	0	60	5 months ago
Include checkbox options from another file Forms & Blueprints · by Flachy Joe, 6 months ago	9	132	6 months ago
Modular page blueprints load, but their custom fields don’t appear in Admin Forms & Blueprints · by Augustus, 7 months ago	7	108	7 months ago
Importing blueprint stopped working (Grav 1.8) Forms & Blueprints · by Julien, 7 months ago	10	127	7 months ago

Suggested topics