Question about modular form layout & position

9 years ago

I am trying to create a modular contact form and I first created it using html / css to get the layout and classes flushed out. I want to swap the html in my twig template for the grav generated form but I am not seeing how to do that. How can I tell the grav template to insert the form into a specific div with id?

As a side question, is it possible to just use html/php to create a contact form and bypass grav forms?

9 years ago

Okay, I figured it out. I included {% include "forms/form.html.twig" %} in my twig template which injected the form.

I have another question about the form fields that are rendered.

I purposely excluded the form label from my fields in form.md but the labels are still appearing. Is this a bug? This is what is I have defined, and what is appearing when the page loads.

YAML

form:
   action: /contact
   method: POST
   name: Contact
   id: contact-form
   fields:
     -
       name: name
       id: name
       placeholder: name
       type: text
       validate:
         required: true
     -
       name: email
       id: email
       placeholder: Email
       type: text
       validate:
         required: true
      -
       name: subject
       id: subject
       placeholder: Subject
       type: text
       validate:
         required: true
     -
       name: message
       id: message
       placeholder: What's on your mind?
       type: textarea
       validate:
         required: true

   buttons:
     -
       type: submit
       value: Send
       class: dark

This is the HTML rendered to the browser.

HTML

<form name="Contact" action="/plug-website/contact" method="POST" id="contact-form" class=" " style="text-align: left;">
<div class="form-field   ">
  <div class="form-label ">
    <label class="inline" for="name">
    Name
    <span class="required">*</span>
    </label>
  </div>
  <div class="form-data " data-grav-field="text" data-grav-disabled="true" data-grav-default="null">
    <div class="form-input-wrapper  ">
      <input name="data[name]" value="" type="text" id="name" placeholder="name" required="required">
    </div>
  </div>
</div>
<div class="form-field   ">
  <div class="form-label ">
    <label class="inline" for="email">
    Email
    <span class="required">*</span>
    </label>
  </div>
  <div class="form-data " data-grav-field="text" data-grav-disabled="true" data-grav-default="null">
    <div class="form-input-wrapper  ">
      <input name="data[email]" value="" type="text" id="email" placeholder="Email" required="required">
    </div>
  </div>
</div>
<div class="form-field   ">
  <div class="form-label ">
    <label class="inline" for="subject">
    Subject
    <span class="required">*</span>
    </label>
  </div>
  <div class="form-data " data-grav-field="text" data-grav-disabled="true" data-grav-default="null">
    <div class="form-input-wrapper  ">
      <input name="data[subject]" value="" type="text" id="subject" placeholder="Subject" required="required">
    </div>
  </div>
</div>
<div class="form-field   ">
  <div class="form-label ">
    <label class="inline" for="message">
    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[message]" class="input" id="message" placeholder="What's on your mind?" required="required"></textarea>
    </div>
  </div>
</div>

9 years ago Solution

Just so I am not wasting too many peoples time, and hopefully helping others that have similar questions I will paste the answers that I found to my own questions.

Q. How to insert the grav form into a specific part of my page (twig template)?
A. In the twig template insert the following include into the part of your template that you want the form to render in.
{% include “forms/form.html.twig” %}

Q. Why are the form labels still appearing despite the fact that I left the labels out of the fields?
A. No idea, but I found that this was incredibly easy to fix using CSS.
.form-label {
display: none;
}

6 years ago

The form label defaults to the field name (capitalized) if no label was set.
https://github.com/getgrav/grav-plugin-form/blob/4754239a60b4b2fa75e8162ea7185e02d3394a15/templates/forms/default/field.html.twig#L92-L94

I guess your workaround is currently the best solution.

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

Suggested topics