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

Topic Resolution: Resolved

This topic contains 17 replies, has 5 voices, and was last updated by  I Love Shopify 3 weeks, 3 days ago.

Viewing 15 posts - 1 through 15 (of 18 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' %}

    #24651

    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?

    #24778

    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.

    #24783
    This reply has been marked as private.
    #24823

    Hi,

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

    #24835

    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

    #24948

    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

     

Viewing 15 posts - 1 through 15 (of 18 total)

The topic ‘Contact form recaptcha JS error and not all fields submitted’ is closed to new replies.