Ajax quick contact form (based on NemoPS)

[mogsama]

Hi,
 
Here's the guide to add an Ajax quick contact form. It is based on NemoPS code - http://nemops.com/prestashop-ajax-contact-form/#.WR2lDfmGO01
 
I think it will help someone looking for a simple solution for a quick contact form. It use your own contact-form.tpl with no extra .js & .css added. The message will be saved in the BO for easy manage.
 
The code should be added in your footer.tpl in footer area so it will not be appear again in ajax box.
Below

{if isset($HOOK_FOOTER)}
<!-- Footer -->

 
Add (edit to suit your style)

<a id="contact-us-popup" style="font-size: 15px;font-weight: 700;color: #fff;position: fixed;bottom: 0;right: 1%;height: 32px;background: #0072ff;cursor: pointer;line-height: 31px;padding: 0 10px;text-align: center;z-index: 9999;border-radius: 10px 10px 0 0 !important;-moz-border-radius: 10px 10px 0 0 !important;" href="{$link->getPageLink('contact')}?content_only=1">Contact us</a>
<script type="text/javascript">
$(document).ready(function(){
$('#contact-us-popup').fancybox({
  //type = 'ajax' might fail after using it for about 2+ times
  //type: 'ajax',
  type: 'iframe',
    width: 1080,
  padding: 10,
  afterShow: function(obj) {

    // not using ajax as it might have attachments
    $('.contact-form-box').submit(function() {
      $(this).find('.alert.alert-danger').remove();
      var formdata = new FormData($(this)[0]);
      formdata.append('submitMessage', 1);
      var that = $(this);
      $.ajax({
      type: 'POST',
      data: formdata,
      url: $(this).attr('action'),
      contentType: false,
      processData: false,
      success: function(data){
        // we have an error

        var error =  $($.parseHTML(data)).filter(".alert.alert-danger"); // all elements are at the same level, we need to parse the html
        if(error.length >0)
          that.prepend(error)
        else {
          // success!
          var success =  $($.parseHTML(data)).filter(".alert.alert-success");
          that.fadeOut('fast', function(){
          $(this).after(success)
          });
        }
      }
      })
      return false;
    });
  }
  });
});
</script>

Now just custom your contact-form.tpl and you are done!
 
Here is the live demo at my production page: https://haophong.com/en/content/1-about-us

Edited May 18, 2017 by mogsama (see edit history)

[creswick88]

Hi,

 

I have but this in place but I do not get the popup, the link just loads contact form in a new window.

 

I do get the following error in console:

 

Uncaught TypeError: $(...).fancybox is not a function
    at HTMLDocument.<anonymous> ((index):4387)
    at j (jquery-1.11.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
    at Function.ready (jquery-1.11.0.min.js:2)
    at HTMLDocument.K (jquery-1.11.0.min.js:2)

 

Is there a fix so that I can get this working as popup like in your demo?

 

Thanks