Programar landing page independiente en WordPress Parte 1

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

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.

[fusion_builder_container hundred_percent=»yes» overflow=»visible»][fusion_builder_row][fusion_builder_column type=»1_1″ background_position=»left top» background_color=»» border_size=»» border_color=»» border_style=»solid» spacing=»yes» background_image=»» background_repeat=»no-repeat» padding=»» margin_top=»0px» margin_bottom=»0px» class=»» id=»» animation_type=»» animation_speed=»0.3″ animation_direction=»left» hide_on_mobile=»no» center_content=»no» min_height=»none»]

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.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="landing.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <title>GarberInformatica.com | Soluciones integrales</title>
</head>

<body>

    <div class="container contenedor">
        <div class="row">
            <div class="col-xl-12 col-md-12 col-sm-12">
                <div class="logo"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                <br>
                <i class="material-icons md-18">check_circle</i> Programación a medida, bases de datos, administración<br>
                <i class="material-icons md-18">check_circle</i> Desarrollo de plugins para WordPress, diseño web <br>
                <i class="material-icons md-18">check_circle</i> Tiendas online en WooCommerce / Prestashop / Magento <br>
                <i class="material-icons md-18">check_circle</i> Integración de catálogos Amazon Marketplaces, Privalia, etc.<br>
                <i class="material-icons md-18">check_circle</i> Asesoramiento tecnológico profesional<br>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-texto">
                <br>
                <p class="parrafo2">
                    Contamos con una amplia experiencia en ofrecer soluciones informáticas a empresas. Analizamos la problemática ofreciendo las opciones más actuales y adecuadas para cada caso, buscando el equilibrio perfecto entre eficacia y precio. Déjese aconsejar por
                    profesionales.
                </p>

            </div>
        </div>
        <br>

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 fondo-contenido">
                <h1 class="titulo1">GarberInformatica, soluciones integrales</h1>
                <h4 class="titulo">Presencia online y mejora de la gestión empresarial </h4>
                <br>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-lg-7 col-xl-8 col-md-12">
            </div>
            <div class="col-lg-5 col-xl-4 col-md-8">
                <div class="formulario">
                    <form action="recibido.php" method="post"><br>
                        <div class="lbl"> Empresa (*)
                            <div class="div-input">
                                <input type="text" name="company" required>
                            </div>
                        </div>

                        <div class="lbl"> Asunto (*)
                            <div class="div-input">
                                <input type="text" name="subject" required>
                            </div>
                        </div>

                        <div class="lbl"> Email (*)
                            <div class="div-input">
                                <input type="email" name="email" required>
                            </div>
                        </div>

                        <div class="div-send">
                            <button type="submit" class="button">Enviar</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-5 col-xl-4 col-md-8">
                <div class="footer">
                    <a href="https://garberinformatica.com">garberinformatica.com</a> <a href="https://www.facebook.com/garberinformatica/">facebook</a>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

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

landing.css

Estilos css de la página landing

.contenedor {
    background-image: url("img/fondo1.jpg");
    background-repeat: no-repeat;
    color: white;
}

.logo {
    float: right;
    background-image: url("img/logo.png");
    background-repeat: no-repeat;
    margin-top: 20px;
    width: 310px;
    height: 75px;
}

.titulo1 {
    margin-bottom: 40px;
    text-shadow: 1px 1px 1px rgba(34, 30, 32, 1);
    font-weight: bold;
    color: #F48012;
    letter-spacing: 1pt;
    word-spacing: 2pt;
    font-size: 38px;
    text-align: center;
    font-family: arial, helvetica, sans-serif;
    line-height: 1;
    margin: 15px;
    padding: 0px;
}

.titulo {
    margin-top: 20px;
}

.parrafo2 {
    color: rgba(54, 54, 54, 0.8);
}

.subtitulo {
    padding-top: 20px;
    font-style: italic;
    font-size: 1.2em;
}

.fondo-contenido {
    background: rgba(54, 54, 54, 0.8);
    text-align: center;
    text-shadow: 2px 2px black;
    padding-top: 20px;
}

.formulario {
    float: right;
    padding-bottom: 40px;
}

.button {
    background-color: #F48012;
    padding: 5px 40px 5px 40px;
    color: white;
    border-style: none;
    font-weight: 900;
    font-size: 18px;
    border-radius: 3px;
}

.button:hover {
    background-color: rgb(255, 136, 0);
    text-shadow: 2px 2px black;
}

.lbl {
    background-color: rgba(54, 54, 54, 0.8);
    width: 350px;
    height: 37px;
    display: inline-block;
    margin-top: 5px;
    font-weight: bold;
    padding-left: 20px;
    padding-top: 10px;
}

.div-send {
    margin-top: 10px;
    float: right;
}

.lbl input {
    float: right;
    margin-top: -30px;
    margin-bottom: 10px;
    margin-right: 2px;
}

input {
    text-align: left;
    height: 30px;
}

.footer a {
    color: white;
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 0.8em;
}

@media screen and (max-width: 992px) {
    .parrafo2 {
        color: white;
    }
    .logo {
        float: left;
        background-image: url("img/logo2.png");
        background-repeat: no-repeat;
        margin-top: 20px;
        width: 310px;
        height: 75px;
    }
    .fondo-contenido {
        background: rgba(54, 54, 54, 0.8);
        text-align: center;
        text-shadow: 2px 2px black;
        padding-top: 20px;
        width: 200px;
    }
    .div-send {
        margin-top: 10px;
        float: left;
    }
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}


/* Rules for sizing the icon. */

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}


/* Rules for using icons as white on a dark background. */

.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

.material-icons.md-light.md-inactive {
    color: rgba(255, 255, 255, 0.3);
}

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.

<?php

require_once("../../wp-config.php"); // para extraer los datos de conexión de la bbdd.

// función para limpiar la cadena de carcteres extraños
function gbi_limpia_cadena($string){
    $string = str_replace(
        array("\", "¨", "º", "~",
             "#", "|", "!", "\"",
             "·", "$", "%", "&", "/",
             "(", ")", "?", "'", "¡",
             "¿", "[/fusion_builder_column][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][", "^", "<code>", "]",
             "+", "}", "{", "¨", "´",
             ">", "< ", ";", ",", ":",
             " "),
        ' ',
        $string
    );

    return $string;
}

# recogemos y limpiamos los datos.

$company = gbi_limpia_cadena(trim($_POST['company']));
$subject = gbi_limpia_cadena(trim($_POST['subject']));
$email = gbi_limpia_cadena(trim($_POST['email']));
$campaign = "Landing GarberInformatica";
$to = "info@garberinformatica.com";

// función para enviar el email
function gbi_envia_email(){

    global $company;
    global $subject;
    global $email;
    global $campaign;
    global $to;
    
    $asunto = "Nuevo contacto " . $campaign;
    $txt = "<h2>Datos del contacto:</h2> <br>
        Empresa: " . $company . "<br>
        Asunto: " . $subject . "<br>
        Email: " . $email . "<br>
        Campaña: " . $campaign;

    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
    $headers .= 'From: <info@garberinformatica.com.com>' . "\r\n";

    mail($to,$asunto,$txt,$headers);

}

    // comprobamos que se han establecido las variables
if(!$company || !$subject || !$email){
    $newURL = 'https://garberinformatica.com/error/';
    header('Location: '.$newURL);

    
}else{

    # limpiamos las cadenas
    
    # conectamos con la BBDD

    $elhost = DB_HOST;
    $labd = DB_NAME;
    
    $conex = "mysql:host=$elhost;dbname=$labd";
    
    try{
        $db = new PDO($conex, DB_USER, DB_PASSWORD);
        $db->exec("set names utf8");
        

        # introducimos los datos en la bbdd
        // INSERT INTO table_name (column1, column2, column3, ...)
        // VALUES (value1, value2, value3, ...);..

        $lafecha = date('Y-m-d');

        $query = $db->prepare("INSERT INTO gbi_campaigns (campaign, company, subject, email, date) 
                 VALUES (:camp_name, :comp_name, :subject_name, :email_name, :date_name)");

        $query->bindParam(':camp_name', $campaign);
        $query->bindParam(':comp_name', $company);
        $query->bindParam(':subject_name', $subject);
        $query->bindParam(':email_name', $email);
        $query->bindParam(':date_name', $lafecha);

        $query->execute();

        gbi_envia_email(); # email al admin informando del nuevo contaacto

        $newURL = 'https://garberinformatica.com/gracias/'; # página agradecimiento.
        
        header('Location: '.$newURL);

    }catch(PDOException $e){
        // enviamos un email informando del error mostramos una página al cliente
        $to = "info@garberinformatica.com";
            
        $asunto = "Error página landing " . $campaign;
        $txt = "<h2>Datos del contacto:</h2> <br>
            Empresa: " . $company . "<br>
            Asunto: " . $subject . "<br>
            Email: " . $email . "<br>
            Campaña: " . $campaign . "<br>
            Error: " .$e->getMessage();   

        $headers = "MIME-Version: 1.0" . "\r\n";
        $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
        $headers .= 'From: <info@garberinformatica.com.com>' . "\r\n";

        mail($to,$asunto,$txt,$headers);

        $newURL = 'https://garberinformatica.com/error/';
        header('Location: '.$newURL);
        
    }

}


?>

 

Tabla gbi_campaigns:

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Base de datos: `yktduufs_wp211`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `gbi_campaigns`
--

CREATE TABLE `gbi_campaigns` (
  `id` int(11) NOT NULL,
  `campaign` text NOT NULL,
  `company` text NOT NULL,
  `subject` text NOT NULL,
  `email` text NOT NULL,
  `date` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `gbi_campaigns`
--
ALTER TABLE `gbi_campaigns`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `gbi_campaigns`
--
ALTER TABLE `gbi_campaigns`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

 

 

¿Vamos a la segunda parte? Haz click aquí

En esta segunda parte veremos cómo acceder desde el admin a la tabla y poder exportar los datos en formato CSV.

 

Más...

Nueva web Laboratorios Valquer

En colaboración con Amvos, hemos realizado la nueva web de laboratorios Valquer. Es una empresa fundada en 1975, con presencia en más

Nueva web credithousecar.com

Ha sido un placer realizar todo el diseño y la imagen corporativa de credithousecar.com Una web moderna y actual, con un diseño

Más...

Nueva web Laboratorios Valquer

En colaboración con Amvos, hemos realizado la nueva web de laboratorios Valquer. Es una empresa fundada en 1975, con presencia en más

Nueva web credithousecar.com

Ha sido un placer realizar todo el diseño y la imagen corporativa de credithousecar.com Una web moderna y actual, con un diseño

Deja un comentario

Ebook Gratis 7 claves para atraer clientes a tu web