HELP - Contact form submission using data-netlify="true" doesn't work

I’ve read and followed the docs on using the forms to allow Netlify to receive form submissions on the contact form. For some reason I receive an XML error displayed below:

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>

<Code>InvalidArgument</Code>

<Message>Invalid argument.</Message>

<Details>POST object expects Content-Type multipart/form-data</Details>

</Error>

My site is here: www.miochung.dev

You’ve used action="POST". Change it to action="#" or something. That should probably do it.

It still displays the same error…

I don’t think the problem is your markup, I think it’s the build for your site: when you pass a website through the Netlify build system it identifies the data-netlify attribute and then injects a new input field into the form, which provides a value that the Netlify backend uses to identify that the submission is for a form. Essentially, your site is currently in a state equivalent to not including data-netlify at all.

Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.
– via Forms Setup

Your form contains name email and message attributes but to know it’s a form submission Netlify is listening for an additional form-name attribute, and because that isn’t provided – Netlify hasn’t injected it during the build step – your request is falling through to the generic Google Cloud error – GCP is one of Netlify’s providers.

For example, Netlify would inject the following into your form at the build step:

<div class="contact__form"> 
    <form name="form" action="POST" method="POST" data-netlify="true">
+       <input type='hidden' name='form-name' value='contact' />
        <div class="form__input">
            <input type="text" id="name" name="name" placeholder="Name" required="">
        </div>
        <div class="form__input">
            <input type="email" id="email" name="email" placeholder="Email" required="">
        </div>
        <div class="form__input">
            <textarea id="message" name="message" placeholder="Message" style="height:200px"></textarea>
        </div>
        <div class="form__input">
            <input type="submit" id="submit" placeholder="SUBMIT">
        </div>
    </form> 
</div>

Therefore I would check whether or not you have Netlify builds enabled: it’s possible your site is configured just to upload your raw HTML, and if that is the case, I don’t think Netlify forms will work. That’s my understanding anyway!

It’s working now! I changed my SSL certificate to Let’s encrypt as the other I used was not trusted by the browser.

I’m having a form issue where the input fields are not “saving”. Netlify gives me confirmation that form was received, but when I open my email the forms are blank. I used materialize to generate the form. my certificate is at Let’s encrypt.

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile: