Contact form in Agency theme

Archive
1

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

  1. I am using Grav 1.1.12 with Agency 1.4.0
  2. I have enabled the forms plugin, installed version is 2.0.8
  3. 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
  4. 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
  5. The frontmatter content of user/pages/01.home/_contact/form.md is this:
title: Contact
cache_enable: false
  1. The content of user/pages/01.home/modular.md is this:
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!'
  1. 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? :slight_smile:

2

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:

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:

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

1 Like