Cómo construir un formulario de contacto con Elementor

Rifat Tutoriales de WordPress Jan 6, 2021

¿Sabe que la página de contacto se considera infravalorada actualmente en la mayoría de los sitios web? La mayoría de los propietarios de sitios web no comprenden la importancia de esta página. Este es un pequeño lugar donde los visitantes de su sitio web vienen para obtener respuestas de usted a sus preguntas.

Día tras día, nadie presta atención a esta parte significativa por insignificancia, así como la participación del usuario es menor porque la colocación de la página no se realiza correctamente.

Para deshacernos de este problema, debemos comprender cómo crear una página de contacto adecuada. Este tutorial lo ayudará a aprender cómo crear una hermosa página de Contáctenos con Elementor Page Builder.

Qué hace que la página de contacto sea la mejor

Dado que las páginas de contacto juegan un papel importante en el éxito de un sitio web, debemos centrarnos en varias cosas para que esto suceda. Aquí hablaremos sobre algunas de las cosas importantes que juegan un papel importante en la creación de una buena página de contacto, por lo que debe conocerlas antes de crear una página de contacto a través de Elementor.

  1. Los enlaces a las páginas de contacto son imprescindibles para cualquier afiliado que promocione cualquier programa. Debe haber un enlace en el pie de página de cada página de un sitio web. Si hay espacio disponible, es aconsejable mantener un formulario de contacto en el encabezado.
  2. Para sitios web basados ​​en productos: si está vendiendo un producto o servicio en su sitio, es mejor proporcionar un enlace a una página de preguntas frecuentes de documentación o servicio porque muchas personas se comunican con usted para conocer estas cosas. Si los proporciona con anticipación, se considerará confiable para los visitantes.
  3. Intente agregar un número de teléfono móvil, correo electrónico y dirección postal a su sitio web. Esto hace que su página de contacto sea más activa para sus usuarios.
  4. Trate de evitar campos innecesarios en su formulario de contacto para que sus visitantes puedan entender que es más fácil comunicarse con usted. Hay muchos buenos creadores de formularios de contacto, como Gravity y WPforms, que funcionan muy bien con WordPress.
  5. Los desarrolladores suelen cometer un error, es decir, hacer una página de contacto aburrida. Esto no se puede hacer en absoluto, ya que reduce la participación de los visitantes en el sitio web. Hoy veremos cómo hacer atractiva una página de contenido a través de Elementor.
  6. Después de presionar el botón de envío del formulario de contacto, lleva a los usuarios a una página en blanco sin nada. Esto crea una impresión negativa en la mente de los usuarios de que no te preocupas por ellos. Proporcione siempre una confirmación emergente de agradecimiento para que sus usuarios se sientan valorados.
  7. No está escrito en ninguna parte donde su página de contacto no pueda ser interactiva. Puede agregar todos los campos y hacerlo atractivo como desee con impresionantes plantillas y animaciones, o tal vez puede agregar algunas cosas adicionales como Google Map como su ubicación. Depende completamente de ti.

Si su formulario de contacto refleja estas reglas, servirá como un impulso para el propósito de su sitio web. Ahora aprenderemos cómo crear una página de contacto visualmente agradable con la ayuda de estos elementos. No necesitamos saber ningún código para esto.

Crear formulario de contacto con Elementor

Diseñaremos nuestra página de contacto con Generador de páginas Elementor y Complemento Power Pack para Elementor. Instala estos plugins y actívalos. Ahora vaya a su Panel de control y elija Páginas de las opciones de la izquierda. Ahora vaya a su página de contacto y seleccione Editar con Elementor.

Comenzaremos con la adición de imágenes en la parte superior de la página y la titularemos. Para hacer esto, haga clic en “+” o Agregar una nueva sección y luego agregue una sola columna a su página web.

Ahora haga clic en Configuración de fila y agregue una imagen de fondo a Fila desde la pestaña Estilo. Para que la imagen y la fila sean más visibles, debe cambiar la altura de la fila en la pestaña Diseño. La altura debe ser de al menos 600. Ahora también agregue otra superposición de fondo y establezca su opacidad .57 en la pestaña de estilo.

Ahora, desde el paquete de complementos PowerPack, arrastre un widget de encabezado dual y suéltelo en la fila. Cambie el aspecto y el diseño del texto según sus necesidades. Todo esto se trata de tu creatividad. Puedes hacerlo como lo hicimos nosotros o como quieras.

Ahora es el momento de utilizar un formulario de contacto confiable en esta página. Generalmente, uso el Formulario de contacto 7, pero puede utilizar cualquier complemento como: Formularios de gravedad, Formularios de Caldera, Formularios Ninja o Formularios WP. Asegúrese de instalarlo y activarlo antes de continuar. También puede instalar el formulario de contacto 7 y actualizar nuestra página diseñada para conectar este complemento.

Ahora arrastre y suelte los elementos del formulario de contacto en la página y seleccione Mi formulario de página de contacto en la pestaña Contenido.

Ahora tienes que personalizar el formulario. Puede deshabilitar los títulos usando el botón de alternar, y desde la pestaña Estilo, puede cambiar el color, fondo, tipografía, ancho, relleno del formulario. He realizado algunos cambios en el siguiente formulario de contacto:

  • Cambió el color de fondo, el color del texto de los campos y aumentó el espaciado a 20.
  • Se agregaron bordes a los campos y se cambió el radio del borde.
  • Se cambió el color del texto del marcador de posición.
  • Para el botón de enviar, cambié el ancho a 170 y también cambié el color.
  • Se agregaron efectos de borde y desplazamiento en el botón.

¿Cómo es? Dinos.

Ahora, solo el formulario de contacto en la página Contáctenos no es suficiente. Debe proporcionar más información para que sus usuarios puedan comunicarse con usted incluso sin este formulario de contacto. Agregaremos otra columna en la misma fila y agregaremos el widget de lista de información allí.

Ahora arrastre y suelte el widget de lista de información en la página.

Reemplace los iconos, color, texto, espaciado y relleno de la configuración particular. Para esta lista, he cambiado la siguiente configuración:

  • Icono, descripción y título modificados.
  • Espaciado de elementos: 30
  • Tamaño del icono, tamaño del cuadro y espaciado 39, 77 y 25, respectivamente.
  • Se modificó el título, la descripción y el color del icono de la pestaña de estilo.
  • Acolchado superior e inferior añadido: 50

Ahora puede mantener el mismo valor que mencioné anteriormente, o puede cambiarlos como desee. Después de cambiar todo, el aspecto del formulario será muy parecido.

Ultimas palabras

Así que aprendiste a diseñar una hermosa página de contacto. ¿Cómo se siente al hacer esto usted mismo? Si se requieren más cambios o refinamientos, se puede hacer muy fácilmente a través de Elementor. Y si desea agregar otro elemento a la página Contáctenos, puede hacerlo a través del Complemento Powerpack Elementor. Buena suerte con su sitio web.