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?
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.
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.
<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>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;
}
The form label defaults to the field name (capitalized) if no label was set.
I guess your workaround is currently the best solution.