Hello everyone !
I’m trying to get review from my clients on my grav website.
As my site is done with an inherited theme from the Agency Theme, the basic example is not suitable (there is only one page in Agency, hence there are several modules.
I’ve tried to set my guestbook page as a module, but it was using the whole form apearance …
after this first try, I also tried to have another page, but the code isn’t recognized :
Any help would be very welcome 
Thank you for reading !
Hello pamtbaau,
Thank you for reading ^^
The Comments plugin was my first guess, but after reading throught learn.getgrav.org and from this forum, I figured that guestbook suited best my purpose. So no, I haven’t tried to achieve anything with this plugin for now.
My site is a one page site, as it was designed to be a static page. So if the guestbook/comments is/are on another page , maybe it would be better. But maybe the form to fill the guestbook/comments section could be a module in the home page …
About sharing what I’ve tried, that is not a problem, but how ? There are several state …
My first attempt was to add a module in my home page :
user/pages/01.home/modular.md :
title: 'Title
menu: Home
onpage_menu: true
content:
items: '@self.modular'
order:
by: default
dir: asc
custom:
- _header
- _services
- _portfolio
- _about
- _team
- _clients
- _guestbook
I added the folder user/pages/01.home/_guestbook/
containing guestbook.md :
---
title: Guestbook
menu: Guestbook
form:
name: guestbook
fields:
- name: author
label: Nom
placeholder: Saisissez un nom ou un surnom qui me permettra de vos reconnaitre
autofocus: on
autocomplete: on
type: text
validate:
required: true
pattern: '^((?!https?:\/\/)(?:\R|.))*$'
message: "Additional information field can't contain links"
- name: email
label: Courriel
placeholder: Saisissez votre adresse de courriel
type: email
validate:
required: true
- name: avis
label: Message
placeholder: Saisissez votre message
type: textarea
validate:
required: true
pattern: '^((?!https?:\/\/)(?:\R|.))*$'
message: "Additional information field can't contain links"
- name: date
type: hidden
process:
fillWithCurrentDateTime: true
buttons:
- type: submit
value: Submit
process:
- email:
subject: "[Site Guestbook] {{ form.value.name|e }}"
body: "{% include 'forms/data.html.twig' %}"
- save:
filename: messages.yaml
operation: 'add'
- message: Thank you for writing your message!
---
## Livre d'Or
### Cet espace est dédié aux personnes ayant déjà fait appel à mes services
This first attempt resulted in an error message about a missing guestbook.html.twig, so I copied it from
user/plugins/guestbook/templates/
to
user/themes/mytheme/templates/modular/
It worked, I had the field and the submit button, but with the colors picked up for my other form (contact form), and it was not centered, so sketchy but working except I hadn’t fill a valid email in the ‘to’ and ‘from’ field in the email plugin …
Also, it was using the placeholder from my contact form … I’ve since renamed the type:textarea ; label:message in ‘avis’, but it is still the same output.
At this point, I sayed to myself: this has to be related with the fact that the plugin is designed for page, and not for modules, so I tried to set a page with the same content, and get what you see in the image …
Does this help you with your questions ?
@citoyencandide, I already had a vague suspicion that the frontmatter of your guestbook.md isn’t being interpreted as yaml… and guess what… Add 3 dashes at the top of the page and it works.
Please note:
When using Guestbook as a module don’t forget to remove {% extends 'default.html.twig' %} from /templates/modular/guestbook.html.twig, else the page will be created twice.
When using Guestbook as a module, the messages will not be displayed when opening the page. This is because line 58 in guestbook.php is checking the template of the page. In a module, the template is modular instead of guestbook
The script injected by Guestbook into the page fails because jQuery is loaded later then the script.
You might want to move the loading of jQuery into <head>, by replacing ‘bottom’ with ‘head’ in /themes/yourtheme/templates/partials/base.html.twig:
{% do assets.addJs('jquery',{'priority':101,'group':'head'}) %}
or wrap the script in guestbook.html.twig as follows:
<script>
window.document.addEventListener('DOMContentLoaded', () => {
// original script
});
</script>
So no, I haven’t tried to achieve anything with this plugin for now.
Ah, I didn’t know there was a plugin called Guestbook and guestbook is such a general term… I’ve taken the liberty to update the title.
First of all, thank you for detailed and 5 times corrected answer !
Also, thank you for updating my post title so that it refers to the Guestbook plugin. Sorry for the misunderstanding !
Oups, my markdown formatting of the original message was bad, the .md file has the 3 dashes !
I’m trying your tips …
Done !
Just to be sure, the script is in
and i warp it in
or elsewhere ?
@citoyencandide, I’ve updated my reply with some clarifications about fixing the javascript error.
Oups, my markdown formatting of the original message was bad, the .md file has the 3 dashes !
Are you saying the snippet here in your post is incorrect, or did you indeed forgot the 3 dashes in page guestbook.md?
Or in other words, did adding 3 dashing in guestbook.md fix the issue of the form not being rendered?
yes, it is this ! do you want me to correct my firt post ?
anyway, I’ve corrected the comment where the snippet was 
yes, it is this !
Does that mean that the form is still shown as text instead of an actual form? Or has your post been solved?
on my page.2, I was able to achieve this :
starting again from a clear copy.
I still have to make it work (had a runtime error) but it’s getting better.
but for the modular, work is still going on.
I’m a bit slow learning ^^
EDIT :
here is my try with guestbook.html.twig:
{% block content %}
{{ page.content|raw }}
{% include "forms/form.html.twig" %}
<script>
window.document.addEventListener('DOMContentLoaded', () => {
$(function() {
var currentPage = 0;
$(document).on('click tap', '.js__load-more', function(event) {
$.getJSON(window.location + '/page:' + (currentPage + 1))
.success(function(response) {
currentPage = parseInt(response.page);
response.messages.forEach(function(message) {
$('.js__messages-container').append('<tr>' +
'<td>' + message.text + '<br />{{'PLUGIN_GUESTBOOK.WRITTEN_ON'|t}} ' + message.date + ' {{'PLUGIN_GUESTBOOK.BY'|t}} ' + message.author + '</td></tr>');
});
var totalRetrieved = response.itemsPerPage * (parseInt(response.page) + 1);
$('.totalRetrieved').html(totalRetrieved);
$('.totalAvailable').html(response.totalAvailable);
if (totalRetrieved >= response.totalAvailable) {
$('.totalRetrieved').html($('.totalAvailable').html());
$('.js__load-more').hide();
}
})
.error(function() {
alert('Unexpected error');
});
});
});
});
</script>
{% if grav.twig.guestbookMessages|length %}
<h3>{{'PLUGIN_GUESTBOOK.MESSAGES'|t}}</h3>
<table class="js__messages-container">
{% for message in grav.twig.guestbookMessages.messages %}
<tr>
<td>
{{message.text|e}}
<br />
{{'PLUGIN_GUESTBOOK.WRITTEN_ON'|t}} {{message.date|e}} {{'PLUGIN_GUESTBOOK.BY'|t}} {{message.author|e}}
</td>
</tr>
{% endfor %}
</table>
{% if grav.twig.guestbookMessages.totalRetrieved < grav.twig.guestbookMessages.totalAvailable %}
<form>
<div class="buttons">
<button type="button" class="button js__load-more">
Load more
</button>
</div>
</form>
{% endif %}
<p class="center">Showing <span class="totalRetrieved">{{grav.twig.guestbookMessages.totalRetrieved}}</span> messages of <span class="totalAvailable">{{grav.twig.guestbookMessages.totalAvailable}} {% if config.plugins.guestbook.moderation %}(Note that some may be unmoderated){% endif %}</span></p>
{% endif %}
{% endblock %}
And … It’s working !
I have the fields, the submit button and it collect the guestbook entries …
As this method worked, I didn’t tried to change the /themes/yourtheme/templates/partials/base.html.twig
To sum up :
Is the form still not show correctly in the modular?
Does the form not save the message correctly?
Do I want the styling of the form to be corrected first?
Do I first want the messages to be displayed when opening the page?
Écrit le (french format date) par (author)
Anything else that’s blocking?
@citoyencandide, Out of curiosity, I went ahead and tried to integrate Guestbook into skeleton Agency.
TLDR: I wouldn’t use Guestbook…
Apart from above mentioned issues, I’ve found:
modular/form.html.twig with correct parameters to render the correct form definition.<section> and <div> are not properly closed, causing nested <section>s.$.getJSON() needs to use done() and fail().Depending on your skills, it can all be done though… But is it worth it?
Note:
the output contains the timestamp and the author, but not the message
Guestbook used hardcoded fields names. You cannot change the name of any field else it won’t be displayed. Unless you also refactor the template of couse.
Thank you very much for this review.
My skills won’t be adapted and this is not worth the effort. Maybe there should be a warning when displaying this plugin on the download section of getgrav.org ?
let’s consider this thread as solved !