Contact form recaptcha JS error and not all fields submitted

[timmah790]

Hi,

When a user has submitted the contact form and the recaptcha challenge is supposed to show up, it does not render and  a JS error is logged to the console.

I have changed the theme to Debut to double check if it is a problem with the theme. The recaptcha renders correctly with the Debut theme.

Also not all the form field values are sent to the email.

Please advise how I can fix this issue.

Regards,
Tim Pacheco

[timmah790]

This is caused by the theme’s minify HTML setting.
The reCaptcha relies on a function written in the HTML

The theme’s minify setting causes this entire function (below) to be commented out as all whitespace is removed by minify.
This issue will, by default, effect all sites using this theme as the default setting is to minify the HTML.

//<![CDATA[
   var recaptchaCallback = function() {
      grecaptcha.render(‘g-recaptcha’, {
      sitekey: “####”,
      size: (window.innerWidth > 320) ? ‘normal’ : ‘compact’,
      callback: ‘onCaptchaSuccess’,
   });
};

var onCaptchaSuccess = function() {
var event;

try {
   event = new Event(‘captchaSuccess’, {bubbles: true, cancelable: true});
} catch (e) {
   event = document.createEvent(‘Event’);
   event.initEvent(‘captchaSuccess’, true, true);
}

window.dispatchEvent(event);
}

//]]>

[sc_elisabeth]

I’ve got the same issue. Not all the form field values are sent to the email, like name and message. Please kindly advise how I can fix this issue.

 

[timmah790]

Try going to Themes > Customise Theme > Theme Settings > General and then untick ‘Minify HTML code’.
Seems to have fixed both issues for me.

[rjhodges]

Hey guys, on a similar note that may be of use to you as you work within this template, I realized that any additions or changes (ie function speeds) made to .js must be also made to the .min.js file as that is what is called upon in theme.liquid.  I use this tool to minify .js so that I can then add it to the claue.min.js.liquid file :

https://javascript-minifier.com/   – paste un-minified .js on the left, click the button and the output on the right will then need to be included in the claue.min.js.liquid file.

I also unchecked minify html way back after it jacked up everything on my site when I updated to a newer version about 6 weeks ago.

[Foster]

Hi you guys,

We’re so sorry for the late response. We have fixed this problem even you enable HTML minify feature. A new version includes bug fixes will be released today. Please kindly stay tuned.

[I Love Shopify]

Hi,

Please can you tell me exactly what I need to change from the new update?

I am having all of the issues mentioned above – recaptcha and name/message not showing up.

My theme is now heavily edited so blanket updates are not possible.

Many thanks,

 

[rjhodges]

Hey – I’ve been using the Claue template since v. 1.0 and at this point mine too is very heavily customized and edited.  To incorporate updates made to versions 1.05, 1.06 and 1.07 I have used this tool :

https://www.diffchecker.com/diff

Each time an update is released you have to download the new package, upload it to your store and in one browser tab be in the “edit code” section of the new, unedited version and in another browser tab be in the “edit code” section of your working, modified version.

Then look at the changlog which can be found here :

http://shopify.janstudio.net/claue/document/#changelog

Open each file listed under ‘File changes’ in both the newest, unedited version of Claue AND in your edited version, cut and paste the code from both into Diff Checker (new code on the left, your modified code on the right) and click the button at the bottom of the page that says “Find Difference!”.  That will tell you what the JanStudio guys have changed while it will also highlight the additions that you have made to your file in green.  Key in on anything in red on the left and if it isn’t something that you purposely removed previously, that is what they have added and what you will want to add to your modified file.

A tip: pay attention to line items and copy and paste code from the actual liquid files open in your other browser tabs NOT from the code in Diff Checker.

It’s pretty simple but can be time consuming but unfortunately it is the only way to update Shopify themes where the liquid and html files have been modified previously.

Hope that helps.

Ryan

[Foster]

Hi Ryan,

Thank you so much for your tutorial, it’s very helpful.

@I Love Shopify

If you don’t want to compare the file like as Ryan’s tutorial, please open layout/theme.liquid file and find line 79

Change
{% if settings.minify_html %}

to
{% if settings.minify_html and page_title != 'Challenge' and template != 'customers/addresses' %}

[I Love Shopify]

Thanks for everyone’s help.

Foster, I have tried the above and nothing changes. All that comes through is the customer’s email address. Any ideas?

[Foster]

Hi @I Love Shopify

Can you provide me your store URL? I will send you a store access request so I can take a closer look at this issue.

[I Love Shopify]

This reply has been marked as private.

[Foster]

Hi,

Sorry for the late response. I have fixed the problem for you @I Love Shopify, please check.

[I Love Shopify]

Hi Foster,

Thank you. However, I have just tested it and it is still not working. All that comes through is phone number and email address. Any ideas?

 

thanks,

Andy

[Foster]

Hi,

I have just checked again and I saw your theme is outdated version, please upgrade to the latest version to fix this issue. Refer our documentation here http://shopify.janstudio.net/claue/document/#2-updating-the-theme

 

[I Love Shopify]

Hi Foster,

I have updated the theme as best as I can. If I have missed any bits please can you add them?

I can’t figure out which bits of updated code should fix the contact form?

thanks,

Andy

[Foster]

I think the problem was solved, please see this video http://take.ms/wKNQG

[I Love Shopify]

The message and name is still not coming through. I replied to your email so you can see.

[Author]

Posts