Cómo crear un formulario de contacto en React con TailwindCSS y EmailJS

fwpadmin 28 febrero, 202327 marzo, 2023

En el mundo de la programación, crear un formulario de contacto que se envíe por correo puede ser un proceso tedioso. Sin embargo, en esta guía, aprenderás cómo crear un formulario de contacto que se envíe por correo electrónico con React y TailwindCSS. Al final de este artículo, podrás crear un formulario de contacto personalizado con la capacidad de enviar correos electrónicos directamente desde tu aplicación React.

Crear un formulario de contacto en React

Para comenzar, asegúrate de tener instalado Node.js y una versión reciente de React en tu sistema. También necesitarás instalar TailwindCSS. Para ello, abre tu terminal y escribe los siguientes comandos:

npm install tailwindcss
npm install postcss-cli
npm install autoprefixer

Una vez que hayas instalado TailwindCSS, crea un nuevo archivo en la carpeta src de tu proyecto de React llamado «ContactForm.js». En este archivo, puedes comenzar importando React y creando una clase de componente de React:


import React, { Component } from "react";

class ContactForm extends Component {
  render() {
    return (
      <div className="flex flex-col items-center justify-center h-screen">
        <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
          {/* Add form fields here */}
        </form>
      </div>
    );
  }
}

export default ContactForm;

Ahora que has creado la clase de componente, puedes comenzar a agregar los campos de formulario que deseas incluir en el formulario de contacto. Por ejemplo, si deseas agregar campos para el nombre, correo electrónico y mensaje, puedes agregar lo siguiente dentro del formulario:


<div className="mb-4">
  <label className="block text-gray-700 font-bold mb-2" htmlFor="name">
    Nombre:
  </label>
  <input
    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
    id="name"
    type="text"
    placeholder="Ingresa tu nombre"
  />
</div>
<div className="mb-4">
  <label className="block text-gray-700 font-bold mb-2" htmlFor="email">
    Correo electrónico:
  </label>
  <input
    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
    id="email"
    type="email"
    placeholder="Ingresa tu correo electrónico"
  />
</div>
<div className="mb-4">
  <label className="block text-gray-700 font-bold mb-2" htmlFor="message">
    Mensaje:
  </label>
  <textarea
    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
    id="message"
    placeholder="Escribe tu mensaje"
  />
</div>

Con los campos de formulario creados, es hora de agregar la funcionalidad de envío de correo electrónico al formulario. Para hacer esto, puedes agregar un método handleSubmit a la clase de componente que maneje la lógica de envío de correo electrónico:

handleSubmit = (event) => {
  event.preventDefault();

  // Get form data
  const formData = {
    name: event.target.name.value,
    email: event.target.email.value,
    message: event.target.message.value,
  };

  // Send email using emailjs
  emailjs
    .send(
      "service_xxxxxx",
      "template_xxxxxx",
      formData,
      "user_xxxxxx"
    )
    .then(
      (response) => {
        console.log("SUCCESS!", response.status, response.text);
      },
      (err) => {
        console.log("FAILED...", err);
      }
    );

    // Clear form
    event.target.reset();
};

Con el método handleSubmit creado, ahora necesitas agregar la lógica de manejo de eventos para que el método se active cuando el usuario envíe el formulario. Agrega el siguiente código en el formulario:

<div className="flex items-center justify-between">
  <button
    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
    type="submit"
  >
    Enviar
  </button>
</div>

Por último, debes agregar el servicio de correo electrónico que usarás para enviar el correo electrónico. En este ejemplo, usaremos EmailJS, que es una biblioteca que te permite enviar correos electrónicos directamente desde tu aplicación sin necesidad de un servidor. Para comenzar, crea una cuenta en el sitio web de EmailJS y obtén tu ID de usuario, ID de plantilla de correo electrónico y ID de servicio de correo electrónico.

Una vez que hayas obtenido estos IDs, agrega el siguiente código al componente:

import emailjs from "emailjs-com";

class ContactForm extends Component {
  handleSubmit = (event) => {
    event.preventDefault();

    // Get form data
    const formData = {
      name: event.target.name.value,
      email: event.target.email.value,
      message: event.target.message.value,
    };

    // Send email using emailjs
    emailjs
      .send(
        "service_xxxxxx",
        "template_xxxxxx",
        formData,
        "user_xxxxxx"
      )
      .then(
        (response) => {
          console.log("SUCCESS!", response.status, response.text);
        },
        (err) => {
          console.log("FAILED...", err);
        }
      );

    // Clear form
    event.target.reset();
  };

  render() {
    return (
      <div className="flex flex-col items-center justify-center h-screen">
        <form
          className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
          onSubmit={this.handleSubmit}
        >
          <div className="mb-4">
            <label
              className="block text-gray-700 font-bold mb-2"
              htmlFor="name"
            >
              Nombre:
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="name"
              type="text"
              placeholder="Ingresa tu nombre"
            />
          </div>
          <div className="mb-4">
            <label
              className="block text-gray-700 font-bold mb-2"
              htmlFor="email"
            >
              Correo electrónico:
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="email"
              type="email"
              placeholder="Ingresa tu correo electrónico"
            />
          </div>
          <div className="mb-4">
            <label
              className="block text-gray-700 font-bold mb-2"
              htmlFor="message"
            >
              Mensaje:
            </label>
            <textarea
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="message"
              placeholder="Escribe tu mensaje aquí"
              rows="8"
            ></textarea>
          </div>
          <div className="flex items-center justify-between">
            <button
              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="submit"
            >
              Enviar
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default ContactForm;

En el código anterior, reemplaza service_xxxxxx, template_xxxxxx y user_xxxxxx con tus propios IDs de EmailJS. Una vez que hayas hecho esto, podrás enviar correos electrónicos desde tu formulario de contacto.

En conclusión, crear un formulario de contacto en React con TailwindCSS y EmailJS es una manera sencilla de agregar funcionalidad de envío de correos electrónicos a tu sitio web. Siguiendo los pasos que hemos proporcionado, podrás crear un formulario de contacto atractivo y funcional en poco tiempo. Además, al usar EmailJS, el proceso de envío de correos electrónicos es muy sencillo y no requiere la configuración de un servidor de correo electrónico. ¡No dudes en utilizar este tutorial como punto de partida para crear tus propios formularios de contacto en React!