jquery ✁ form per newsletter con jquery | html5 | css3 | php

☼ Benetrovati, o inabili al maneggio dell'html: questo tutorial propalerà le seguenti indettature:

✓ gestione degli effetti focus/hover utilizzando CSS3;
✓ rendere i campi obbligatori tramite jQuery HTML5-form di Matias Mancini;
✓ specifiche sul costrutto/inoltro dei dati traverso PHP.

✁ I neghittosi potranno scaricare lo .zip ➤ contenente i files (al completo) illustrati nel tutorial.

demo | box per newsletter

box ❝ newsletter ❞

✁ html di base

<div id="box-newsletter">
  <form id="newsletter" name="newsletter" method="post" action="invio.php">
    <input type="text" name="nome" class="campo" placeholder="* nome" />
    <input type="text" name="email" class="campo" placeholder=" * email" />
    <input type="submit" name="button" id="pulsante" />
  </form>
</div>

✁ css

/* cambio del colore di fondo con mouse hover sui campi */
.campo:hover {
  background-color: #D9DCC7;
  -moz-transition: all 0.5s ease-in;
  -webkit-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
/* cambio del colore di fondo clickando nei campi */ 
.campo:focus {
  background-color: #E6E8DA;
  -moz-transition: all 0.5s ease-in;
  -webkit-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}

jquery html5 form

✁ html

<form id="newsletter" name="newsletter" method="post" action="invio.php">
  <!-- inserire il title e la proprietà required nei campi obbligatori -->
  <input type="text" title="inserire il nome" class="campo" required />
  <!-- in presenza di indirizzo email sostituire l'input type --> 
  <input type="email" title="inserire la email" class="campo" required />
  <!-- integrare il div che richiamerà i messaggi di errore --> 
  <div id="errore"></div> 
</form>

✁ javascript

$('#newsletter').html5form({
  // ne ignoro il movente, ma il valore false evita problemi di layout
  async: false,
  // consente la compatibilità con tutti i browser
  allBrowsers: true,
  // prelazione linguaggio
  messages: 'it',
  // personalizzazione messaggi di errore
  emptyMessage: '* obbligatorio',
  emailMessage: 'mail @ errata',
  // nome dell'id scelto per il div richiamante gli errori
  responseDiv: '#errore',
  // personalizzazione del colore dei campi on-off
  colorOn: '#858775',
  colorOff: '#969B94'
})

☼ Oltre la sovrastante regola sarà necessario richiamare all'interno dell'head il files "html5form.js".

Javascript e correlati CSS sono inclusi (personalizzati ad hoc) nello .zip scaricabile ➤

pagina ❝ invio.php ❞

✁ php

<?php
  // inserire il proprio indirizzo email
  $to = "vostraemail@sito.it";
  // specifica la email del richiedente
  $headers = "From: " . $_POST['email'];
  // soggetto della mail
  $subject = "Newsletter - nuovo iscritto";
  // contenuto del messaggio
  $body = "Nuovo iscritto alla Newsletter:\n\n";
  // richiama il nome
  $body .= "Nome: " . trim(stripslashes($_POST["nome"])) . "\n";
  // richiama email
  $body .= "E-mail: " . trim(stripslashes($_POST["email"])) . "\n";
  // invio mail
  mail($to, $subject, $body, $headers);
  // redirect alla pagina di iscrizione
  header("location: newsletter.html");
  exit;
?>

☼ Rammentate di sostituire l'indirizzo email provvisorio e di rititolare la destinazione del redirect.

specifiche & download del tutorial

☼ All'interno dello .zip sono presenti alcuni effetti aggiuntivi (icone a comparsa con effetto fade).

✁ scaricate lo .zip ➤ contenente i files illustrati nel tutorial.

commenti ✁