Netlify Form: DOMException: Failed to execute 'appendChild' on 'Node'

Support
1

Site name: charterapp.netlify.app

Recently I managed to receive form submissions using a Netlify form on my site. However, despite the submission working perfectly I get the following error in my console:

DOMException: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.

The error is caused 100% by the form being present on my site. Once the form is removed, the console doesn’t return this error.

Please see below that I included all required parameters in the form:

Can anyone advise?

2

Hi @alexandruana

What I see is

DOMException: Node.appendChild: Cannot add children to a Text

This suggests the script is attempting to add a node to text, not another node. However as there is no indication as to the location of the error within the site scripts, it is hard to offer a solution.

3

Hi @alexandruana, in addition to what @coelmay stated, upon inspecting your form using the Chrome Dev Tools, I see that your form has the invalid input tag below.

<input type="hidden" name="form-name" value="contact">Send us a message</input>

<input> is an empty tag, that means it’s not designed to have any content or a closing tag.

The correct syntax should be

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

Kindly also fix that to see if it helps solve the problem. Let us know the outcome.
Thanks

1 Like
4

@coelmay / @clarnx thank you for your inputs!

I fixed my code to include only the proper hidden input, however the error did not go away.
Noticed that in addition to the hidden input I included, there is a second one:

<input type="hidden" name="form-name" value="contact">

Not sure where this additional hidden input is coming from, but could it be the reason I am getting the javascript error? Netlify page is now updated to reflect those changes.

5

This one is correct

This one is not

<input type="hidden" name="contact" value="contact">
6

Hi @alexandruana, thanks for the extra feedback. There is a GitHub issue raised regarding the same error you are getting on the Nuxt.js GitHub page. Kindly visit the link below and try the suggestions there to see if it helps.
Thanks.

7

Just figured out the issue.

Somehow the form was loading (I believe) before the DOM, and as result the error was coming up in the console.

The fix was, adding an html file containing the form’s skeleton in the ‘dist’ folder of my app.

The below Netlify guide is what helped me overcome the issue:

1 Like
8

Hey there, @alexandruana :wave:

Thanks for coming back and sharing that resource! This will definitely help future Forums members who encounter something similar. Happy building :rocket: