Formulario de contacto

Enlaces destacados

1. Documentación de Company XYZ sobre los ajustes de encabezados
2. Documentación de Company XYZ sobre los ajustes de fondo de sección
3. Documentación de Company XYZ sobre los ajustes de color
4. Documentación de Company XYZ sobre los ajustes de visibilidad
5. Documentación de Shopify sobre secciones y bloques

Videos útiles

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Use este bloque para recopilar mensajes de clientes en un diseño limpio y con marca personalizada. Puede introducir el formulario con contenido opcional de encabezado, ajustar el estilo del botón de envío y refinar cómo aparece el bloque en escritorio y en móviles. Para una visión general más amplia de cómo funcionan los bloques en el editor de temas, consulte documentación de Shopify sobre secciones y bloques

Ajustes básicos

Los ajustes básicos dan forma a la llamada a la acción principal del formulario. Empiece aquí cuando quiera que el bloque tenga más presencia o sea más fácil de usar en pantallas pequeñas.

1. Elija un estilo de botón que se ajuste a la página. Los estilos rellenos suelen funcionar mejor cuando enviar un mensaje es la acción principal, mientras que los estilos sencillos resultan más ligeros cuando el formulario se sitúa junto a otro contenido.
2. Active un botón móvil de ancho completo cuando la usabilidad en teléfonos sea importante. Esto hace que la acción de enviar sea más fácil de localizar y pulsar en diseños más ajustados.

Consejo

Si este bloque es el objetivo principal de la página, use un estilo de botón más destacado y la opción de ancho completo en móviles para que completar el formulario resulte más sencillo.

Ajustes de encabezado

Los ajustes de encabezado le ayudan a explicar la finalidad del formulario y a dar al bloque una estructura más sólida. Son opcionales, pero pueden hacer que la página sea más clara y más fácil de recorrer. Consulte ajustes de encabezado para ver el patrón compartido del encabezado.

1. Añada un encabezado y un subtítulo para decir a los visitantes para qué sirve el formulario, sobre qué pueden preguntar o qué respuesta deberían esperar.
2. Use la leyenda y el icono con cuidado si quiere un poco más de personalidad o énfasis. En diseños más formales, un encabezado sencillo solo con texto suele ser la opción más limpia.
3. Defina el tipo de encabezado para que coincida con la estructura de la página y así el bloque se sienta integrado en lugar de competir con el título principal de la página.
4. Alinee el texto según el diseño. La alineación a la izquierda suele ser la más fácil de leer, mientras que el texto centrado puede funcionar bien en diseños más promocionales o minimalistas.

Evite usar aquí el nivel de encabezado superior de la página, a menos que este bloque deba llevar el título principal de la página.

Ajustes estándar de bloque

Ajustes de fondo de bloque

Estos ajustes le permiten colocar el formulario sobre un fondo de color, degradado, imagen o vídeo. Son útiles cuando quiere separar el bloque del contenido circundante o convertirlo en un área más personalizada de la marca. Consulte ajustes de fondo para ver el comportamiento compartido.

1. Use un color sólido o un degradado sutil cuando la legibilidad sea la prioridad. Suele ser la opción más segura para formularios.
2. Añada una superposición sobre imágenes o vídeo para que el área del encabezado siga siendo legible sobre medios con mucho contenido.
3. Defina medios específicos para móviles solo cuando sea necesario si la imagen o el vídeo de escritorio se recortan de forma poco adecuada en pantallas pequeñas.
4. Use fondos de vídeo con moderación para que el movimiento no distraiga de completar el formulario.

Precaución

Después de añadir una imagen, un degradado o un vídeo de fondo, compruebe el bloque tanto en escritorio como en móviles para asegurarse de que el texto y las acciones siguen destacando con claridad.

Ajustes de color

Estos ajustes anulan los colores predeterminados del icono y del contenido de texto del bloque. Úselos cuando el formulario esté sobre un fondo personalizado o deba coincidir con una campaña o estilo de página concreto. Consulte ajustes de color para ver el comportamiento compartido del color.

1. Ajuste juntos los colores del encabezado y del texto complementario para que el bloque se sienta coherente.
2. Use el color del icono como un acento en lugar de como la principal fuente de énfasis.
3. Vuelva a comprobar el contraste después de cualquier cambio de fondo para mantener el texto fácil de leer.

Ajustes de visibilidad

Los ajustes de visibilidad controlan si el bloque aparece en escritorio, en móviles o en ambos. Esto es útil cuando quiere un diseño móvil más sencillo o una experiencia de contacto específica para cada dispositivo. Consulte ajustes de visibilidad para ver el comportamiento compartido.

1. Oculte el bloque en un solo dispositivo solo cuando otro diseño atienda bien a ese público.
2. Use intencionadamente la visualización solo en móviles o solo en escritorio para reducir el desorden, no para eliminar una vía de contacto importante.

Notas de uso

1. Mantenga claro el propósito. Use el encabezado y el subtítulo para explicar para qué sirve el formulario y qué deben enviar los visitantes.
2. Haga que la acción sea fácil de localizar. Elija un estilo de botón que destaque lo suficiente para la página, especialmente en móviles.
3. Proteja la legibilidad. Si añade una imagen, un degradado o un vídeo de fondo, asegúrese de que el texto y los controles sigan viéndose con claridad de un vistazo.
4. Respete la jerarquía de la página. Elija un tipo de encabezado que encaje con el resto de la página para que el bloque apoye el diseño en lugar de competir con él.
5. Use la visibilidad con intención. Oculte el bloque en escritorio o en móviles solo cuando los visitantes sigan teniendo una forma clara de ponerse en contacto con usted.
6. Compruebe ambos viewports. Revise el bloque en escritorio y en móviles después de hacer cambios de diseño, alineación, visibilidad o medios, ya que las dos vistas pueden comportarse de forma diferente.
7. Mantenga disponible el estilo de reserva. Deje los colores y los medios en sus valores predeterminados o vacíos cuando quiera que permanezca el estilo integrado del tema; use anulaciones explícitas solo cuando quiera que el bloque se sienta más independiente.
8. Elija medios para mayor claridad. Si usa medios diferentes para escritorio y móviles, confirme que el recorte, la carga y la legibilidad del texto siguen funcionando bien en ambas vistas.
9. Haga legibles los mensajes de estado. Mantenga cualquier mensaje de éxito o error fácil de revisar para que los visitantes puedan completar el formulario sin confusiones.