Contact form to a modular page?

Archive
1

In another post I managed to use grav’s default form in the woo template ( http://getgrav.org/forum#!/general:instert-a-simple-contact , tried to bump it with this subject but lets separate it ).

Now the problem I’m faced with is putting the contact into the modular home page. I have read the documentation on it: http://learn.getgrav.org/advanced/forms#using-forms-in-modular-pages
I tried to follow the steps described but ended up with an empty section where the form should be. Here are the questions I have regarding the instructions:

  1. In your theme, add a templates/modular/form.html.twig file copying templates/forms/form.html.twig.
    a. Shouldn’t I edit first the form.html.twig to get rid of these lines?
{% extends 'partials/base.html.twig' %}
{% block content %}
{% endblock %}

b. should I copy formdata.html.twig together with forms folder from the templates folder? … inside formdata.html.twig there are references to that folder.

  1. Create a modular folder with page type form.md
    a. Need a bit of clarification on what should I understand under modular fol der. I have a modular folder 01.home should I create a folder inside this modular folder like _contact or add a form.md just near modular.md?
    b. Can I just copy the single page form.md that is working in single page mode into the modular folder?

  2. Add the form header to the main modular page, modular.md ?
    a. form header, that’s from the single page form.md the from: withe name:, fields:, etc. or the whole header that is everything from form.md except the begin/end signs ---
    b. Or for form header form: action: /is enough without any other property? (my modular page is the home page)

As for my results, if I put the form.md near the modular.md I will get instead of my modular page the form only. If I create a _contact folder with form.md I get the a white section that is from trying to render my form but only a little white area is all that I get instead of a form. Looking at its source I it renders my form into this:

<section id="contact" style="padding: 90px 0 72px; background: #fff;">
    
    <div class="alert"></div>

<form name=""
      action="/newsite/home/_contact"
      method="POST">

	<div class="buttons">
		</div>
</form>
</section>

Thanks for any help! :slight_smile:

2

Going to improve the documentation on forms in modular pages this weekend.

/templates/modular/form.html.twig should be

{% block content %}
    {{ content }}
    {% include "forms/form.html.twig" %}

{% endblock %}

without the extend from base.html.twig.

  1. just create a “module” of the modular page, _contact/form.md for example. That md page will not contain any form definition. It’s just an indication that this is the part that should output the form.

  2. The modular.md page should contain the whole form definition, with fields etc, as if it was a “full-page” form.md file header. With its own path as the form.action field.

3

Trying to follow you, still not getting it though, I still get just a blank section in the modular page. Here are the contents of some of my related files:

/templates/modular/form.html.twig:

<section id="contact" style="padding: 90px 0 72px; background: #fff;">
{% block content %}
    {{ content }}
    {% include "forms/form.html.twig" %}
{% endblock %}    
</section>

/templates/modular/forms/form.html.twig:

{% extends "forms/default/form.html.twig" %}

user/pages/01.home/modular.md:

title: xyz
menu: xyz
onpage_menu: true
body_class: index
header_class: alt
class: "custom"
form:
   name: contact 
   fields:
       - name: name
         label: Name
         placeholder: Enter your name
         autofocus: on
         autocomplete: on
         type: text
         validate:
           required: true

       - name: email
         label: Email
         placeholder: Enter your email address
         type: email
         validate:
           required: true

       - name: message
         label: Message
         placeholder: Enter your message
         type: textarea
         validate:
           required: true

       - name: g-recaptcha-response
         label: Captcha
         type: captcha
         recatpcha_site_key: xyz
         recaptcha_not_validated: 'Captcha not valid!'
         validate:
           required: true
   buttons:
       - type: submit
         value: Submit
       - type: reset
         value: Reset
         
   process:
       - email:
           subject: "[Site Contact Form] {{ form.value.name|e }}"
           body: "{% include 'forms/data.html.twig' %}"
       - save:
           fileprefix: contact-
           dateformat: Ymd-His-u
           extension: txt
           body: "{% include 'forms/data.txt.twig' %}"
       - message: Thank you for getting in touch!
       - display: thankyou
       
    action: /
    
content:
    items: @self.modular    
    order:
        by: default
        dir: asc
        custom:
            - _xyz
            - _contact
4

See my post please.

I have also the very same problem with form element.

It was working well … and it is not anymore, probably (but I don’t know) because of the update…

5

I have read it, but your problem is after pressing the submit button, mine is with migrating a form from single page into a modular page and until now I don’t get not even the submit button so its quite a different issue here - definitely not an issue with updates.

6

Can you send me your user folder privately through Gitter? Quicker way to solve this

7

♪ Thanks to @Flaviocopes, this issue is solved ☆

8

As a reference, caused by having a dot “.” in the system.yaml session.name. Updated its docs to avoid in the future

9

@tidivoit you have successfully stolen my thread :P, this issue is not solved.

10

@obeliksz as I mentioned previously, send me your user folder privately through Gitter so I can check

11

The OP problem was: no form.md file in the modular page, so the form.html.twig file was never called and of course the form was not rendered.