Submit fails with a JavaScript rendered form

I followed the form setup guide but submission still fails.

Site is Hugo generated. Plain HTML forms work fine.

My JavaScript form is from a 3rd party (Marketo). They supply this JavaScript snippet:

<script src="//"></script>
<form id="mktoForm_3534"></form>
<script>MktoForms2.loadForm("//", "123-XYZ-345", 3534);</script>

Following the guide, I tried:

<form data-netlify="true" hidden>
    <input type="text" name="FirstName" />
    <input type="text" name="LastName" />
    <input type="tel" name="Phone" />
    <input type="email" name="Email" />

<script src="//"></script>
<form id="mktoForm_3534">
    <input type="hidden" name="form-name" value="mktoForm_3534" />
<script>MktoForms2.loadForm("//", "123-XYZ-345", 3534);</script>

Netlify renders the form but submission fails. Field names match the JS rendered form.

Any ideas what I’m doing wrong?

@tr00per I’m confused about what you’re trying to do.

A Marketo form would be instantiated by Marketo code, submit to Marketo and have effectively nothing to do with Netlify.

A Netlify form would be created with Netlify compatible code, submit to Netlify and have nothing to do with Marketo.

It appears that you’re conflating the two things.

If the Marketo form isn’t working, you would need to look at the Marketo documentation.

@nathanmartin I’m trying to render a Marketo form on a Hugo generated site hosted on Netlify. The guide seems to suggest this is possible. Marketo provides a JS snippet and the guide appears to suggest Netlify can process it, after all the form is rendered but can’t be submitted.

The same snippet works on a WordPress site by having it placed inside HTML block.

@tr00per You’ve definitely gotten confused.

If it’s a Marketo form, then… it’s a Marketo form.

There’s would be no need to set up a Netlify form.

All you would need to do is include the Marketo code in your page as indicated in their documentation.

A Netlify form is not the way to “make a HTML form work on Netlify”, it’s Netlify’s system for allowing people to catch form submissions that would otherwise require them to create their own backend.

In your case your Marketo form would be submitting to the Marketo backend.

@nathanmartin Do you mean simply dropping the JS snippet will render Marketo’s form?

I’m doing this via a shortcode (HTML code) and then call the shortcode with {{<form-name>}} which works fine with a plain HTML supported by Netlify (netlify).

In the guide, they say:

You don’t need to include extra JavaScript on your site to use Netlify Forms. But, if you want to, you can use JavaScript to render a form client-side.

@tr00per Marketo’s form will work however it works, dependent on their code and documentation.

Netlify Forms is a specific product, which you aren’t actually trying to use, so reading a guide for it will only continue to confuse you.

As it’s own product Netlify Forms works by scanning the HTML output of your build looking for forms that contain certain attributes (data-netlify for example). When it detects those it modifies the HTML of the form and then does various other things behind the scenes, so that when a POST request is made to Netlify their system catches the data that is sent and stores it in their system. It’s why if a form is being generated at runtime via JavaScript, that the documentation indicates a “plain HTML version of the form must also exist” (so it can be detected by the post-build scanner).

In your case, with a Marketo form, that is submitting its data to a Marketo endpoint, there is would be no need for any of that, since you aren’t using the Netlify Forms product.

You’re reading the Netlify documentation as if it’s a “guide for getting any form working on Netlify”, but that’s not the case. It’s documentation that’s very specific for working with the Netlify Forms product.

@nathanmartin Righto, thank you. Will try to dig something up in Marketo docs.

@tr00per Knowing nothing about Marketo and based only the embed code you supplied in your first post, I’d be surprised if you needed anything other than that.

// this would be their shared JavaScript library to power their forms
<script src="//"></script>

// this would be the container into which the form is inserted
// the 'id' lets Marketo know which form is inserted at this point (for multiple forms on the same page)
<form id="mktoForm_3534"></form>

// this JavaScript would execute code from their shared library to initialize the form for that container
// you can see that it specifies 3534
<script>MktoForms2.loadForm("//", "123-XYZ-345", 3534);</script>

I presume you modified the code to hide the actual domain etc, hence why it has the typo of // and what is presumably a nonsensical api key/identifier of 123-XYZ-345.

@nathanmartin Thanks for getting back. Maybe you can clear the fog for me (not a JS ace here).

The domain and api key are fake, don’t think it makes any difference.

So I tried just dropping the JS snippet and of course, even though the form renders, I can’t submit it. I thought for Netlify to process it, the rendered HTML needs data-netlify="true" hence me trying to have it in the form.

BTW in the original post the data-netlify="true" is missing but in previous iterations adding it didn’t work.

If you don’t mind, can you explain where data-netlify="true" should go for Netlify to process the form. Or am I totally confused here?

@tr00per I believe that you’re totally confused, but that depends on what you’re trying to do, can you tell me, are you trying to make a form that:

  1. Is your own code, with no Marketo code, that submits to Netlify Forms?
  2. Is Marketo code and submits to Marketo?

@nathanmartin The latter, point 2.

@tr00per Then you should ignore all Netlify Forms documentation as it is irrelevant and look only at Marketo documentation.

@nathanmartin Awesome, that clears the fog.

So to round up, Netlify’s guide for JS rendered forms is for a case when I want my own form rendered with JavaScript, nothing to do with a 3rd party forms?

@tr00per It’s specifically for working with Netlify Forms and only applies when submitting your data there.

It doesn’t apply for 3rd party form systems or even custom systems where you submit data to your own endpoint for handling.

1 Like