Gantry 5 Helium Contact Form

Support Gantry
1

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.

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

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

3

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…

4

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

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

1 Like
5

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

6

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!

7

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)

8

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.