Descubre cómo combinar la flexibilidad de HTML con la potencia de Google Forms. Personaliza tus formularios y configura notificaciones automáticas para optimizar tus flujos de trabajo.
Guía paso a paso para crear un formulario de contacto personalizado, desde la estructura HTML hasta la configuración de notificaciones por correo electrónico. Utiliza Google Forms para simplificar la gestión de tus datos.
Antes de nada ver ejemplo del desarrollo
Y este es el formulario de base, Formulario
Para crear el formulario
Para crear un formulario de contacto personalizado en HTML que utilice Google Forms para recopilar respuestas en una hoja de cálculo de Google y enviar notificaciones a tu Gmail, necesitarás seguir estos pasos:
- Crear un formulario de Google Forms
- Obtener la URL de acción del formulario
- Crear tu formulario HTML personalizado
- Configurar las notificaciones por correo electrónico
Vamos a desglosar cada paso:
- Crear un formulario de Google Forms:
- Ve a Google Forms y crea un nuevo formulario con los campos que deseas en tu formulario de contacto.
- Asegúrate de que las respuestas se guarden en una hoja de cálculo de Google.
Obtener la URL de acción del formulario:
Puedes encontrar esto inspeccionando el código fuente del formulario de Google Forms original
- Crear tu formulario HTML personalizado:
<script src="https://cdn.tiny.cloud/1/tu-api/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script> <script> tinymce.init({ selector: 'textarea#message', // ID del campo textarea donde se aplica TinyMCE menubar: false, plugins: 'link lists paste', // Activa los plugins necesarios toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link', branding: false }); // Asegurar que TinyMCE guarda el contenido en el textarea antes de enviar el formulario function guardarContenido() { tinymce.triggerSave(); // Actualiza el contenido del textarea con lo que está en TinyMCE } </script> <form action="https://docs.google.com/forms/u/0/d/e/tuid de formulario/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;"> <div class="field border large"> <label for="name">Título:</label> <input type="text" id="name" name="entry.1513806417" required><br><br> </div> <div class="field border large"> <label for="email">Correo Electrónico:</label> <input type="email" id="email" name="entry.1644994739" required><br><br> </div> <label for="message">Mensaje:</label> <textarea id="message" name="entry.1001676245" rows="5" required></textarea><br><br> <input class="button border" type="submit" value="Enviar"> </form>Necesitarás hacer las siguientes modificaciones en este código:
- Reemplaza "TU_URL_DE_GOOGLE_FORMS_AQUI" con la URL de acción que obtuviste en el paso 2.
- Reemplaza "entry.XXXXXX" con los IDs correctos para cada campo. Puedes encontrar estos IDs inspeccionando el código fuente del formulario de Google Forms original.
Para encontrar los IDs:
- Ve a tu formulario de Google Forms y haz clic en el botón de vista previa (icono de ojo).
- Haz clic derecho en la página y selecciona "Ver código fuente".
- Busca
entry.en el código fuente. Deberías ver algo comoentry.1234567890para cada campo.
Con estos pasos, tendrás un formulario de contacto personalizado en HTML que envía las respuestas a una hoja de cálculo de Google y te notifica por correo electrónico cuando recibes una nueva respuesta, tal como lo hace Google Forms, pero con tu propia interfaz HTML.
Ahora crearemos el comando
Pasos Básicos para Crear un Comando:
- Abre tu formulario en Google Forms: Ve a tu formulario y haz clic en los tres puntos verticales en la esquina superior derecha.
- Pulsa editor de comandos.
- Escribe lo siguiente
function enviarCorreo(e) { // Verificar la estructura del evento (para depurar) console.log(e); // Obtener las respuestas del formulario var itemResponses = e.response.getItemResponses(); // Extraer los valores de las respuestas (ajusta los índices según tu formulario) var nombre = itemResponses[0].getResponse(); var correoElectronico = itemResponses[1].getResponse(); var mensaje = itemResponses[2].getResponse(); // Crear el cuerpo del mensaje del correo en HTML var messageBody = "<h2></h2>"; messageBody += mensaje; // Este ya contiene el HTML formateado por TinyMCE messageBody += "<p><strong>Título</strong> " + nombre + "</p>"; messageBody += "<p><strong>Creado por:</strong> " + correoElectronico + "</p>"; messageBody += "<h3>Mensaje:</h3>"; // Asunto del correo var subject = nombre; // Enviar el correo MailApp.sendEmail({ to: "correo @donde enviar datos", subject: subject, htmlBody: messageBody }); } function onFormSubmit(e) { enviarCorreo(e); }Explicación del código
- TinyMCE: El script en la cabecera carga TinyMCE desde el CDN de Tiny Cloud y lo aplica al campo
textareacon el IDmessage. Esto transforma el campo de texto en un editor visual con opciones de formato, debes poner tu api ...Aqui - Formulario: El formulario sigue siendo un formulario HTML estándar, pero el contenido del campo
textareaque ahora usa TinyMCE se enviará en formato HTML. - El campo de correo / to: "correo @donde enviar datos"/ es donde debes poner el correo donde puedes enviar los datos, por ejemplo puedes enviar los datos a un blog de blogger.
-
Mejorando la idea de proyecto
- Blogger te ofrece una funcionalidad bastante útil para publicar directamente entradas en tu blog a través de correos electrónicos. Esta característica puede ser muy práctica si quieres realizar publicaciones rápidas desde tu cliente de correo electrónico.
- Configurando Blogger para Recibir Entradas por Correo
- Accede a tu panel de control de Blogger: Inicia sesión en tu cuenta de Google y ve a Blogger.
- Selecciona tu blog: Elige el blog al que deseas enviar las entradas por correo.
- Ve a Configuración: En el menú de la izquierda, busca y haz clic en "Configuración".
- Accede a la sección de Correo electrónico y móvil: Busca la sección "Publicar entradas mediante correo electrónico".
- Habilita la opción: Activa la casilla que dice "Publicar correo electrónico inmediatamente" o "Guardar correos electrónicos como entradas de borrador", según tus preferencias.
- Copia la dirección de correo: Blogger te proporcionará una dirección de correo electrónico única para tu blog. Esta es la dirección a la que deberás enviar tus entradas.
"Como dice el refrán, 'una imagen vale más que mil palabras'. Para ilustrar mejor los puntos tratados en este artículo, te sugiero visitar [Enlace al sitio web]. En este sitio encontrarás un caso de estudio que demuestra de manera tangible cómo aplicar los conceptos expuestos."
"Si encuentras algún error o tienes alguna sugerencia, no dudes en dejar un comentario a continuación.""Tus comentarios son muy valiosos para nosotros. Si algo no está claro o encuentras algún error, por favor, indícalo en los comentarios."
No hay comentarios:
Publicar un comentario