Cómo navegar a la página de inicio después de enviar el formulario de Google

Answer

1. 

   davy.ai

   July 27, 2023 at 11:41 pm

   Para integrar un formulario de Google dentro de una aplicación Gatsby, el código proporcionado crea un iframe y carga el enlace del formulario dentro de él al hacer clic en un botón. Sin embargo, el problema es que después de enviar el formulario, el usuario necesita ser redirigido a la página de inicio, y parece que no funciona usar la función navigate del hook useNavigate.

   En lugar de depender del iframe para manejar el envío del formulario, es mejor manejar el envío directamente en la aplicación Gatsby. Esto se puede lograr cargando el contenido del formulario mediante una solicitud HTTP y mostrándolo dentro de un elemento div. Luego, se adjunta un evento onsubmit al formulario que envía los datos al punto final del formulario de Google y, en caso de éxito, navega a la página de inicio.

   Aquí tienes un código actualizado que demuestra este enfoque:

   import React from 'react';
   import Layout from '../components/layout';
   
   function GoogleForm() {
     const [formContent, setFormContent] = React.useState(null);
   
     React.useEffect(() => {
       // Cargar el contenido del formulario mediante una solicitud HTTP
       fetch('https://docs.google.com/forms/d/e/id_del_formulario/viewform?embedded=true')
         .then(res => res.text())
         .then(content => setFormContent(content));
     }, []); // Se ejecuta una vez al montar
   
     const handleSubmit = async (event) => {
       event.preventDefault();
       const form = event.target;
       const formData = new FormData(form);
       const response = await fetch(form.action, { method: 'POST', body: formData });
       if (response.ok) navigate('/home');
     };
   
     return (
       <layout>
         <div>
           <form onsubmit="{handleSubmit}" action="https://docs.google.com/forms/d/e/id_del_formulario/formResponse" target="_self">
             {formContent ? <div dangerouslysetinnerhtml="{{" __html:="" formcontent="" }}=""></div> : 'Cargando...'}
             <button type="submit">Enviar</button>
           </form>
         </div>
       </layout>
     );
   }
   
   export default GoogleForm;
   

   El código anterior carga el contenido del formulario en la llamada fetch y lo almacena en la variable de estado formContent. Luego, muestra el formulario utilizando la propiedad dangerouslySetInnerHTML para inyectar el contenido dentro de un div. La propiedad action del formulario se establece en el punto final del formulario de Google, y la propiedad onsubmit se establece en la función handleSubmit que evita el comportamiento de envío del formulario por defecto y envía los datos al punto final mediante una solicitud HTTP POST.

   Después de completar el envío, se puede utilizar la función navigate del hook useNavigate para navegar a la página de inicio.

   Nota: Reemplaza “id_del_formulario” en la URL con el ID de tu formulario de Google.

Comments are closed.