javascriptreactjsgatsbyreact-helmetwufoo

Gatsby embed forms with script tag in react-helmet


I am trying to embed some forms using react helmet.

My code looks like this:

<Helmet>
         <script type="text/javascript">
            {var FORMID;
            (function(d, t) {
              var s = d.createElement(t), options = { 'userName':'USERNAME', 'formHash':'FORMID', 'autoResize':true, 'height':'751', 'async':true, 'host':'wufoo.com', 'header':'show', 'ssl':true };
              s.src = ('https:' == d.location.protocol ?'https://':'http://') + 'secure.wufoo.com/scripts/embed/form.js';
              s.onload = s.onreadystatechange = function() {
                var rs = this.readyState;
                if (rs) if (rs != 'complete') if (rs != 'loaded') return;
                try {
                  FORMID = new WufooForm();
                  FORMID.initialize(options);
                  FORMID.display();
                } catch (e) { }
              };
              var scr = d.getElementsByTagName(t)[0], par = scr.parentNode;
              par.insertBefore(s, scr);
            })(document, 'script');}
          </script>
</Helmet>

The script is a copy and paste from wufoo form builder. (I replaced the username and form id with the all caps FORMID and USERNAME).

I keep running into errors. Right now this will produce a graphql error (there is not graphql in the page)

There was a problem parsing "/../my-page"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

and a Module build failed error.

In VS code I get some warnings on the var's saying expression expected. And some other spots where it expects a { or a }. I'm pretty certain the brackets all match up. Again, it's copy and paste from wufoo and this works in plain html/js.


Solution

  • Wrap your script with backticks (`):

    <Helmet>
             <script type="text/javascript">
                {`var FORMID;
                (function(d, t) {
                  var s = d.createElement(t), options = { 'userName':'USERNAME', 'formHash':'FORMID', 'autoResize':true, 'height':'751', 'async':true, 'host':'wufoo.com', 'header':'show', 'ssl':true };
                  s.src = ('https:' == d.location.protocol ?'https://':'http://') + 'secure.wufoo.com/scripts/embed/form.js';
                  s.onload = s.onreadystatechange = function() {
                    var rs = this.readyState;
                    if (rs) if (rs != 'complete') if (rs != 'loaded') return;
                    try {
                      FORMID = new WufooForm();
                      FORMID.initialize(options);
                      FORMID.display();
                    } catch (e) { }
                  };
                  var scr = d.getElementsByTagName(t)[0], par = scr.parentNode;
                  par.insertBefore(s, scr);
                })(document, 'script');`}
              </script>
    </Helmet>