Unable to submit JavaScript-rendered form on Netlify

support
1

I need to render a Marketo form. The supplied code:

<script src="//go.example.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_3534"></form> <script>MktoForms2.loadForm("//go.example.com", "123-XYZ-345", 3534);</script>

I tried:

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

<script src="//go.example.com/js/forms2/js/forms2.min.js"></script>
<form method="post" id="mktoForm_3534" name="mktoForm_3534"></form>
<script>
    // Add a hidden input to the JavaScript-rendered form
    var hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'form-name';
    hiddenInput.value = 'mktoForm_3534';
    document.getElementById('mktoForm_3534').appendChild(hiddenInput);

    // Load the Marketo form
    MktoForms2.loadForm("//go.example.com", "123-XYZ-345", 3534);
</script>

Netlify renders the form, everything looks ok but submission fails. Any ideas what’s wrong?

2

What are you trying to do? This looks very messy. First of all, both forms have the same name. In the world of Netlfiy form handling this is a no no. Secondly, what exactly is the first form for? Looks like it’s a placeholder. If not, why not have those fields as part of the actual form with type=hidden? Third, your javascript at the end manipulates a form that seems to be created AFTER the manipulation is done.

Long story short: Whatever Marketo might be, you should post this request in their support forum. Then formulate the issue at hand better, if it still doesn’t work. If the “supplied code” does not do what you think it should do (on it’s own, without whatever you tried) then what exactly is the error?

For a start it would be of interest if “marketo” is creating the form or handling the form response. In how far is Netlify required for the form?

You typically have error messages in the browsers console thrown and I assume there are plenty of them in this case. But I am relatively sure that this is a general issue and not one Hugo did do.

3

No. We’d have to see the browser console / dev tools to be able to tell you what the issue is.

1 Like
4

Thanks for your reply.

Marketo is Adobe’s marketing automation tool (SalesForce of sorts). As far as forms go, you create one on Marketo (eg download a white paper) and it tracks and triggers different things when the user comes back to the site. It works fine on a dynamic site like WordPress but I can’t figure out how to make it work with Hugo/Netlify.

I tried following a how-to on Netlify but got stuck.

For example, this part doesn’t make sense to me:

Add a hidden input to the JavaScript-rendered form or JSX form:

<input type="hidden" name="form-name" value="name_of_my_form" />

The JS from Marketo is:

<script src="//go.example.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_3534"></form> <script>MktoForms2.loadForm("//go.example.com", "123-XYZ-345", 3534);</script>

I’m not a JS ace (obviously) so I tried:

<script src="//go.example.com/js/forms2/js/forms2.min.js"></script>
<input type="hidden" name="form-name" value="mktoForm_3534" />
<script>MktoForms2.loadForm("//go.example.com", "123-XYZ-345", 3534);</script>

as per Netlify’s how-to, knowing it won’t work because of type=hidden which is why I tried the JS code in my original post.

So I wonder where do I put <input type="hidden" name="form-name" value="name_of_my_form" />? I’m confused by JavaScript-rendered form since rendering is done by JS outside of Netlify.

Hope this makes sense.

5

It seems like you would have better results posting your question on Netlify’s support forums. This isn’t a Hugo issue.

6

OK, thanks will try.

I case someone has a solution, the code after hidden html form I tried (made a mistake in the previous post):

<script src="//go.example.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_3534">
    <input type="hidden" name="form-name" value="mktoForm_3534" />
</form>
<script>MktoForms2.loadForm("//go.example.com", "123-XYZ-345", 3534);</script>
7

Why would you want Netlify to handle form input when Marketo is the one handling form inputs ? As per the form examples, even adding form hidden elements is handled by Marketo. Netlify doesn’t need to process anything, other than just render the form. The form values will be available in your Marketo dashboard.

This is neither a Netlify nor a Hugo issue. You need to check your Marketo code.

1 Like
8

@panchtatvam Thanks for the link, this is helpful.

1 Like