Programar landing page independiente en WordPress Parte 1


En esta ocasión vamos a crear una landing page en WordPress independiente del mismo.

Sin utilizar ningún plugin.

¿Por qué? pues para que podamos utilizar nuestros propios estilos para la landing page y que la misma no tenga ni menús ni ningún tipo de elemento que distraiga al visitante, que sea lo más rápida posible, incluya un formulario, evite los puntos de fuga y que llame la atención únicamente en el mensaje que queremos transmitir.

Dicho esto una landing page no es más que una página html con un formulario.

Nuestra landing page tendrá los siguientes archivos:

  • index.html
  • recibido.php
  • landing.css

En la carpeta img irán las imágenes de la página:

 

Deberemos subir los archivos a la carpeta raíz de nuestra instalación de WordPress. Yo en principio lo tengo en la carpeta campaign y dentro de esta distintas carpetas con distintas campañas.

La landing tiene un formulario que se valida y graba en la base de datos. Se envía un email al admin con los datos del nuevo contacto y se graban los mismos en la base de datos para poder acceder más facilmente.

Esquema de la tabla

Puedes ver como queda en el siguiente enlace: https://garberinformatica.com/campaign/landing1/

Si todo funciona correctamente serás redirigido a la página: https://garberinformatica.com/gracias/

Si hay algún error se enviará un email al admin informando del mismo y se mostrará la página:

Error

En la segunda parte crearemos un plugin para wordpress y poder mostrar en el escritorio de nuestro los datos de la tabla y poder exportar los mismos por csv.

index.html

Contiene el mensaje y el formulario. Adicionalmente se pueden incluir los scripts para realizar el seguimiento por Analytics.

Página landing con el diseño y un formulario para que nos contacten

landing.css

Estilos css de la página landing

Estilos de la página

recibido.php

Funciones para validar el formulario, enviarlo al cliente y grabar los datos en la base de datos. Para el envío de los datos a la Base de Datos utilizamos PDO.

 

Tabla gbi_campaigns: