Cómo modificar los estilos con css en un Google Form

"poder tener dos o más campos en la misma línea para ahorrar espacio"- Google Docs Editors Community

Te pidieron que un formulario siga el diseño de tu organización y las opciones de tema de Google Forms se quedan cortas. Puedes cambiar la imagen de encabezado, los colores y las fuentes, pero las preguntas siguen en una sola columna. La barra del título y el espaciado quedan como Google los dejó. Insertar el formulario en tu sitio web no ayuda, porque el CSS de tu sitio no puede llegar dentro del iframe. Con Formfacade puedes pasar el formulario a dos columnas, configurar sus colores y agregar tu propio CSS para todo lo demás.

Estas son tres formas de cambiar el aspecto de un formulario de Google Forms, con las limitaciones de cada una.

La necesidad:

Durante la crisis del COVID-19, el Centre of Small & Medium Enterprises organiza capacitaciones en línea con regularidad para que las pymes se preparen, junto con sus empleados, para las medidas de seguridad al reabrir sus negocios. El centro quería crear un formulario de inscripción a capacitaciones limpio y sencillo como este.
El formulario de inscripción a capacitaciones que quería el centro, con fondo verde azulado y dos columnas

1. Personaliza el tema en Google Forms

Google Forms te deja elegir una imagen de encabezado, un color de tema, un color de fondo y fuentes. La limitación: las preguntas se quedan en una sola columna y no puedes cambiar la barra del título, el espaciado ni el botón por separado. Si insertas el formulario en tu sitio web, el CSS de tu sitio no puede llegar dentro del iframe.
Un formulario de Google Forms llamado Training Registration con First Name, Last Name, Email Address, Occupation y Business Name

2. Crea tu propio formulario HTML

Escribe en tu sitio web un formulario HTML que envíe cada respuesta a tu formulario de Google Forms usando el entry ID de cada pregunta.
La limitación: tienes que encontrar cada entry ID, actualizar el código cada vez que cambia el formulario y manejar los errores tú mismo.

3. Usa Formfacade y tu propio CSS

Formfacade los ayuda a diseñar este formulario de Google Forms para que se vea como lo imaginaron.
Te voy a mostrar la transformación del formulario con una guía detallada paso a paso. Acompáñame a personalizar el formulario y agregar CSS a sus elementos para lograr el estilo.

Paso 1: Preparar el formulario para personalizarlo

  • Haz clic en Crea tu formulario, ponle nombre a tu formulario, haz clic en Build form y luego en Proceed.
  • Haz clic en la pestaña "Preview"
Las pestañas Edit, Preview, Share y Responses, con Preview marcada
2. Haz clic en la pestaña "LAYOUT" en la barra lateral y selecciona "Comfortable" para cambiar el diseño a 2 columnas. Haz clic en "Apply to this form".
La configuración de vista previa del formulario con la pestaña LAYOUT, Comfortable y el botón Apply to this form resaltados
3. En la misma barra lateral, haz clic en la pestaña "THEME" para cambiar los colores del formulario. El botón "Apply to all forms" aplica los colores a todos tus formularios.
La configuración de vista previa del formulario con la pestaña THEME, Primary color y Background resaltados
4. Mira cómo tu formulario cambia de imagen con Formfacade y compáralo con el formulario de ejemplo.
Casi listo, ¿verdad? ¡Pero espera!
Quedan algunos detalles por ajustar en el título
- El título tiene que ser rojo carmesí - código hex #DC143C o rgb(220,20,60)
- El título debe tener de fondo una franja blanca que vaya de borde a borde.
- La descripción debe quedar en negro. Y centrada.
- Hay que ajustar el relleno (padding) en todas partes.
Training Registration en Formfacade con dos columnas y fondo verde azulado, antes de agregar el CSS
5. Usemos "Inspeccionar" para ver qué CSS funciona.
6. Hice estos ajustes en "Inspeccionar" y llegué a este código CSS.
.ff-title {
color:#DC143C !important;
padding: 20px !important;
background-color: white;
position: relative;
transform: translateX(-4%);
width: 109%;
}
.ff-description {
padding-top: 20px !important;
align: center !important;
}
.ff-form {
padding: 0px 30px !important;
}
.ff-compose {
padding: 0px !important;
background: none !important
}
.ff-section {
padding-top: 0px !important;
}
7. Ahora agrego el código a mi formulario. Hago clic en "EDIT", en el título del formulario, luego en el ícono ⚙️ y en la pestaña "Advanced" para agregarlo en "Custom CSS". Haz clic en "Save".
Training Registration en el editor de Formfacade con la pestaña EDIT y el ícono de engranaje de la tarjeta del título resaltados
8. Mira el video de abajo para ver cómo se transforma el formulario cuando agrego el código parte por parte.
Y aquí está el formulario final. Se ve increíble, ¿no?
El formulario Training Registration final con el título carmesí sobre una franja blanca, dos columnas y un botón Submit verde
¿Qué te parece este tipo de personalización? Muéstranos tus diseños y escríbenos a support@formfacade.com.

¡Extra!

Esta es una tabla que compara las personalizaciones posibles con Google Forms y con Formfacade.
1. Busca en esta tabla la personalización que quieres para tu formulario o campo.
2. Haz clic en el artículo vinculado para ver un tutorial detallado paso a paso y lograr el diseño que quieres.
Haz que tu formulario de Google Forms se vea genial en tu sitio web. ¡Feliz diseño!
Formulario Google Forms Formfacade
Diseño Una columna estándar Varias columnas
Color de fondo/del tema Sí Sí
Color del botón No Sí
Campos del formulario No Sí
Cambiar la configuración de fuente
Color de fuente ? No
Estilo de fuente Sí Sí
Estilos CSS avanzados No Sí
Campos
Cambiar el texto indicativo No Sí
Apariencia (oculto/solo lectura) No Sí
¿Cambiar el nombre de la pregunta? No Sí
Rellenado previo Sí Sí
Campos calculados No Sí
Personalización avanzada (formato de texto - negrita, cursiva) No Sí
Seguimiento de conversiones No Sí
Integración con Hotjar No Sí
Carga de archivos Drive, requiere iniciar sesión Sí

Resumen

El tema de Google Forms cambia los colores y las fuentes, pero no el diseño ni el espaciado. El CSS de tu sitio web no puede llegar a un formulario dentro de un iframe. Con Formfacade cambias el diseño y los colores y agregas tu propio CSS para ajustar el resto. Crea tu formulario y sigue los pasos de arriba. Si tienes preguntas, escribe a soporte.

Última actualización: