Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Contact form to a modular page?

Started by Muut Archive 11 years ago · 10 replies · 656 views
11 years ago

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?
TWIG
{% 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:

HTML
<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! :)

11 years ago

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

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

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

{% endblock %}

without the extend from base.html.twig.

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

3) 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.

11 years ago

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:

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:

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

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

YAML
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

11 years ago

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

11 years ago

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.

11 years ago

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

11 years ago

♪ Thanks to @Flaviocopes, this issue is solved ☆

11 years ago

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

11 years ago

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

11 years ago

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

11 years ago

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.

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1350 9 years ago
Archive · by Muut Archive, 9 years ago
2 934 9 years ago
Archive · by Muut Archive, 9 years ago
2 4060 9 years ago
Archive · by Muut Archive, 9 years ago
1 2947 9 years ago
Archive · by Muut Archive, 9 years ago
3 1118 9 years ago