Community guidelines

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

Gantry

Gantry 5 Helium Contact Form

Started by Maurice von Ellm 9 years ago · 7 replies · 7814 views

9 years ago

Hey,

can someone help me get the contact form working?

I use Gantry 5 and custom HTML particle to get my contact form on my site.
http://gp.nhi-systems.com/styles

But i dont really know how to connect it with Grav Form/Email plugin.
Can Someone help me?
I already looked for a particle for gantry5 i can buy, but cant find anything.

HTML

<div class="g-content">

<legend><H1><b>
    Schreiben Sie uns eine Nachricht</b></H1></legend>
<form name="contact" action="/home" method="POST" id="contact">
    <div class="form-field  ">
        <div class="form-label">
            <label class="inline">
                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="" required="required" title="Bitte geben Sie einen Namen ein," type="text">
            </div>
        </div>
        </div>

    <div class="form-field  ">
        <div class="form-label">
            <label class="inline">
                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="" required="required" title="Bitte geben Sie Ihre E-Mail Adresse ein" type="text">
                    </div>

        </div>
        </div>
          <div class="form-field  ">
            <div class="form-label">
                <label class="inline">
                    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="" required="required" title="Bitte geben Sie eine Nachricht ein" type="text">
                            </div>

                            </div>
                            </div>

<div class="form-field  ">
    <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[message]" class="input" required="required" title="Ihre Nachricht sollte mindestens 10 Wörter lang sein."></textarea>
</div><br>
                       <button class="button" type="submit">
            Senden
      </button>     
        </div>

9 years ago

for Grav Forms plugin the forms are created in page header, there you set fields and actions. See this example:

https://learn.getgrav.org/forms/forms/example-form

9 years ago

Thanks for your answer. I know how to set up the form on a normal Grav Template but i dont know how to code it with gantry 5 theme helium....

9 years ago

Here is one way to call the Grav form in Gantry5.

Open G5 administrator
Select your Outline
Go to Layout tab
Add a custom html particle
configure particle to call the Grav form with twig: {% include 'forms/form.html.twig' with { form: forms('your-form') } %}

9 years ago

Thank you very much hugoaf! After 2 hours of concentrating i found another way. I coded the legend and the form twig route to the default Grav Content. In Gantry 5 i choose the Particle : Main Page Content. Just adjust the form.md a little bit and it worked. But your way is a little bit smarter i guess.

Thanks a lot for your help.
I hope we can help more People with this post.

Br
NHI Systems

7 years ago

Hi! I'm having the same issue. I'm not sure I understand the coding the legend and form twig route. I'd really appreciate your help!

6 years ago

Hi.
I'm trying to configure my form in a Gantry section like you suggest, and it shows fine, except the Google captcha (it doesn't show), and when I want to send a message, it shows an error that says 'captcha not valid'.
How I do setup this in layout Gantry or in the custom html particle to show captcha?

Thanks in advance.

You can probe in gantry.juanvillen.es/contacto

(The second form is made with your method)

last edited 06/21/20 by Pedro M

6 years ago

Hello there.
Definitely, I've chosen the traditional method to call contact page with form. In one section of layout Gantry, I've put the"Page content particle", and in the contact page, I have my form such as describe the Grav Documentation. I've changed the display to redirect, to call the thankyou page with Gantry structure.

redirect: /contact/thankyou

I hope I've helped.

Topic	Replies	Views	Activity
Skeleton for Helium / Hydrogen Gantry · by Chris, 11 months ago	1	175	11 months ago
Gantry 5: How to change the Theme logo? Gantry · by Sam, 1 year ago	7	221	1 year ago
Unable to display Comments plugin in Gantry 5 Helium theme Gantry · by Dima, 2 years ago	2	75	2 years ago
How to add comment in gantry5 theme Gantry · by KimTaeWoong, 9 years ago	2	1884	3 years ago
Critical message Gantry · by stani, 6 years ago	2	832	3 years ago

Suggested topics