Home Forums Themes Support Claue-Shopify Contact form recaptcha JS error and not all fields submitted

This topic contains 8 replies, has 5 voices, and was last updated by  Foster 19 hours, 55 minutes ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #23700

    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

    #23715

    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);
    }

    //]]>

    #23740

    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.

     

    #23748

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

    #23750

    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.

    #23823

    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.

    #23835

    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,

     

    #23836

    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

    #23845

    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' %}

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.