VALIDER MON FORMULAIRE REACT SANS POP UP

RAPH966
Javascript React

import React, { useState } from "react";
import emailjs from 'emailjs-com';

const Contact = () => {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [phone, setPhone] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");

function sendEmail(e) {

e.preventDefault();

console.log('sending email')

emailjs.sendForm('my.gmail', 'template_qforei9', e.target,
'user_fELVRdb1kJc5SzL1ge2Br')
.then((result) => {
  console.log('result') 
  });

}

return (
<div className="Contact">
<div>
<h1 className="title-form">Plus d'infos ?</h1>
</div>

  <form onSubmit={sendEmail} className="form">

    <div className="form-group">
      <input placeholder="Nom / Raison sociale *"
        type="text"
        id="lastName"
        className="lasttName"
        name="last_name"
        required />
    </div>
    <hr />

    <div className="form-group">

      <input placeholder="Prénom"
        type="text"
        id="firstName"
        name="user_firstname"
        className="firstName"
        />
    </div>
    <hr />

    <div className="form-group">

        <input placeholder="Email *"
          type="email"
          name="user_email"
          id="email"
          className="email"
          required />
    </div>
    <hr />

    <div className="form-group">
        <input placeholder="Téléphone"
          type="text"
          id="phone"
          className="phone"
          id="phone"
           />
    </div>
    <hr />

    <div className="form-group">
        <textarea placeholder="Message *"
          id="message"
          name='message'
          required
          className="form-textarea"
           />
    </div>
    <hr />

    <div className="form-group">
      <input 
        type="submit"
        value='Envoyer'
        className="form-btn"></input>
    </div>

  </form>
</div>
);
}

export default Contact;

Entourez votre code en utilisant "```" pour bien le mettre en forme. (ne copiez pas trop de code)

Ce que je veux
Bonjour,

je souhaiterais valider mon formulaire en ReactJS sans pop up horrible.
Juste un message qui affiche que le message a bien été envoyé.

Ce que j'obtiens

Rien car je ne veux pas de pop up avec alert

4 réponses

Mickael Christine

Salut, la popup vient de ta lib c'est pas tres claire, parce que je vois rien qui ressemble à une popup dans ton code ?

RAPH966
Auteur

Coucou, c'est volontaire je n'ai pas voulu mettre le alert, car le pop up est très laid, à moins que je puisse le customiser

Mickael Christine

ah ok ben dans ce cas au retour de l'appel passe un message ou un booleen pour déclencher un msg que t'anime en css

    const [success, setSuccess ] = useState(false)

    .then((result) => {
        if(result.status === 200) setSuccess(s => !s) 
      });

      et dans ton formulaire ou ailleurs

      {success && <p>Votre e-mail à bien été envoyé</p>
RAPH966
Auteur

coucou,

merci beaucoup j'ai un tout petit peu adapté et c'est nickel

const [valid, setValid] = useState(false);
.then((result) => {
console.log('result')
setValid(!valid)
});

  Et à la fin de mon formulaire 

   {valid && <p>Message envoyé</p>}