Diseñar Sección de Formulario de Contacto con el Elemento Formulario de Contacto

Acerca del Elemento Formulario de Contacto

El Elemento Formulario de Contacto es una característica prediseñada en GemPages que se puede arrastrar y soltar fácilmente desde la barra lateral izquierda al área de diseño. 

Puede personalizar aún más el formulario arrastrando y soltando elementos de Campo de Formulario adicionales desde la barra lateral para incluir los campos de información específicos que necesite. 

El elemento de formulario de contacto enviará datos al Panel de Administración de Shopify. Para información más detallada sobre el Elemento Formulario de Contacto, haga clic aquí.

Diseñar una Sección de Formulario de Contacto con el Elemento Formulario de Contacto

Primero, debe acceder al  Panel de Control de GemPages y haga clic en la página objetivo para abrirla en el editor.

Una vez ubicado en el editor, siga estos pasos para diseñar una sección de formulario de contacto con el Elemento Formulario de Contacto de GemPages.

Paso 1: Arrastre y Suelte el Elemento Formulario de Contacto

• Desde la barra lateral izquierda, use la barra de búsqueda para encontrar el Elemento Formulario de Contacto. Luego, añádalo a la posición deseada en su página.

Este formulario de contacto predeterminado incluye componentes básicos, pero puede personalizarlo añadiendo, cambiando o eliminando cualquier elemento.

• Para eliminar un elemento, haga clic en él y seleccione el ícono de basura, y construya su formulario desde cero.

• Elimine todos los elementos prediseñados para crear un formulario de contacto vacío:

Paso 2: Cree el Diseño del Formulario de Contacto

• Arrastre y suelte un Elemento Fila en el Formulario de Contacto.
• En la sección Diseño en el panel de configuración, puede configurar la fila para que sea un diseño de 1 columna o 2 columnas, según sus preferencias.

Paso 3: Añada Elementos de Entrada del Formulario

• A continuación, arrastre y suelte los componentes de entrada del formulario necesarios. Para un diseño de 2 columnas, coloque el primer elemento  Campo de Texto en la columna izquierda.

• Haga doble clic en este Elemento Bloque de Texto para editar el texto. Por ejemplo, lo cambiamos a "Nombre".

• Arrastre y suelte un Elemento Campo de Texto bajo el Elemento Bloque de Texto para ponerlos en la misma columna.

• En la columna derecha, continúe añadiendo un nuevo Bloque de Texto y cambiando el texto a "Correo electrónico". Luego, coloque un Elemento Campo de Correo Electrónico bajo este elemento.

Paso 4: Añada el Botón de Envío

• Arrastre y suelte el Botón de Enviar Formulario, que es esencial para que los clientes envíen el formulario y envíen su información a su Panel de Administración de Shopify.

• Ajuste la alineación de este botón al centro para una mejor visibilidad.

• Vaya a la  pestaña Avanzada y ajuste el espaciado en la  Espaciado ..

Paso 5: Configurar las Configuraciones del Formulario de Contacto

Configure las configuraciones para personalizar cada condición:

• Después de enviar: Elija si desea que los clientes permanezcan en la página actual o redirigirlos a una URL o página específica después de enviar el formulario.
• Mensaje de éxito: Muestre un mensaje para confirmar el envío exitoso.
• Mensaje de error: Muestre una alerta si hay un error que impida el envío del formulario, como problemas con el sistema de Shopify.

Crear un Formulario de Contacto desde una Plantilla en la Biblioteca

También puede crear un formulario de contacto utilizando plantillas prediseñadas de la Biblioteca.

Paso 1Haga clic en la  pestaña Sección en la barra lateral izquierda y desplácese hacia abajo hasta la opción  Contacto .

Paso 2Pase el cursor sobre Contacto para ver todas las secciones de contacto prediseñadas de la biblioteca de GemPages, luego arrastre y suelte la preferida en el área de diseño.

Paso 3: Puede personalizarla a su manera, o simplemente guardar y publicar la página con esta sección de contacto prediseñada.

Solución de problemas con el formulario de contacto

Si tu formulario de contacto no funciona como esperabas, revisa los problemas comunes a continuación y sigue las soluciones sugeridas.

Problema 1: Código de error {"msg":"Missing credentials","status":"error"} aparece después de enviar el formulario

Causa posible: Esto suele ocurrir cuando se prueba el formulario en el Vista previa de la pàgina en lugar de la página en vivo. Es posible que el entorno de vista previa no admita completamente el envío de formularios.

Cómo solucionarlo:

Asegúrese de probar el formulario de contacto en el Página publicada en directo solamente.

Siga estos pasos:

1. Haga clic en Publicar para publicar su página.
2. Abra la URL de la página en vivo en una nueva pestaña del navegador.
3. Vuelva a enviar el formulario desde la página principal.
4. Comprueba en tu panel de administración de Shopify si se ha recibido el envío.

Problema 2: El formulario de contacto no se muestra en la página principal.

Causa posible: El formulario de contacto se agregó dentro de un Página de aterrizaje instantánea (ILP).
Las páginas de aterrizaje instantáneas sí lo hacen No admite formularios de contacto de Shopify., porque el formulario de contacto es una función nativa de Shopify.

Cómo solucionarlo: Traslada el formulario de contacto a una página normal de GemPages en lugar de usar una página de destino instantánea.

Solución recomendada:

• Crea o abre un página normal en GemPages.
• Arrastre y suelte el Elemento de formulario de contacto en la página.
• Guardar y Publicó la página.
• Abra la página en directo para confirmar que el formulario de contacto aparece correctamente.