Contact form in Agency theme

9 years ago

Okay, I am struggling to get the contact form working in the Agency theme.

I am using Grav 1.1.12 with Agency 1.4.0
I have enabled the forms plugin, installed version is 2.0.8
I have followed the steps on https://learn.getgrav.org/forms/forms/how-to-forms-in-modular-pages and now my page setup looks like this:
Screen Shot 2017-01-03 at 22
I have created a custom theme for my modifications, the folder structure (with form.html.twig and formdata.html.twig) is this:
Screen Shot 2017-01-03 at 22
The frontmatter content of user/pages/01.home/_contact/form.md is this:
YAML
```
title: Contact
cache_enable: false
```

The content of user/pages/01.home/modular.md is this:

YAML

title: 'Marleen Labbeke'
menu: Home
onpage_menu: true
content:
items: '@self.modular'
order:
    by: default
    dir: asc 
    custom:
        - _hoofding
        - _copywriting
        - _diensten
        - _opgelet
        - _portfolio
        - _overmezelf
        - _testimonials
        - _marleen
        - _contact
form:
name: contact-form
action: /home
fields:
    -
        name: name
        label: Name
        classes: form-control
        placeholder: 'Enter your name'
        autofocus: 'on'
        autocomplete: 'on'
        type: text
        position: left
        validate:
            required: true
    -
        name: email
        label: Email
        classes: form-control
        placeholder: 'Enter your email address'
        type: email
        position: left
        validate:
            required: true
    -
        name: message
        label: Message
        placeholder: 'Enter your message'
        type: textarea
        classes: form-control
        position: right
        validate:
            required: true
buttons:
    -
        type: submit
        classes: 'btn btn-primary btn-lg'
        value: Submit
process:
    -
        email:
            from: '{{ config.plugins.email.from }}'
            to: ['{{ config.plugins.email.from }}', '{{ form.value.email }}']
            subject: '[Feedback] {{ form.value.name|e }}'
            body: '{% include ''forms/data.html.twig'' %}'
    -
        save:
            fileprefix: feedback-
            dateformat: Ymd-His-u
            extension: txt
            body: '{% include ''forms/data.txt.twig'' %}'
    -
        message: 'Thank you for your feedback!'

I have read the topic https://getgrav.org/forum#!/plugin-development:contact-form-and-email-in-m but still my contact form looks like this:
Screen Shot 2017-01-03 at 22

What am I missing? :)

9 years ago

Hi,
put the cache_enabled: false setting in the modular.md
Ensure the cache is disabled in your system.yaml
Here my process setting in modular.md:

YAML

process:
        - ip:
            label: IP Adresse
        - email:
            from: "{{ form.value.email }}"
            subject: "[Homepage Kontakt von] {{ form.value.name|e }}"
            body: "{% include 'forms/data.html.twig' %}"

        - reset: true

        - message: Vielen Dank für die Nachricht! Ich melde mich so schnell wie möglich.

How does your form.html.twig in your user/theme/templates/modular folder look like?
Here is mine:

TWIG

<section id="contact">
  <div class="container"> 
    <div class="row">
      <div class="col-lg-12 text-center">
        {{ content }}

{% if form.message %}
    {% if form.inline_errors and form.messages %}
        <div class="alert notices {{ form.message_color ?: 'green' }}"><p>{{ "FORM.VALIDATION_FAIL"|t|raw }}</p></div>
    {% else %}
        <div class="alert notices {{ form.message_color ?: 'green' }}"><p>{{ form.message|raw }}</p></div>
    {% endif %}
{% endif %}
{% set scope = scope ?: 'data.' %}
{% set multipart = '' %}
{% set method = form.method|upper|default('POST') %}

{% for field in form.fields %}
    {% if (method == 'POST' and field.type == 'file') %}
        {% set multipart = ' enctype="multipart/form-data"' %}
    {% endif %}
{% endfor %}

{% set action = form.action ? base_url ~ form.action : base_url ~ page.route %}

{% if (action == base_url_relative) %}
    {% set action = base_url_relative ~ '/' ~ page.slug %}
{% endif %}

<form name="{{ form.name }}"
      action="{{ action }}"
      method="{{ method }}"{{ multipart }}
      {% if form.id %}id="{{ form.id }}"{% endif %}
      {% block form_classes %}
      {% if form.classes %}class="{{ form.classes }}"{% endif %}
      {% endblock %}
>

  {% block inner_markup_fields_start %},{% endblock %}

  <div class="col-md-6">
    {% for field in form.fields %}
      {% if field.position == 'left' %}
        {% set value = form.value(field.name) %}
        <div class="form-group">
          {% include "forms/fields/#{field.type}/#{field.type}.html.twig" ignore missing %}
        </div>
      {% endif %}  
    {% endfor %}
  </div>

<div class="col-md-6">
    {% for field in form.fields %}
      {% if field.position == 'right' %}
        {% set value = form.value(field.name) %}
        <div class="form-group">
          {% include "forms/fields/#{field.type}/#{field.type}.html.twig" ignore missing %}
        </div>
      {% endif %}  
    {% endfor %}
  </div>

  {% include "forms/fields/formname/formname.html.twig" %}

  {% block inner_markup_fields_end %},{% endblock %}

  {% block inner_markup_buttons_start %}
  <div class="buttons">
  {% endblock %}

  {% for button in form.buttons %}
      <button
            {% block button_classes %}
            class="{{ button.classes|default('button') }}"
            {% endblock %}
            type="{{ button.type|default('submit') }}"
        >
            {{ button.value|t|default('Submit') }}
        </button>
  {% endfor %}

  {% block inner_markup_buttons_end %}
  </div>
  {% endblock %}

  {{ nonce_field('form', 'form-nonce')|raw }}
</form>

      </div>
    </div></div>

</section>

Form is working, though it took me a long time to figure it out.

Topic	Replies	Views	Activity
About the Archive category Archive · by Deleted User, 9 years ago	0	1346	9 years ago
Hey buddies! Archive · by Muut Archive, 9 years ago	2	933	9 years ago
There is a way to do a "if condition" in MD page? Archive · by Muut Archive, 9 years ago	2	4060	9 years ago
Official docker image of grav (+admin +gitsync) Archive · by Muut Archive, 9 years ago	1	2945	9 years ago
Weird Grav + caddy + iOS + https problem Archive · by Muut Archive, 9 years ago	3	1117	9 years ago

Suggested topics