Strumenti gratuiti per una landing page di successo

Di che cosa è una landing page ne abbiamo parlato e spiegato in tanti post in questo blog. L’ultimo pubblicato è il post di Gianpaolo che descrive delle linee guida sull’usabilità e le conversioni per raggiungere i propri obiettivi e aumentare i profitti. Io invece in questo articolo ti voglio dare dei consigli tecnici su come creare una landing page di successo anche se non sei un esperto in programmazione sfruttando degli strumenti gratuiti.

Ricerca del template

Prima di tutto in base alle esigenze, vai alla ricerca di un template. Puoi usare strutture già pronte che sono state sviluppate utilizzando il framework  bootstrap, grazie a questo strumento puoi trovare landing page già preconfezionate, complete e responsive per diversi dispositivi. Questo ti aiuta a risparmiare in tempo e sopratutto puoi trovare diversi esempi completamente gratuiti. Una lista di template gratuiti lo trovi su startbootstrap.com oppure su bootstrapzero.com

Per questo post io ho scelto come esempio questo tempalte: http://bootstraptaste.com/theme/siimple/

Perparare il form di contatto

A questo punto con il template scelto prepariamo il form per il recupero dei dati. Anche in questo caso io consiglio di usare bootstrap per la creazione del form inserendo tutti i campi di cui hai bisogno.  Ecco qui il mio esempio:

<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>

Convalida del form e invio

Il passo successivo è quello di effettuare il controllo dei campi attraverso una funzione in javascript. Invece l’invio del modulo che contiene la raccolta degli dati <input /> verrà fatto attraverso una chiamata AJAX. Se hai bisogno di un ripasso per quanto riguarda la programmazione javascript puoi seguire delle lezioni in inglese con esempi pratici che ti aiutano a capire bene il linguaggio di programmazione.

Questo è il codice del mio esempio:

 

 <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-\.][email protected]([\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>

 

 

Resta da completare la gestione dell’invio dei dati per email utilizzando il codce PHP. Anche qui se prima hai bisogno di un ripasso della programmazione PHP puoi consultare questo corso: http://www.codecademy.com/tracks/php

 

<?php
 
 if(!empty($_POST)){
 $toEmail = "[email protected]";
 $mailHeaders = "From: " . $_POST["nome"] . "<". $_POST["email"] .">\r\n";
 $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>";
 }

?>

 

Risultato

In questa pagina potete vedere il risultato completo : http://blog.prima-posizione.it/wp-content/uploads/landing/

landing-page-di-successo

Il file completo della landing page modificata si può scaricare regalando un “mi piace” su Facebook oppure con un tweet. 🙂

 

 

Spero che i consigli che ti ho dato ti possano essere di aiuto dandoti qualche idea in più di sviluppo 🙂

Se hai domande scrivi un commento sarò ben felice di risponderti.

A presto
Ertil Gani

Scritto da    |   giugno 8th, 2015   |   2 Commenti
Ertil Gani

2 Responses to Strumenti gratuiti per una landing page di successo

Lascia un commento