Cómo personalizar el formulario de contacto en Magento 2

Cada empresa nueva debe ser original y tener características distintivas para ganar conciencia cerebral. Al estar en el comercio electrónico, ofrecemos diferentes productos y servicios, creamos sitios web personalizados y trabajamos en una propuesta de venta única. Pero todas las tiendas de Magento tienen una cosa en común: una página de contacto.

Hoy le diremos cómo personalizar esta página desde el Panel de administración, qué oportunidades ofrece Magento 2 por defecto y cuáles son las opciones adicionales. Al final del artículo, consideramos el problema principal que puede encontrar en el camino.

Resumen del artículo [ ocultar ]

  • Cómo configurar y habilitar un formulario de contacto
  • Cómo cambiar el formulario de contacto
  • Opciones de personalización adicionales para Magento 2 Formulario de contacto
    • Cómo editar campos del formulario de contacto de Magento 2 mediante programación
    • Cómo habilitar Google Map en la página Contáctenos
    • Cómo agregar un formulario de contacto a otras páginas
    • Cómo habilitar CAPTCHA en el formulario de contacto de Magento 2
  • Problema: el formulario de contacto no envía correos electrónicos

 

Cómo configurar y habilitar un formulario de contacto

Lo más importante que debe estar en su página de contacto es la capacidad de comunicarse con usted. Para configurar esta función, debe seguir estos 6 sencillos pasos.

Paso 1. Vaya a su backend e inicie sesión.

Paso 2. En el Panel de administración, seleccione Tiendas>Configuración :

Paso 3. Navegue a Contactos en la pestaña General :

Paso 4. Ahora verá la configuración del formulario de contacto de Magento 2. Elija en la línea Habilitar contacto con nosotros y baje a Opciones de correo electrónico :

Paso 5. Pon tu correo electrónico de contacto en el campo Enviar correos electrónicos a . Seleccione el nombre del remitente que se establecerá en los correos electrónicos en la opción Remitente de correo electrónico :

Puede elegir una plantilla que desee utilizar para sus mensajes en la opción Plantilla de correo electrónico .

Paso 6. Guarde la configuración haciendo clic en el botón Guardar configuración .

Aquí hay un ejemplo de cómo se verá después de crear un formulario personalizado en la interfaz de Magento 2:

Cómo cambiar el formulario de contacto

La creación de un formulario personalizado en Magento 2 en la interfaz es un proceso complicado, pero si desea obtener un resultado único, debe trabajar con bloques de Magento. Pasemos a las opciones de personalización.

Paso 1. Ve a Contenido>Bloques :

Paso 2. Allí verás una lista de todos los bloques disponibles. Busque el bloque Información de contacto y elija Editar en el menú desplegable Seleccionar :

Paso 3. Ingrese su información de contacto en el cuadro Contenido y guarde el bloque.

Esa fue toda la configuración predeterminada del formulario de contacto de Magento 2 y las posibilidades de personalización.

Obviamente, eso no es suficiente para un diseño de tienda personalizado. Por lo tanto, buscaremos oportunidades adicionales para mejorar el valor de su página Contáctenos a continuación.

Opciones de personalización adicionales para Magento 2 Formulario de contacto

Los comerciantes a menudo preguntan si es posible editar los campos predeterminados o agregar el botón para cargar archivos. O, digamos, desea mostrar la ubicación de su tienda fuera de línea en el mapa. ¡Averigüémoslo!

Usando Magento, cree un formulario fácilmente con el constructor de arrastrar y soltar: Magento 2 agrega un campo personalizado al formulario de registro, soporte, formulario de encuesta de marketing y más. Use la extensión Formulario personalizado para agregar diferentes tipos de campos y cambiarlos a su gusto.

IR A LA EXTENSIÓN

Cómo editar campos del formulario de contacto de Magento 2 mediante programación

Digamos que desea agregar el campo Asunto a su plantilla de correo electrónico. Para hacer esto, deberá crear un nuevo módulo pequeño.

#1. En primer lugar, cree module.xml en app/code/<Vendor>/<Module>/etc e inserte la siguiente parte del código:

#2. Luego, registre este mod en app/code/<Vendor>/<Module> creando registration.php . Para ello, introduce este código:

#3. Copie el archivo form.phtml del proveedor /magento/module-contact/view/frontend/templates para los siguientes pasos y péguelo en app/code/<Vendor>/<Module>/view/frontend/templates . Luego abra este archivo y agregue el nuevo campo a su formulario de contacto. Utilice este código:

#4. Cree contact_index_index.xml en app/code/<Vendor>/<Module>/view/frontend/layout para anular el archivo form.phtml anterior con el nuevo. Debe insertar el siguiente parche de código en este archivo:

#5. Cuando esté listo, vaya a su Panel de administración> Marketing> Plantillas de correo electrónico :

#6. En la ventana que aparece, verá el botón Agregar nueva plantilla . Haz click en eso.

#7. Se abrirá la página Nueva plantilla . Elija la plantilla de formulario de contacto del menú desplegable y haga clic en Cargar plantilla :

#8. Cree un nombre para su nueva plantilla e ingréselo en el campo Nombre de la plantilla .

Pegue el código adicional en el campo Contenido de la plantilla :

Data.subject aquí es el nombre del campo que agregó al archivo form.phtml . Debe ser igual en ambos lugares:

Ahora haga clic en Guardar plantilla .

#9. Vaya a Tiendas>Configuración>General>Contactos y elija su Plantilla de correo electrónico en la sección Opciones de correo electrónico. Guarda los cambios y disfruta del resultado.

Cómo habilitar Google Map en la página Contáctenos

Digamos que tienes puntos de recogida en la ciudad. El mapa de Google te ayuda a mostrar tiendas en el mapa. Le ofrecemos probar nuestro módulo de Google Map . Te permite marcar las coordenadas de tus puntos de recogida con Google:

Puede cambiar la altura y el ancho de la apariencia del mapa o usarlo como un widget en cualquier página de CMS en el sitio web:

IR A LA EXTENSIÓN

Cómo agregar un formulario de contacto a otras páginas

También puede agregar un formulario de contacto a cualquier página de CMS. Para ello, procede de la forma que te hemos descrito (ver Cómo cambiar el formulario de contacto ). Simplemente elija el bloque Contenido y agregue el siguiente código en el lugar necesario: pie de página, bloque de navegación, etc.:

Guarde los cambios.

Cómo habilitar CAPTCHA en el formulario de contacto de Magento 2

CAPTCHA es la herramienta que protege tu tienda del spam. Vaya a Tiendas>Configuración para habilitarlo. Haga clic en Configuración del cliente en la pestaña Clientes :

Busque el bloque CAPTCHA en esta página y elija en Habilitar CAPTCHA en el menú desplegable Storefront:

Pruebe nuestro reCAPTCHA invisible de Google para obtener más configuraciones y opciones de personalización. Puede mostrar CAPTCHA solo a los invitados o configurar idiomas para diferentes vistas de la tienda con este mod.

IR A LA EXTENSIÓN

Problema: el formulario de contacto no envía correos electrónicos

Si su formulario de contacto no funciona según lo requerido, verifique todas las configuraciones que explicamos anteriormente en el Panel de administración .

Si todas las configuraciones son correctas pero el formulario no funciona, vaya al archivo template/contact/form.phtml . Encuentra esta parte del código allí:

Reemplázalo con:

Estos cambios suelen resolver problemas.

Si el desafío persiste, no dude en contactarnos en support@amasty.com . ¡Siempre estamos listos para ayudarte!

Algunas extensiones útiles que puedes usar en tu formulario de contacto:

Seguimiento de correo electrónico : ayuda a crear correos electrónicos activados personalizados y automatizar el envío.

Configuración de correo electrónico SMTP : este módulo lo ayuda a configurar SMTP que reduce la posibilidad de que sus correos electrónicos terminen en la carpeta de correo no deseado.

Localizador de tiendas : sirve para mostrar todas tus tiendas en el mapa, filtrarlas y mostrar la más cercana.