Instert a simple contact

Archive
1

I downloaded the simple_contact plugin and copied its stuff into the user/plugins/simple_contact folder. Modified and inserted the simple_contact.yaml into the user/config/plugins. These are the instructions available in its readme. To have a page with the contact created under user/pages a new folder ‘contact’ with contact.md in it that has:

title: 'Contact'

simple_contact: true

Now this throws a Template “contact.html.twig” is not defined ().
Searching this forum found that some code should be inserted maybe in the base template file… I’m a beginner begining to doubt that this simple_contact is the simple way to have contact form in the grav system. Your thoughts on it? What plugin do you recommand or just what am I missing here?

2

Hi!,

I haven’t tested simple_contact with the latest Grav release(s). However with the release of the form plugin, there is no need to use such 3rd party plugins anymore, since the simplest way is now to setup a contact form as describe here in Grav Learn Docs.

3

Hi!
Thanks for the tip! I just updated my grav so I now have the form plugin and according to the docs copied the form folder, form and formdata twig files to the template I use (woo). Now when I try the contact page it returns the md file as plain text, no input boxes. Tried with the antimatter theme, same thing.

I was updating manually, deleted the old site, copied the new grav system and inserted in the contents of user/pages and the woo template to the templates. Modified the original site and system yaml for site details. What could I be doing wrong?

4

Is the file called form.md?

5

Yes: user/pages/04.contact/form.md

6

and what’s the content of the file?

7

copy&paste from the documentation:

title: Contact
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: aeio43kdk3idko3k4ikd4
      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
8

PM me (on Gitter) you user/ folder zipped, so I can see directly the whole setup of pages & theme

9

Got it! The YAML frontmatter (where you define form and its parameters) must be between --- delimiters. I cannot paste them here as this forum interprets those, but add them before and after all the page content.

10

Added --- as first line and another after name still the same result when loading the page (caching disabled)

11

@obeliksz Do you mean?

—yaml

title: Contact Form

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: aeio43kdk3idko3k4ikd4
         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

Contact

12

after editing it as you wrote, the plaintext version of form.md is no longer shown… but nothing shows up, no content, only the header and footer.

13

I got this

Screen Shot 2015-10-28 at 17

so make sure you add --- at the beginning and at the end of the page you had. Take a look at other skeletons if you need, to see the differences in your page and the others.

14

I had problems with yaml formatting… copying from Sommerregen and removing spaces from the line beginnings got it fixed. Thank you.

15

@obeliksz Glad you sorted it out! :smiley: And you are right. Deleting the spaces in front of --- has to be done otherwise you get a YAML error. I added them here to fool the Muut forum editor to do not interpret them as start or end of the code.

16

Bump… how do I take this contact form to a modular page? Sorted out the
{% extends ‘partials/base.html.twig’ %} and {% block content %}
blocks so that now I get a white section on the modular page… I’m not sure if I sorted out correctly its “migration” to modular as in the modular directory inside forms/ I have the twig files calling out for {% extends “forms/default/form.html.twig” %} that is the path in the plugin folder, I don’t know if it gets that… Or where it gets stuck. And maybe you know a better way of doing this without copying and modifying the form twig files into the modular directory… Thanks in advance!

17

… it generates only an empty from:

<div class="buttons">
	</div>
18

Did you check http://learn.getgrav.org/advanced/forms#using-forms-in-modular-pages?

19
  1. In your theme, add a templates/modular/form.html.twig file copying templates/forms/form.html.twig. -> together with formdata.html.twig and forms folder from the templates folder? Shouldn’t I edit first the form.html.twig to get rid of some code sections like
{% extends 'partials/base.html.twig' %}
{% block content %}
{% endblock %}
  1. Create a modular folder with page type form.md -> copy the single page form.md into the modular folder that is near the modular.md file without a folder?
  2. Add the form header to the main modular page, modular.md ? -> Thats the form tag from single page form.md with from:'s properties right?
    In the form header, make sure you add the action parameter, with the modular page route -> as it this modular page is a home page it will be form: action: / another property to the form: header, right?

Thanks for the clarifications.