fbpx

Contact Form 7 + Elementor = LEADS en WordPress

Formulario de contacto landing page

En esta quinta clase de nuestro curso de creación de landing pages, aprenderás a Integrar Contact Form 7 con Elementor para obtener leads en WordPress.

Abordaremos cómo crear el formulario con CONTACT FORM + ELEMENTOR y una extensión para ELEMENTOR (Essential Addons for elementor) que nos va a permitir personalizar nuestro formulario de contacto.

Usar tres elementos

Contact Form 7 + Elementor = LEADS en WordPress

Min 1:03. Debemos usar estos tres elementos porque ELEMENTOR en su versión PRO tiene un módulo de formularios de contacto. Con estos tres plugin hacemos de una manera sencilla, gratuita y sin saber programar este formulario.

Recuerden que una landing page, debe de tener un objetivo claro desde su creación. Si esta, no tiene un objetivo, el propósito se pierde. (explicación de propósitos, por ejemplo: LEAD)

Crear un formulario de contacto sencillo

Min 2:50 – Vamos a crear un formulario de contacto sencillo

Procedimiento para crear un formulario

Una vez con nuestra plantilla en ASTRA ya instalada, vamos a crear un formulario de contacto en una de sus zonas.

Pasos iniciales

  • Ingresamos al administrador de WORDPRESS
  • Vamos a paginas
  • Ingresamos a nuestra página de inicio HOME
  • Damos clic en editar con ELEMENTOR
  • Buscamos la sección donde queremos editar o adicionar nuestro formulario. (si tenemos un módulo, borramos el  módulo)
  • Nos dirigimos al administrador de WORDPRESS
  • Min 6:57 – Ingresamos a plugins y damos en añadir nuevo

Instalar CONTACT FORM

  • Buscamos CONTACT FORM, (este nos permite generar un formulario de contacto que nos va a enviar un correo de confirmación y permite integrarse con otras plataformas), instalamos y activamos
  • Inmediatamente, nos aparece en nuestro menú de WORDPRESS, un ítem que se llama contactos.
  • Ingresamos en la opción contactos y damos en añadir nuevo e integración

Instalar ESSENTIAL ADDONS FOR ELEMENTOR

  • Min 8:15 – Para instalar el 2 plugin que necesitamos, ESSENTIAL ADDONS FOR ELEMENTOR, este es para dar una apariencia sin programar, sin conocer htmll. Nuevamente, vamos a plugins, damos en instalar y activar.
  • Configuramos nuestro plugin en configuración básica.
  • Seleccionamos elementos de aplicación, estilos de formularios y continuamos tan solo dando NEXT para finalizar nuestra instalación.

Crear formulario

Min 10:05 – Nos dirigimos a nuestra página HOME, para crear nuestro formulario.

  • Actualizamos nuestro editor para refrescar y poder encontrar nuestros elementos instalados anteriormente
  • Buscamos en el panel de la izquierda, el panel de CONTACT FORM y lo arrastramos al área donde deseamos agregar.

Configuración y edición

  • Seleccionamos el formulario de contacto para que nos cree uno por defecto.
  • Actualizamos para guardar los cambios.
  • Para editar nuestro formulario, vamos al administrador de WORDPRESS y damos clic sobre el plugin de contacto e ingresamos a formularios de contacto
  • Ingresamos al formulario 1, el cargado en la landing page y editamos
  • Vemos un código de texto con los campos de nuestro formulario. Podemos borrar el mensaje y el asunto.
  • Para adicionar o crear otro campo, utilizamos la misma estructura o etiqueta htmll para crear uno nuevo.
  • En la parte superior, aparecen unos botones (estos representan los campos que podremos crear en nuestro formulario.)
  • Vamos a crear un campo teléfono, seleccionamos el botón correspondiente (editamos su nombre y damos en insertar)
  • Una vez creado en el panel de texto inicial, procedemos a copiar y pegar el label, la etiqueta htmll (en este caso el nombre sería teléfono) y cerramos la etiqueta label.
  • Recuerden siempre colocar el texto de aceptar política de datos. Para esto necesitamos habilitar otro campo que se llama Aceptación (Cambiamos el nombre a aceptar y seleccionamos obligatorio)
  • Realizamos el procedimiento de copiar, pegar, cambiar nombre y cerrar el label.

Min 15:03 – Actualizamos nuestro home y si todo nos sale bien, nos debería de aparecer nuestro formulario de contacto listo para editar su apariencia.

Ejemplo de edición:

  • Ingresamos a editar y vamos a estilos, si deseamos podemos cambiarle el fondo (transparente, sólido, degradado)
  • Alinearlo centrado y configurar su margen o relleno
  • Podemos ingresar un título y una descripción, igual colocar color.
  • Para darle una mejor apariencia, cambiamos el color de las etiquetas, de la tipografía y ampliamos el botón. Si así lo deseamos.

Recuerden que al ingresar un botón para aceptar la política de datos, deben en la parte inferior de la página web la descripción de la política.

Min 20:03 – Damos en actualizar y nos dirigimos al menú hamburguesa, en la esquina superior izquierda y seleccionamos ver página.

Como podemos ver el formulario de conversión se encuentra prácticamente listo.

Configurar formulario de contacto con el correo electrónico.

Min 20:38 Pasos para configurar formulario y correo electrónico

  • Regresamos al administrador de WORDPRESS
  • Seleccionamos la opción de contactos
  • Seleccionamos el formulario que estamos usando, damos en editar, en la pestaña correo configuramos nuestro email.

Ingresamos los datos solicitados.

  • Email del webmaster o persona que instaló plataforma.
  • Correo adicional para recibir información
  • Correo desde donde se va a enviar el correo
  • Cuerpo de mensaje, colocamos todo lo relacionado al saludo que acompaña la información del formulario y que se aceptan las políticas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *