My own contact page

Archive
1

I try creating a modular contact page (no simplecontact plugin) with antimatter theme.

Q1 I want to use Google’s recaptcha. It requires a script tag in the HTML header. How do I get that in place (only for the contact page if user opens this page).

Q2 The 2 modules are rendered top-down. I want these on PC screen left-right (like deliver skeleton shows). Tried to get inspiration from deliver but understanding the class and link with CSS in modular/contact.html.twig and scss/mucleus/_flex.scss is beyond my capabilities. Is there a simple approach? (of course on mobile screen top-down rendering is OK).

Q3 I want to use jqBootstrapValidation.js. Is that possible with the antimatter? I read it is for Bootstrap FW?

Thank you.

2

Q1 use templates/partials/base.html.twig, place your code before or even after
Q2 not sure what you mean exactly…, both deliver and antimatter are based on nucleus, both have similar layouts (sidebar modules on right, main page with modular or blog) http://demo.getgrav.org/blog-skeleton/
Q3 you can, but you have to include all needed scripts in base.html.twig and use correct html code for validation to work.,

3

Thanks got my pages working (though not fully satisfactory). Used parsley’s validation in the end (so well documented).
For Q2, I’ve no decent solution yet. Currently I do something like this in contact.html.twig :

{% extends ‘partials/base.html.twig’ %}
{% block stylesheets %}
{% do assets.addCss(‘theme://css/parsley.css’, 500) %}
{{ parent() }}
{% endblock %}
{% block javascripts %}
{% do assets.addJs(‘https://www.google.com/recaptcha/api.js’) %}
{% do assets.addJs(‘https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js’) %}
{{ parent()}}
{% endblock %}
{% block content %}
{{ page.content }}


{% for module in page.collection() %}
{{ module.content }}
{% endfor %}

{% endblock %}

According to pure’s documentation, I could use class=“pure-g-r”. Then, if the screen is big, each module.content is shown next to the other. For mobile devices, module.content is rendered below the other. Pure’s documentation is for 0.6 however, while grav theme is using the older 0.5. I tried using class pure-g-r but that was not found.
My blog page has also 2 block next to each other on my PC, but these are rendered on top of each other on my mobile. That tells me somehow the capability is possible in grav theme, but I’m unable to leverage that yet.