Form submission for react app, redirect to netlify default page

Support
1

Hi the support !

I have my website (https://aaafiduciaire.netlify.app) and I am using form submission from netlify. My app is in React.js. When I tryed to add an handleSumit function, I didnt receive the email. When I am not using any function during submit, the form redirect me to your default’s page. I want to reveice my email and using my own function for submit… This is my form componant :

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './FormContactUs.css';
import LinkSocialNetworks from '../LinkSocialNetworks/LinkSocialNetworks';
import logo from '../../Assets/Logos/logo-mobile.svg'
import phone from '../../Assets/Icons/phone.svg'
import mail from '../../Assets/Icons/mail.svg'
import Button from '@mui/material/Button';

/* COMPONENTS */
import CustomAlert from '../CustomAlert/CustomAlert';

/* LOADER */
import { Oval } from 'react-loader-spinner';

const FormContactUs = () => {

    const [isLoading, setIsLoading] = useState(false);
    const [alertSeverity, setAlertSeverity] = useState("success");
    const [alertMessage, setAlertMessage] = useState("");
    const [refreshUserList, setRefreshUserList] = useState(false);
    const [openAlert, setOpenAlert] = useState(false);
    const navigate = useNavigate();

    const handleCloseAlert = () => {
        setOpenAlert(false);
    };

    /* const handleSubmit = (event) => {
        setIsLoading(true);

        setTimeout(() => {
            setAlertSeverity("success");
            setAlertMessage("Message envoyé !");
            setOpenAlert(true);
            setIsLoading(false);
            navigate('/Dashboard');
        }, 2000)
    }; */

    return (
      <div className="formContactUs-background">
        <div className="formContactUs-container" id='formulaire'>
          <div className='formContactUs-formContainer'>
            <div className='formContactUs-intro'>
              <p>Une question, une demande de devis ?</p>
              <p>Notre équipe d'expert comptable sera ravie d'y répondre !</p>
            </div>
            <form className='formContactUs-form' name="contact" id='contact-form' method='post' netlify data-netlify="true" action='' >
                <input type="hidden" name='form-name' value="contact" />
                <h3>Envoyer un message</h3>
                <div className='inputGroup'>
                    <div className='inputStyle'>
                        <input type="text" name='firstname' required />
                        <span className="highlight"></span>
                        <span className="bar"></span>
                        <label>Prénom</label>
                    </div>
                    <div className='inputStyle'>
                        <input type="text" name='lastname' required />
                        <span className="highlight"></span>
                        <span className="bar"></span>
                        <label>Nom</label>
                    </div>
                </div>
                <div className='inputGroup'>
                    <div className='inputStyle'>
                        <input type="tel" name='phone' required />
                        <span className="highlight"></span>
                        <span className="bar"></span>
                        <label>Téléphone</label>                
                    </div>
                    <div className='inputStyle'>
                        <input type="email" name='email' required />
                        <span className="highlight"></span>
                        <span className="bar"></span>
                        <label>Email</label>
                    </div>
                </div>
                <div className='inputStyle'>
                    <input type="text" name='company' required />
                    <span className="highlight"></span>
                    <span className="bar"></span>
                    <label>Groupe ou société</label>              
                </div>
                <div className='inputStyle'>
                    <textarea name='information' required />
                    <span className="highlight"></span>
                    <span className="bar"></span>
                    <label>Comment pouvons-nous vous aider ?</label>
                </div>
                {
                    isLoading ?
                    <Oval
                        height={25}
                        width={25}
                        color="var(--primary)"
                        wrapperStyle={{}}
                        wrapperClass=""
                        visible={true}
                        ariaLabel='oval-loading'
                        secondaryColor="#4fa94d"
                        strokeWidth={2}
                        strokeWidthSecondary={2}
                        />
                    :
                    <Button /* onClick={handleSubmit} */ type="submit" variant="contained" style={{ background: 'transparent', color: "rgb(40, 34, 82)" }}>
                        Envoyer
                    </Button>
                }
                
            </form>
          </div>
          <div className='formContactUs-contactInformation'>
            <h3>Contactez-nous</h3>
            <div className='formContactUs-phone'>
                <img src={phone} alt="téléphone" />
                <p>01.43.74.46.07</p>
            </div>
            <div className='formContactUs-mail'>
                <img src={mail} alt="email" />
                <p>CONTACT@AAAFIDUCIAIRE.FR</p>
            </div>
            <LinkSocialNetworks />
            <img src={logo} alt="logo afiduciaire" />
          </div>
        </div>
        <CustomAlert 
                open={openAlert}
                onClose={handleCloseAlert}
                message={alertMessage}
                severity={alertSeverity}
            />
      </div>
    );
};

export default FormContactUs;

any idea ?
2

@ShemoMFR This is just standard HTML/JavaScript behaviour.

Your handleSubmit function has been attached to onclick, it’s sets a loading state, then tries to navigate to /Dashboard after an arbitrary time of 2 seconds.

Your form meanwhile has a blank action, which as it’s not a value, wouldn’t trigger the Custom success page, so your user is directed to the default page.

Since the user is directed to the new page, your JavaScript that is firing on the 2 second setTimeout never executes, as the user has already navigated away.

Your approach is ultimately incorrect for what you’re trying to do, you’ll need to achieve it another way, either by following the documentation and setting the action to the page you expect them to be directed to, or submitting the form via ajax and performing all the custom JavaScript that you want.

3

So if i want to do something, without using Ajax, I should add Action to my form and, of course, attach the submit évent to thé form. Riche ?

4

@ShemoMFR You have two options, (as you always do with form submission), you can let the form submit via its default HTML based form submission, or you can extract and submit the form values via ajax.

If the form submits as a HTML form, then it will behave as a HTML form.

If you submit via ajax, then you’re in control of what happens via your JavaScript.

What you cannot do, is submit via HTML, and then expect your JavaScript to continue executing.

If you’re talking about the onsubmit event, that occurs before submission, (just like the onclick does), not after.

5

Ok Thank you for your answer. I will Check documentation to do it un JavaScript.