Gatsby embed forms with script tag in react-helmet

Question

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.

Ferran Buireu · Accepted Answer · 2022-06-07 04:44:37Z

1

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>

answered Jun 7, 2022 at 4:44

Ferran Buireu

29.4k7 gold badges48 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yankeedoodle Over a year ago

Ferran, thank you so much. You're a life saver! Out of curiosity. I had run {console.log("check")} before and that worked just fine. Do you know why there would be build errors without the back ticks? Is it just that the back ticks sort of help react build what actually is javascript, so when it needs to be executed it's fine?

Ferran Buireu Over a year ago

It's because you are not inlining the script. When you place a console.log you are simply calling it and printing it as a string, as you were doing in the JSX . However, the you try to inline a script, you need to wrap it between {} to note the interpreter that a JavaScript code is starting. If you were using the script as dangerouslySetInnerHtml your code will be valid but as in JSX, you need to wrap as is. Maybe this helps you: stackoverflow.com/questions/69764931/…

Collectives™ on Stack Overflow

Gatsby embed forms with script tag in react-helmet

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related