Formulario de contacto

Enlaces destacados

1. documentación de Shopify sobre secciones y bloques
2. documentación de Company XYZ sobre el bloque de información de contacto
3. documentación de Company XYZ sobre el bloque de formulario de contacto
4. documentación de Company XYZ sobre los ajustes de encabezados
5. documentación de Company XYZ sobre los ajustes de fondos de sección
6. documentación de Company XYZ sobre los ajustes de espaciado de sección
7. documentación de Company XYZ sobre los ajustes de separadores
8. documentación de Company XYZ sobre los ajustes de visibilidad
9. documentación de Company XYZ sobre los ajustes de ancho del diseño

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Utilice esta sección para recopilar mensajes y mostrar los detalles de contacto que las personas puedan necesitar antes de ponerse en contacto. Puede incluir un formulario, un panel de detalles de contacto o ambos, y luego reordenar los bloques para cambiar qué contenido aparece primero.

Configuración básica de la sección

Esta sección funciona mejor cuando primero decide el objetivo principal de la página. Si desea que los visitantes envíen un mensaje rápidamente, coloque primero el bloque de formulario. Si los visitantes suelen necesitar un número de teléfono, dirección de correo electrónico, ubicación u horario antes de ponerse en contacto con usted, coloque primero el bloque de información de contacto.

Para una visión general más amplia de cómo funcionan los bloques en el editor, consulte documentación de Shopify sobre secciones y bloques

1. Use ambos bloques para una página de contacto completa.
2. Use solo el bloque de formulario para un diseño más simple y centrado en la acción.
3. Use el bloque de información de contacto para complementar el formulario con opciones de contacto directas.

Reordenar los bloques cambia el diseño y el flujo de lectura. Después de mover los bloques, previsualice la página en escritorio y en dispositivos móviles para asegurarse de que el método de contacto más importante aparezca primero.

Ajustes de color

Estos ajustes anulan los colores predeterminados del tema para el icono de la sección, el texto principal y el texto del subtítulo. Son más útiles cuando desea que el área de contacto destaque o cuando la coloca sobre un fondo personalizado.

Dejar los valores de color en blanco o cerca del valor predeterminado normalmente conserva el estilo de reserva del tema. Las opciones más explícitas de color, degradado o medio hacen que la sección se sienta más independiente, así que compruebe que toda el área de contacto siga funcionando como una sola unidad.

Si también añade fondos de bloque con estilo, mantenga los colores de la sección y de los bloques trabajando juntos en lugar de tratar cada área por separado. El contraste fuerte importa aquí porque los visitantes necesitan revisar los detalles y completar el formulario sin esfuerzo.

Tipos de bloque admitidos

1. Información de contacto
2. Formulario de contacto

Información de contacto

Use este bloque para mostrar detalles prácticos junto al formulario, como teléfono, correo electrónico, dirección, horario de atención e iconos de redes sociales. También incluye su propia área de encabezado opcional, de modo que pueda etiquetar este contenido con claridad cuando la página contiene ambos bloques.

1. Mantenga los detalles breves y fáciles de revisar.
2. Muestre los iconos sociales solo si esos perfiles están activos y se mantienen.
3. Use los ajustes de fondo del bloque si desea que los detalles de contacto se sientan como un panel independiente.

Más información en documentación de Company XYZ sobre el bloque Información de contacto.

Formulario de contacto

Use este bloque para mostrar el propio formulario de mensaje. Puede dar estilo al botón de enviar, hacerlo de ancho completo en móviles y, opcionalmente, añadir una pequeña área de encabezado dentro del bloque.

1. Añada un encabezado o subtítulo breve si los visitantes necesitan orientación sobre para qué sirve este formulario.
2. Use un botón móvil de ancho completo cuando quiera que el formulario resulte más fácil de completar en pantallas pequeñas.
3. Mantenga el área del formulario visualmente simple si el bloque de detalles de contacto ya usa un tratamiento de fondo más destacado.
4. Revise los estados de vacío, éxito y error después de publicar para que los mensajes de confirmación y validación sigan siendo fáciles de leer.

Más información en documentación de Company XYZ sobre el bloque Formulario de contacto.

Ajustes estándar de la sección

Ajustes de encabezado

ajustes de encabezado controlan el contenido introductorio encima de los bloques, incluida la alineación, el icono, el subtítulo, el encabezado, el texto de apoyo y un botón opcional. Use esta área para presentar la página, añadir estructura o incluir una acción secundaria como indicaciones, reservas o contenido de ayuda.

Elija cuidadosamente el tipo de encabezado para que la página mantenga una jerarquía de contenido clara. Si añade el botón opcional, revise su posición en escritorio y en móviles para que no interrumpa el flujo principal de contacto.

Ajustes de fondo de sección

ajustes de fondo de sección le permiten añadir un color, degradado, imagen o vídeo detrás de toda la sección. Esto funciona bien cuando desea que el área de contacto resulte más destacada o visualmente separada del contenido circundante.

El medio de fondo puede afectar la legibilidad y el equilibrio del diseño, especialmente cuando se muestran ambos bloques. Si usa una imagen o un vídeo, revise juntos los colores de superposición y de texto para que el contenido siga siendo claro.

Ajustes de espaciado

Ajustes de espaciado controlan el espacio encima y debajo de la sección. Úselos para dar más respiro al área de contacto o para ajustar el diseño si la página ya contiene varias secciones.

Establezca el espaciado de escritorio y móvil de forma intencionada. Los diseños de contacto suelen necesitar un poco más de espacio en pantallas pequeñas para no dar sensación de saturación.

Ajustes de separador

ajustes de separador añaden una línea opcional en la parte superior o inferior de la sección. Esta es una forma sencilla de separar el área de contacto del contenido cercano sin añadir un tratamiento de fondo completo.

Use un color de separador personalizado solo cuando el estilo de borde predeterminado sea demasiado sutil. En muchos diseños, un divisor claro es suficiente.

Ajustes de visibilidad

ajustes de visibilidad controlan si la sección aparece en escritorio, en móvil o en ambos. Esto es útil cuando desea una experiencia de contacto diferente en pantallas más pequeñas.

Oculte la sección en un solo dispositivo solo si los visitantes aún tienen una forma clara de ponerse en contacto con usted allí. Evite crear un diseño en el que el método principal de contacto desaparezca inesperadamente.

Ajustes de ancho

ajustes de ancho controlan el ancho del contenido dentro de la sección y el ancho del propio contenedor de la sección. Úselos para hacer que el formulario sea más fácil de leer o para permitir que el fondo se extienda más que el contenido.

El ancho del contenido suele tener el mayor efecto en la comodidad y la legibilidad. Compruebe los cambios de ancho en la página publicada, así como en el editor, ya que la vista del editor puede hacer que las diferencias de diseño parezcan menores de lo que son.

Consejos de uso

1. Empiece por la acción principal. Ponga primero el formulario cuando las consultas rápidas sean lo más importante, y ponga primero los detalles de contacto cuando los visitantes suelan necesitar información de referencia antes de escribir.
2. Mantenga los detalles actualizados. Revise regularmente los números de teléfono, las direcciones de correo electrónico, el contenido de la dirección, el horario comercial y los enlaces sociales para que la sección siga siendo fiable.
3. Proteja la legibilidad. Al usar fondos personalizados, superposiciones o anulaciones de color, asegúrese de que el texto y el contenido del formulario sigan siendo fáciles de leer de un vistazo.
4. Optimice la lectura en móviles. Use el ancho del botón móvil, el orden de los bloques y los ajustes de visibilidad para que la sección sea fácil de usar en pantallas pequeñas.
5. Use el ancho con moderación. Los anchos de contenido moderados suelen hacer que los formularios de contacto y los detalles comerciales sean más fáciles de revisar que los diseños muy anchos.
6. Revise ambas configuraciones de viewport. Si usa diferentes medios o opciones de diseño para escritorio y móvil, confirme que el recorte, el comportamiento de reserva y la legibilidad del texto sigan funcionando bien en cada dispositivo.