Création d’un formulaire de contact pour une page CMS Prestashop

02 Juil Création d’un formulaire de contact pour une page CMS Prestashop

Si vous allez ajouter des script à votre page CMS en prestashop, vous allez tomber dans une belle erreur au moment d’enregistrer la page..

Pour contourner ce problème, il vous suffit d’ajouter quelques lignes dans votre fichier cms.tpl, présent dans le dossier de votre thème.

Etape 1 :

Il faut premièrement ouvrir votre fichier cms.tpl situé dans le thème.

Etape 2 :

Vous pouvez ajouter votre code du formulaire juste avant ou après votre balise de contenu

/* L'ID de la page est situé dans l'url Dans le Backoffice lors de modification de la page CMS */
{if $cms->id==ID_DU_PAGE}

<form action="#" id="formDevis" method="post">
    <div class="col-md-6">
         <div class="vc_column-inner"><label> Name &amp; Surname *</label><br><span class="wpcf7-form-control-wrap your-name"> <input type="text" name="nomPrenom" value="" size="40" style="width:100%;" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"></span> </div>
    </div>
    <div class="col-md-6">
          <div class="vc_column-inner"><label> Email *</label><br><span class="wpcf7-form-control-wrap your-name"> <input type="text" name="email" value="" size="40" style="width:100%;" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"></span> </div>
    </div>
    <div class="col-md-6">
         <div class="vc_column-inner"><label> Phone *</label><br><span class="wpcf7-form-control-wrap Societe"> <input type="text" name="phone" value="" size="40" style="width:100%;" class="wpcf7-form-control wpcf7-text"></span> </div>
    </div>
    <div class="col-md-6">
         <div class="vc_column-inner"><label> Subject *</label><br><span class="wpcf7-form-control-wrap your-name"> <input type="text" name="sujet" value="" size="40" style="width:100%;" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"></span> </div>
    </div>
    <div class="col-md-12">
         <div class="vc_column-inner"><label> Message</label><br><span class="wpcf7-form-control-wrap Societe"> <textarea rows="6" style="width:100%;border: solid 1px #a9a9a9;resize:none;" name="message" class="wpcf7-form-control wpcf7-textarea" cols="22"></textarea></span> </div>
    </div>
    <div class="col-md-12">
         <div id="msgDevis" style="padding:10px;"></div>
         <input type="submit" value="Send" id="submitDevis" class="wpcf7-form-control wpcf7-submit">
    </div>
</form>

<script src="CHEMIN_VERS_VOTRE_FICHIER_JS"></script>

{/if}


/* Contenu du fichier js */
jQuery(document).ready(function ($) {
   "use strict";
   jQuery("#submitDevis").click(function(e){
       jQuery("#msgDevis").removeClass().addClass('messagebox').fadeIn(1000);
       jQuery("#msgDevis").html('<br /><div style="background: #fff;padding: 11px 10px 11px;font-size:12px;"><img src="loading.gif" style="float:left;width:15px;" alt="loader" />&nbsp;S\'il vous plaît, attendez ..</div>');
       var Data = jQuery("#formDevis").serializeArray();
       jQuery.ajax({
           url : "Fichier_php_pour_executer_le_formulaire",
           type: "POST",
           data : Data,
           success:function(data, textStatus, jqXHR){
            	jQuery('#msgDevis').html(data);
           }
       });
       jQuery("#msgDevis").slideDown("slow"); e.preventDefault();
     });
  });


/* 
Fichier_php_pour_executer_le_formulaire 
On répupere les $_POST
On peut après les envoyer par mail ou les enregistrer dans la base de donnée
*/