Cómo crear un formulario de contacto con Netlify Forms y Next.js

Si desea que alguien pueda comunicarse con usted o enviar información en un sitio web, un formulario HTML es una forma bastante estándar de lograrlo.

Pero aceptar envíos de formularios generalmente requiere un servicio adicional o un código complejo del lado del servidor. ¿Cómo podemos aprovechar Netlify para crear fácilmente nuevos formularios?

  • ¿Qué es Netlify?
  • ¿Qué vamos a construir?
  • ¿Cuánto cuesta este?
  • Parte 1: Crear un formulario de contacto con HTML
  • Parte 2: Agregar un formulario Netlify personalizado a una aplicación Next.js React

¿Qué es Netlify?

Netlify es una plataforma web que le permite implementar fácilmente nuevos proyectos web con flujos de trabajo fáciles de configurar. Esto incluye la implementación de un sitio web estático, funciones lambda y, como hablaremos aquí, formularios personalizados.

Su servicio de formulario funciona como parte del proceso de construcción e implementación. Cuando incluimos un formulario con un atributo específico en nuestra página, Netlify reconocerá ese formulario y lo configurará para que funcione.

¿Qué vamos a construir?

Vamos a crear un formulario de contacto que permitirá a las personas enviarle una nota a través de su sitio web.

El formulario en sí será bastante simple. Como un formulario de contacto estándar, le pediremos el nombre, la dirección de correo electrónico y un mensaje de alguien.

Vamos a construir esto usando HTML simple para demostrar cómo funciona y luego lo construiremos con Next.js para crear un formulario en una aplicación React.

¿Cuánto cuesta este?

Los formularios de Netlify son gratuitos para comenzar. Este nivel gratuito está limitado a 100 envíos de formularios por sitio web por mes, por lo que si permanece por debajo de eso, siempre será gratis.

Dicho esto, si excede el envío de 100 formularios en cualquier sitio en particular, el primer nivel será de $ 19 + al momento de escribir esto. Puede consultar los planes de precios más recientes en el sitio web de Netlify.

Parte 1: Crear un formulario de contacto con HTML

Para empezar, crearemos un formulario básico con HTML puro. Es una victoria rápida demostrar cómo funciona esto.

Paso 1: crear un formulario HTML

Para nuestra forma, realmente podemos usar lo que queramos. Los formularios de contacto pueden ser tan simples como una dirección de correo electrónico y un campo de mensaje o pueden incluir una variedad de opciones para ayudar a una empresa a responder preguntas específicas.

Comenzaremos con algo simple. Crearemos un formulario que solicita el nombre, la dirección de correo electrónico y un mensaje de alguien.

Para comenzar, cree un nuevo archivo HTML en la raíz de su proyecto. Este archivo HTML debe incluir la estructura básica de un documento HTML. Dentro del cuerpo, agreguemos nuestra nueva forma:

Name

Email

Message

Send

En el fragmento de arriba, estamos:

  • Creando un nuevo formulario
  • El formulario tiene un atributo de nombre, un método y un data-netlifyatributo establecido entrue
  • Creación de 3 campos de formulario con etiquetas, cada uno identificado con un atributo de nombre
  • Crear un botón para enviar el formulario

Lo que más queremos prestar atención es el data-netlifyatributo y la forma name. Cuando Netlify lea el sitio, verá esos campos y los utilizará para convertir su formulario en un formulario que funcione activamente.

También voy a agregar un poco de CSS para que las etiquetas se vean un poco más consistentes. Opcionalmente, puede agregar esto al documento:

 body { font-family: sans-serif; } label { display: block; margin-bottom: .2em; }  

¡Y en este punto, deberíamos tener una forma básica!

Ahora querrá poner este formulario en GitHub o en su proveedor favorito de Git compatible con Netlify y estaremos listos para el siguiente paso.

¡Sigue el compromiso!

Paso 2: configurar un nuevo formulario con Netlify

Una vez que nuestro formulario se envía a nuestro proveedor de Git, ahora podemos sincronizarlo con Netlify.

Primero cree una cuenta o use una cuenta existente con Netlify y haga clic en el botón Nuevo sitio desde Git .

Aquí, seleccione el proveedor de Git que utilizó. Estoy usando GitHub en mi ejemplo.

Una vez que seleccione su proveedor de Git, le pedirá que autorice el acceso para que Netlify pueda encontrar su repositorio de Git.

Después de conectar correctamente su cuenta, ahora debería ver una lista de los repositorios a los que proporcionó acceso. Busque el repositorio al que agregó su formulario y selecciónelo.

Si me está siguiendo, nuestro formulario es HTML puro, lo que significa que no debería haber pasos de compilación ni un directorio especial en el que se publique. Pero siéntete libre de modificar estos ajustes si hiciste algo diferente.

Ahora, haga clic en Implementar sitio que abrirá una nueva página en Netlify y en poco tiempo su sitio se implementará con éxito.

Finalmente, haga clic en la URL en la parte superior del panel del proyecto de Netlify que termina en netlify.app. Una vez que esté cargado, verá su formulario.

Paso 3: Ver envíos de formularios

Ahora que tenemos nuestro formulario, finalmente queremos ver respuestas.

Para comenzar, agregue información a su formulario y haga clic en enviar.

Una vez que envíe, notará que lo llevan a una página de Netlify que dice que el formulario se envió correctamente.

Ahora puede volver al tablero de su proyecto de Netlify y desplazarse un poco hacia abajo donde ahora puede ver un cuadro con envíos de formularios recientes , así como su nuevo envío.

Parte 2: Agregar un formulario Netlify personalizado a una aplicación Next.js React

Si el formulario va a vivir por sí solo y no formará parte de un sitio más grande, hay muchas ventajas en dejar su formulario como HTML puro. Pero a menudo, queremos que nuestro formulario de contacto sea parte de nuestro sitio web o aplicación.

Aquí veremos cómo agregar un formulario a una aplicación Next.js.

Nota: nuestra demostración del uso de Next.js es una aplicación renderizada estáticamente. Si está cargando su formulario del lado del cliente, lo que significa que el HTML subyacente no incluye el formulario, consulte las notas en la parte inferior de esta página para obtener más información sobre las soluciones.

Paso 0: crear una aplicación Next.js

Para empezar, necesitamos una aplicación. Vamos a usar Next.js ya que podemos crear una nueva aplicación desde cero con bastante facilidad.

Para hacer esto, puede navegar hasta donde desea crear la aplicación y ejecutar:

yarn create next-app [project-name] # or npx create-next-app [project-name] 

Voy a nombrar mi proyecto my-nextjs-netlify-form.

Una vez que Next.js termine de instalar las dependencias, le dará instrucciones para navegar al directorio de su proyecto e iniciar su servidor de desarrollo.

Y después de ejecutar yarn devo npm run dev, debería estar listo para usar su aplicación Next.js:

¡Sigue el compromiso!

Paso 1: agregar un formulario HTML a una aplicación Next.js

Nuestro Paso 1 se verá muy similar a la Parte 1.

Dentro de pages/index.js, queremos encontrar nuestro contenedor de cuadrícula y lo usaremos para agregar nuestro formulario.

Busque y reemplace todo el bloque con lo siguiente:

Name

Email

Message

Send

Esto es lo que estamos haciendo:

  • Aprovechamos la cuadrícula existente de Next.js
  • También estamos aprovechando la tarjeta existente en la que incluiremos nuestro formulario
  • Dentro de la tarjeta, vamos a pegar exactamente en el mismo formulario HTML que en la Parte 1

Si recargamos la página, ahora podemos ver nuestro formulario dentro de una tarjeta, así:

Ahora, antes de seguir adelante, queremos hacer 2 cosas.

Primero, debido a que estamos creando este formulario en una aplicación de JavaScript, Netlify recomienda que agreguemos una entrada oculta con el nombre de nuestro formulario.

Dentro de nuestro formulario, agregue la siguiente entrada en la parte superior del elemento del formulario:

Asegúrese de que el valor de esa entrada sea el mismo que el nombre de su formulario.

En segundo lugar, debido a que la tarjeta que estamos reutilizando está destinada a una lista de enlaces, Next.js incluye algunos efectos de desplazamiento. Esto hace que el formulario sea confuso de usar, así que eliminemos esos

Quite lo siguiente de styles/Home.module.css:

.card:hover, .card:focus, .card:active { color: #0070f3; border-color: #0070f3; } 

Para obtener un paso adicional, actualizaré el título de mi página a "Contáctame" y eliminaré la descripción. Siéntete libre de hacer de esto lo que quieras.

Y una vez que esté listo, al igual que antes, agregue esto como un nuevo repositorio a GitHub o su proveedor de Git favorito.

¡Sigue el compromiso!

Paso 2: configurar e implementar su aplicación Next.js en Netlify

La implementación de nuestra aplicación en Netlify se verá bastante similar, pero antes de llegar allí, debemos configurar nuestra aplicación Next.js para poder exportar en build.

En nuestra aplicación Next.js, dentro del package.jsonarchivo, queremos actualizar el buildscript a:

"build": "next build && next export", 

Ahora, cuando ejecute el buildscript, compilará la aplicación en HTML, CSS y JS estáticos dentro del outdirectorio. Esto nos permitirá implementarlo en Netlify. Incluso puede probarlo localmente en su máquina si lo desea.

Con ese cambio, confírmelo y envíelo a su proveedor de Git.

A continuación, la implementación de la aplicación será similar a la Parte 1. La única diferencia es que tenemos una aplicación Next.js, por lo que necesitamos agregar nuestros pasos de compilación.

Para comenzar, queremos conectar nuestro proveedor de Git como en la Parte 1.

Una vez que lleguemos a la página de configuración de implementación, queremos configurar nuestro comando de compilación y nuestro directorio de publicación.

Nuestro comando de construcción será yarn buildo npm run builddependiendo de lo gestor de paquetes que utilizó y el directorio de publicación será out.

Después de eso, haga clic en Implementar sitio y se iniciará como antes.

Una vez que haya terminado de implementar, ahora estaremos listos para abrir la aplicación.

Y una vez que abrimos nuestra aplicación, podemos probar nuestro formulario llenándolo y presionando enviar.

Al igual que antes, llegaremos a una página de éxito de Netlify. Pero si retrocedemos y miramos dentro de nuestro panel de Netlify, ¡ahora veremos nuestro envío!

¡Sigue el compromiso!

Bonificación: mantenga a las personas en su sitio web con un mensaje de éxito

Otra característica interesante de los formularios de Netlify es que le permite configurar su formulario para mantener a las personas en su sitio web configurando el formulario directamente en la página.

Tiene muchas opciones aquí, ya sea redirigir a alguien a una nueva página o configurar mensajes en la página desde la que envió.

Para esta demostración, vamos a configurar un parámetro de URL que podemos detectar para mostrar un mensaje de éxito si vemos ese parámetro.

Para hacer esto, en su formulario HTML, agregue el siguiente atributo:

action="/?success=true" 

Esto le dirá a Netlify que queremos permanecer en la página de inicio (ya que solo tenemos una página) pero aplicaremos el parámetro de URL para que podamos detectarlo en nuestra aplicación.

A continuación, podemos usar los hooks useStatey useEffectpara ver este parámetro y actualizar la página.

En la parte superior del archivo, importemos estos ganchos:

import { useState, useEffect } from 'react'; 

Dentro de nuestro componente Inicio en la parte superior, agreguemos nuestro estado:

const [success, setSuccess] = useState(false); 

Y para detectar el parámetro de URL, podemos usar el useEffectgancho:

useEffect(() => { if ( window.location.search.includes('success=true') ) { setSuccess(true); } }, []); 

Nota: esta es una forma sencilla de lograr este resultado para la demostración. Si tiene una aplicación más complicada, es posible que desee nombrar el parámetro con algo más lógico y analizar correctamente los parámetros de URL para el valor.

Lo que hace esto es que cuando el componente se procesa, activará este useEffectgancho, verificará los parámetros en la URL y buscará success=true. Si lo encuentra, actualizará nuestra successvariable de estado a true!

A continuación, debajo del título de nuestra página (

), agreguemos el siguiente fragmento:

{success && ( 

Successfully submitted form!

)}

Aquí estamos viendo si successes cierto, y si lo es, incluimos una línea de texto que dice que el formulario se envió correctamente.

Si bien no puede enviar su formulario localmente, puede probarlo visitando su aplicación que se ejecuta localmente con el ?success=trueparámetro de URL como:

//localhost:3000/?success=true 

Finalmente, puede enviar estos cambios a su proveedor de Git y Netlify reconstruirá automáticamente su sitio.

Y una vez que esté terminado, puede enviar su formulario como antes y ver el mensaje de éxito.

¡Y vea que nuestro formulario aún se está enviando!

¡Sigue el compromiso!

Formularios de Netlify y código del lado del cliente

Una cosa a tener en cuenta con la solución de Netlify es que esto solo funciona de esta manera “simplemente” para páginas HTML estáticas.

Si su página usa JavaScript para administrar el contenido de esa página, como no agregar un formulario hasta después de que se cargue la página, deberá consultar la documentación de Netlify sobre cómo puede hacer que esto funcione con un atributo de formulario adicional.

Netlify también ofrece un ejemplo de cómo puede enviar su formulario de forma dinámica con JavaScript para que pueda crear una experiencia personalizada en su aplicación.

¿Qué más puedes hacer?

Configurar flujos de trabajo avanzados con otras herramientas

Netlify le permite integrarse con otras herramientas para permitirle disputar sus envíos de formularios. En particular, Netlify funciona con Zapier, lo que significa que puede aceptar envíos entrantes y hacer lo que quiera con ellos.

//docs.netlify.com/forms/notifications/

Prevención del spam con reCAPTCHA

El spam también es algo real. No desea que su bandeja de entrada se llene de spam, por lo que puede aprovechar el campo Honeypot integrado de Netlify o ellos le explicarán cómo agregar reCAPTCHA 2.

//docs.netlify.com/forms/spam-filters/

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín
  • ? Patrociname