Prestashop 1.7.1 | Add privacy check to default contact form

November 22nd, 2017

From default, contact forms in Prestashop hasn’t checkbox for privacy acceptance and a “legend” that inform user about required fields.

So i add it in a very simple and dirty ( as i like ahahahah ) way..

First open ftp client , and download from your theme in “/themes/lmline/modules/contactform/views/templates/widget” the contactform.tpl.
This file contain the form fileds.

Scroll till the end of the file ( about row 88 ) and you find some thing like this script:


<footer class="form-footer text-xs-right">
  <input class="btn btn-primary" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}" disabled>
</footer>

Replace it with this one :


<footer class="form-footer text-xs-right">

	<span class="privacy_wrp col-md-12" style="padding-left:10.5rem;">
		<input style="float:left;" type="checkbox" name="DG_terms" value="No" id="prv_ck" />
		<p style="text-align: left; display: block; overflow: hidden; padding-left: 1rem;">
			{l s='Dichiaro di aver letto ed accetto l\' informativa sulla Privacy' d='Shop.Theme.Actions'}
			<br/>
			<a href="{$base_dir}/{$language.language_code}/content/3-termini-e-condizioni-di-uso" onclick="window.open(this.href); return false;">{l s='(LEGGI INFORMATIVA PRIVACY)' d='Shop.Theme.Actions'}</a>
		</p>
	</span>


	<input class="btn btn-primary" id="disabledInput" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}"
	    disabled>

	<p>
		<br/>
		<small>{l s='Tutti i campi contrassegnati con * sono da considerararsi obbligatori' d='Shop.Theme.Actions'}</small>
	</p>
</footer>

Basically this line of code add a , that contain a checkbox that is used for the acceptance, a legend that inform users about the privacy policy, a link to the privacy policy page, a “disabled” attribute and an id=”disabledInput” to the submit button, and at the end, a small text that is used as legend for the required fields.

All text are set so, prestashop, will automaticaly find them and add in the “TRANSLATIONS – SEARCHING FOR AN EXPRESSION: ” section.

Upload your modified file, reload the page and you’ll see the form with the checkbox , the texts added, and the “Submit” button disabled.

Last thing we must do, is to add some jQuery on checkbox, so, when it change, jquery add or remove the “disabled” attribute to the “send” button.

Last thing we must do, is to add some jQuery on checkbox, so, when it change, jquery add or remove the “disabled” attribute to the “send” button.

Open “custom.js” from “/themes/lmline/assets/js” and add


$('#prv_ck').change(function() {
    console.log('ok changed');
    $("#disabledInput").attr('disabled', !this.checked)
});

This script listen checkbox and toggle add or remove “disabled” attribute on send button.

Upload custom.js, reload page, and , if all right, you see that if made changes on checkbox, change’s the send button state.

Remember to add * symbol or the one you have write in the “required fields” legend text to the required fields. ( you can find fields label on the contactform.tpl )

that’s all

  1. Thank you very much for the tutorial, it works perfectly except in Safari, in this browser the checkbox is always disabled, do you know why it can happen?

  2. HI, and excuse me for late response, here you can find a pen, that i have tested in safari, and seems that all works fine..

    https://codepen.io/Pizzi/pen/aYjpKJ?editors=1111

  3. Hello, thank you very much :) I tried to do it, the first part worked perfectly, but the second part the custom.js will not let me open it. It gives me an error “document is not defined”. Microsoft JScript runtime error. So I have not been able to continue. Is it due to the failure of the template? Thanks greetings.

  4. Finalmente he podido abrir el archivo .js y copiado arriba del todo las 4 líneas que indicas, pero el botón de aceptar sigue estando desactivado, no cambia de estado. Mi explorador es el Mozilla. No se si tendrá que ver. Gracias, un saludo.

    $(‘#prv_ck’).change(function() {
    console.log(‘ok changed’);
    $(“#disabledInput”).attr(‘disabled’, !this.checked)
    });

    $(document).ready(function() {
    dropDownSearch();
    });

    function dropDownSearch()
    {
    elementClickSearh = ‘.nav2-search-icon’;
    elementSlideSearh = ‘#search_widget’;
    activeClassSearh = ‘active’;
    …..

  5. Finally I was able to open the file .js (from outside the FTP). I copied the 4 lines of code at the top as you indicate but the button does not change state. My explorer is the mozilla, I do not know if he will have to see. Thanks greetings.

    $(‘#prv_ck’).change(function() {
    console.log(‘ok changed’);
    $(“#disabledInput”).attr(‘disabled’, !this.checked)
    });

    $(document).ready(function() {
    dropDownSearch();
    });

    function dropDownSearch()
    {
    elementClickSearh = ‘.nav2-search-icon’;
    elementSlideSearh = ‘#search_widget’;
    activeClassSearh = ‘active’;

  6. Hi, have you tried with the code in this pen ?
    https://codepen.io/Pizzi/pen/aYjpKJ?editors=1111
    Andrea

  7. Hello, thank you very much, I’ve tried it.
    But the button still does not activate. Also this new code makes the button is messy and changes the language of the button to Italian, with the other did not happen :) Will something wrong? I do not know about programming.

  8. Hi Eva, you can see the code in codepen works as expected ?
    Can you pass me a link where i can see the error ?

    By Andrea

  9. Hello, I finally got it with another different code, adding some lines to the contactform.tpl. But I can if you want to pass the two files so you can see the failure in case it happens to someone else. Where could I send it to you?