Home
Support Forums

Issues with forms in React app

I am having 2 issues with my forms via netlify on my react site www.Drucial.com (deployed via GitHub and netlify). The form is recognized in my UI and I can see the test submissions.

  1. following the documentation, I am using an action attribute to redirect to the custom success page after validation and submit function. I have tried several different routes (ie. /contact/thanks, /thanks, /contact/success etc.) as well as created separate components for these routes and while the action does seem to go to these pathnames on submit, no matter which one I use, the generic netlify success message is displayed.

  2. while I do receive the submissions in the Netlify UI and have set up a notification to my email and a webhook via zapper to send an email confirmation to the sender, neither notifications are sent (though in setting up the zap the tests completed and sent notification with no issues)

Not sure what’s wrong and I believe I have double and triple checked everything. Looking for some guidance here.

Netlify Site: www.drucial.com/contact

Thanks in advance!

Hi @Drucial,

I’m not seeing any file at /thanks for your website. This is all the files that I see:

/_redirects
/robots.txt
/manifest.json
/logo192.png
/logo512.png
/favicon.ico
/asset-manifest.json
/index.html
/static/js/2.2b66671d.chunk.js.license.txt
/static/js/runtime-main.9c98f112.js
/static/js/3.d1d6cd5f.chunk.js
/static/js/3.d1d6cd5f.chunk.js.map
/static/js/runtime-main.9c98f112.js.map
/static/js/2.2b66671d.chunk.js
/static/js/2.2b66671d.chunk.js.map
/static/js/main.05ca8377.chunk.js
/static/js/main.05ca8377.chunk.js.map
/static/css/main.1f619997.chunk.css
/static/css/main.1f619997.chunk.css.map

That /thanks page is rendered using JavaScript which returns a 404 otherwise (that is, no actual static HTML page), so Netlify believes the page doesn’t exist which is why the default page is shown. You’d have to add a static page for the thank you to work.

Correct, it is a react app as I stated so there are no static html pages at any of the pathnames. If I submit the form and get the Netlify generic message, and refresh the page i can see my custom success page. Is there no way to disable the default success page? Any feedback on the email notifications?

The default page is shown in 2 conditions:

  1. Either you’ve not configured your custom page (this doesn’t apply to you)
  2. OR your custom page doesn’t exist statically (this is what creates a problem for you).

As I said, to solve this you need to have a static HTML page at that address.

Sorry I missed the text about the emails. Unfortunately due to a recent incident, the emails were halted. They have since resumed, but we’re still unable to see any logs - so I can’t check what’s happening with that.

I have just submitted another test form with the same result. I can see the verified Form in the UI but no notifications or count against the 100 monthly forms (0/100)

Can you confirm that if I submit my forms via AJAX I can still achieve a similar functionality from Netlify but be able to conditionally show components without a redirect? Or do I absolutely have to have a static html file?

As long as this happens, the other two should work too, regardless of what thank you page is being shown.

Just to test it, could you try removing the action attribute to see what you get?

I ended up submitting the forms manually in order to use my own custom thank you action. The webhook for notifications is now working as expected however the Netlify notifications are not.

When you say you submitted the forms manually, what exactly do you mean?

I am using a validation function for each field and then posting the contact form data. Then I can use state in ternary to show the success message component without a refresh of the page allowing me to bypass the Netlify default success message. I can confirm the submissions are being recorded in my Netlify UI and the custom hook I set up to notify the submitter is working but the standard notification to my email from Netlify is not.

const valName = () => {
        if( document.contactForm.Name.value === "" ) {
            nameRef.current.innerHTML = "Name <em style='color: #a1210d'>* Please provide your name</em>"
            document.contactForm.Name.focus() ;
            return false;
         } else {
            nameRef.current.innerHTML = 'Name'
         }
         return( true )
    } 
    const valEmail = () => {
        if( document.contactForm.Email.value === "" ) {
            mailRef.current.innerHTML = "Email <em style='color: #a1210d'>* Please provide your email</em>"
            document.contactForm.Email.focus() ;
            return false;
        } else {
            mailRef.current.innerHTML = 'Email'
        }
        return( true )
    }
    const valMessage = () => {
        if( document.contactForm.Message.value === "" ) {
            messageRef.current.innerHTML = "Message <em style='color: #a1210d'>* Please include a message</em>"
            document.contactForm.Message.focus() ;
            return false;
        } else {
            messageRef.current.innerHTML = 'Message'
        }
        return( true )
    }
// 
//  Submission Handler
// 

    const validate = () => {
        if( valName() === false ) {
            return;
        } 
        else if( valEmail() === false ) {
            return;
        }
        else if( valMessage() === false ) {
            return;
        }
        handleSubmit()
    };

    const handleChange = event => {
        const { name, value } = event.target;
        setNewForm(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

    const handleSubmit = (event) => {
        fetch("/", {
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body: encode({ "form-name": "Contact Form", ...newForm })
        })
          .then(() => setSuccess(true))
          .catch(error => alert(error));
    };

This method is essentially straight from your documentation, albeit converted from use in a class component to use in a functional component.

Hi, I just checked and looks like the email address setup for form notifications was on a hard bounce list. I have removed it now and the emails should work. Could you try?

1 Like

Both submissions and all notifications are now working as expected. Thanks for your support!