Herramientas gratuitas para una landing page de éxito

3 Novembre 2015

templatelanding page landing page open source template programacion

Hemos hablado a menudo en este blog sobre qué es una landing page. El último artículo es el post de Gianpaolo que describe las líneas a seguir a nivel de usabilidad y conversiones para alcanzar los objetivos que nos fijemos y aumentar los beneficios. Yo en cambio, en este artículo os quiero dar algunos consejos técnicos sobre cómo crear una landing page de éxito sin necesidad de ser expertos en programación, utilizando herramientas gratuitas que encontraréis en Internet.

Búsqueda del template

En primer lugar deberás ir en busca de una plantilla que se ajuste a tus necesidades. Puedes utilizar estructuras prediseñadas que se han desarrollado utilizando el marco framework bootstrap, gracias a esta herramienta se pueden encontrar páginas de aterrizaje ya pre confeccionadas, completas y que se adaptan a diferentes dispositivos. Esto ayuda a ahorrar tiempo y sobre todo se pueden encontrar varios ejemplos completamente gratuitos. Una lista de plantillas gratuitas la encontrarás en startbootstrap.com o en bootstrapzero.com.

Para este post he elegido este template de ejemplo: http://bootstraptaste.com/theme/siimple/

Perparar el formulario de contacto

Una vez hemos elegido nuestra plantilla, preparamos el formulario para la recogida de datos. En este caso aconsejo utilizar de nuevo bootstrap para la creación del form, introduciendo todos los campos que necesites recopilar. Aquí tienes mi ejemplo:

<form id="formLead" class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label" for="nome">
Nome
</label>
<span id="nome-info" class="info"></span>
<input type="text" class="form-control" id="nome" name="nome" placeholder="Il tuo nome">
</div>

<div class="form-group">
<label class="control-label" for="email">
Email
</label><span id="email-info" class="info"></span>
<input type="email" class="form-control" id="email" name="email" placeholder="La tua email">
</div>

<div class="form-group">
<label class="control-label" for="content">
Messaggio
</label><span id="content-info" class="info"></span>
<textarea name="content" id="content" class="form-control" cols="60" rows="6"></textarea>
</div>
<div class="form-group">
<label class="control-label" for="nome">
</label>
<input type="submit" value="Invia la richiesta" class="btn btn-theme" />
<div id="loader-icon" class="pull-right" style="display:none;"><img src="assets/img/ajax-loader.gif" /></div>
<div id="mail-status"></div>
</div>
</form>

Convalidación del formulario y envío

El siguiente paso es establecer el control de los campos a rellenar mediante una función en javascript. El envío del módulo que contiene la recogida de los datos <input /> en cambio, se realizará a través de una llamada AJAX. Si necesitas un repaso sobre la programación javascript puedes utilizar estas prácticas clases que te ayudan a entender bien el lenguaje de programación:

Este es el código de mi ejemplo:

 <script type="text/javascript">
   $(document).ready(function (e){
   $("#frmContact").on('submit',(function(e){
    e.preventDefault();
   $('#loader-icon').show();
    var valid; 
    valid = controlloDatiLead();
    if(valid) {
   $.ajax({
    url: "genera-lead.php",
    type: "POST",
    data: new FormData(this),
    contentType: false,
    cache: false,
    processData:false,
    success: function(data){
   $("#mail-status").html(data);
   $('#loader-icon').hide();
    },
    error: function(){} 
     });
   }
  }));
 });
 
 function controlloDatiLead() {
    var valid = true; 
   $(".form-control").css('background-color','');
   $(".info").html('');
    if(!$("#nome").val()) {
   $("#nome-info").html(" (obbligatorio)");
    $("#nome").css('background-color','#FFFFDF');
    valid = false;
    }
    if(!$("#email").val()) {
   $("#email-info").html(" (obbligatorio)");
   $("#email").css('background-color','#FFFFDF');
     valid = false;
   }
   if(!$("#email").val().match(/^([w-.]+@([w-]+.)+[w-]{2,4})?$/)) {
   $("#email-info").html(" (obbligatorio)");
   $("#email").css('background-color','#FFFFDF');
     valid = false;
   } 
   if(!$("#content").val()) {
   $("#content-info").html(" (obbligatorio)");
   $("#content").css('background-color','#FFFFDF');
     valid = false;
   }
   return valid;
   } 
   </script>

Para terminar nos falta gestionar el envío de datos por email utilizando el código PHP. En este caso si necesitas un repaso también puedes consultar este curso: http://www.codecademy.com/tracks/php

<?php
 
 if(!empty($_POST)){
 $toEmail = "ertil@prima-posizione.it";
 $mailHeaders = "From: " . $_POST["nome"] . "<". $_POST["email"] .">rn";
 $content = $_POST["content"]; 
 if(mail($toEmail, 'Contatto Landing Page di successo', $content , $mailHeaders)) {
 print "<p class='success'>Richiesta inviata.</p>";
 } else {
 print "<p class='Error'>Errore nell'invio della Mail.</p>";
 }
 } else {
 print "<p class='Error'>Errore.</p>";
 }

?>