Categorías destacadas
Artículo
|
Formulario de comentarios creado en PHP y jQuery |
Cuando se crea una zona de noticias donde se permite la entrada de comentarios, es fundamental crear un buen formulario de comentarios de fácil acceso. Para ello, una buena idea es tenerlo siempre visible, y es lo que vamos a ver hoy.
Nuestro formulario estará oculto en la parte baja de la ventana, pero con una pestaña que al pulsar sobre ella, hará que se despliegue este formulario y que el usuario pueda meter el comentario que quiera.
Luego con volver a pulsar sobre él, este se volverá a ocultar.
Lo primero que haremos será crear nuestra estructura HTML. El código será el siguiente.
Si nos fijamos en el código, dentro del contenedor con id “feedback” es donde tendremos nuestro formulario. Mediante CSS tendremos este oculto y luego mediante jQuery lo mostraremos.
Dentro de ese contenedor, tenemos cinco zonas para los colores, cada una de un 20 % del ancho del formulario. Por último, dentro del contenedor “section” será donde coloquemos la cabecera y los controles del formulario.
Por último, hacemos la llamada a la librería jQuery, para conseguir una carga mejor de la página.
A continuación lo que haremos será dar los estilos a la estructura del formulario que hemos creado en el paso anterior.
Al primer elemento que le daremos estilos, será al contenedor general “feedback”. A este contenedor le aplicamos una posición fija y anclado al navegador. Le asignamos un valor negativo a la propiedad margin-bottom para que este aparezca oculto. Lo siguiente que hacemos son aplicar las propiedades al DIV .section y a las cinco zonas de colores. Estas serán iguales, pero cambiarán el color de fondo de cada una de ellas.
La segunda parte de la hoja de estilos es la siguiente.
En esta parte de la hoja de estilos, nos centramos en personalizar los elementos del formulario. En nuestro caso el botón de envío, que tendrá tres estados: antes de enviarlo, cuando está trabajando y una vez enviado, donde no aparecerá ningún botón.
Una vez aplicados todos los estilos, lo que hacemos es darle la animación al formulario utilizando jQuery, de esta forma podremos hacer visible el formulario y ocultarlo, además de gestionar cuando se haya pulsado el envío. Para mostrar y ocultar el formulario, deberemos de capturar el evento listener y aplicarle una animación simple. Veamos como hacerlo.
La segunda parte del script lo que hace es la gestión del envío del formulario cuando se pulsa el botón de envío.
En el script, utilizamos el método $.ajax() para interactuar con “submit.php”. Este método da un poco más de control que los métodos $.get() y $.post().
El último paso que veremos será la creación de archivo php que gestionará el envío del formulario. El código que contendrá el archivo “submit.php” será el siguiente.
En este código, lo primero que hacemos es comprobar la sesión para controlar el número de mensajes enviados durante la última hora. Si este es mayor a 10 o desde el último mensaje no ha pasado más de 10 segundos, la aplicación dará un error.
Para hacer el envío del email, utilizaremos la clase PHPMailer, que nos facilita mucho el envío de los correos.
Con esto ya hemos terminado la creación de nuestro formulario de comentarios.
Puede ver un ejemplo aquí.
Vía: Tutorialzine
Nuestro formulario estará oculto en la parte baja de la ventana, pero con una pestaña que al pulsar sobre ella, hará que se despliegue este formulario y que el usuario pueda meter el comentario que quiera.
Luego con volver a pulsar sobre él, este se volverá a ocultar.
Lo primero que haremos será crear nuestra estructura HTML. El código será el siguiente.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Quick Feedback Form w/ PHP and jQuery | Tutorialzine Demo</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="feedback"> <!-- Five color spans, floated to the left of each other --> <span class="color color-1"></span> <span class="color color-2"></span> <span class="color color-3"></span> <span class="color color-4"></span> <span class="color color-5"></span> <div class="section"> <!-- The arrow span is floated to the right --> <h6><span class="arrow up"></span>Feedback</h6> <p class="message">Please include your contact information if you'd like to receive a reply.</p> <textarea></textarea> <a class="submit" href="">Submit</a> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
Si nos fijamos en el código, dentro del contenedor con id “feedback” es donde tendremos nuestro formulario. Mediante CSS tendremos este oculto y luego mediante jQuery lo mostraremos.
Dentro de ese contenedor, tenemos cinco zonas para los colores, cada una de un 20 % del ancho del formulario. Por último, dentro del contenedor “section” será donde coloquemos la cabecera y los controles del formulario.
Por último, hacemos la llamada a la librería jQuery, para conseguir una carga mejor de la página.
A continuación lo que haremos será dar los estilos a la estructura del formulario que hemos creado en el paso anterior.
#feedback{
background-color:#9db09f;
width:310px;
height:330px;
position:fixed;
bottom:0;
right:120px;
margin-bottom:-270px;
z-index:10000;
}
#feedback .section{
background:url('img/bg.png') repeat-x top left;
border:1px solid #808f81;
border-bottom:none;
padding:10px 25px 25px;
}
#feedback .color{
float:left;
height:4px;
width:20%;
overflow:hidden;
}
#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}
#feedback h6{
background:url("img/feedback.png") no-repeat;
height:38px;
margin:5px 0 12px;
text-indent:-99999px;
cursor:pointer;
}
#feedback textarea{
background-color:#fff;
border:none;
color:#666666;
font:13px 'Lucida Sans',Arial,sans-serif;
height:100px;
padding:10px;
width:236px;
-moz-box-shadow:4px 4px 0 #8a9b8c;
-webkit-box-shadow:4px 4px 0 #8a9b8c;
box-shadow:4px 4px 0 #8a9b8c;
}
Al primer elemento que le daremos estilos, será al contenedor general “feedback”. A este contenedor le aplicamos una posición fija y anclado al navegador. Le asignamos un valor negativo a la propiedad margin-bottom para que este aparezca oculto. Lo siguiente que hacemos son aplicar las propiedades al DIV .section y a las cinco zonas de colores. Estas serán iguales, pero cambiarán el color de fondo de cada una de ellas.
La segunda parte de la hoja de estilos es la siguiente.
#feedback a.submit{
background:url("img/submit.png") no-repeat;
border:none;
display:block;
height:34px;
margin:20px auto 0;
text-decoration:none;
text-indent:-99999px;
width:91px;
}
#feedback a.submit:hover{
background-position:left bottom;
}
#feedback a.submit.working{
background-position:top right !important;
cursor:default;
}
#feedback .message{
font-family:Corbel,Arial,sans-serif;
color:#5a665b;
text-shadow:1px 1px 0 #b3c2b5;
margin-bottom:20px;
}
#feedback .arrow{
background:url('img/arrows.png') no-repeat;
float:right;
width:23px;
height:18px;
position:relative;
top:10px;
}
#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}
#feedback .response{
font-size:21px;
margin-top:70px;
text-align:center;
text-shadow:2px 2px 0 #889889;
color:#FCFCFC;
}
En esta parte de la hoja de estilos, nos centramos en personalizar los elementos del formulario. En nuestro caso el botón de envío, que tendrá tres estados: antes de enviarlo, cuando está trabajando y una vez enviado, donde no aparecerá ningún botón.
Una vez aplicados todos los estilos, lo que hacemos es darle la animación al formulario utilizando jQuery, de esta forma podremos hacer visible el formulario y ocultarlo, además de gestionar cuando se haya pulsado el envío. Para mostrar y ocultar el formulario, deberemos de capturar el evento listener y aplicarle una animación simple. Veamos como hacerlo.
$(document).ready(function(){
// The relative URL of the submit.php script.
// You will probably have to change it.
var submitURL = 'submit.php';
// Caching the feedback object:
var feedback = $('#feedback');
$('#feedback h6').click(function(){
// We are storing the values of the animated
// properties in a separate object:
var anim = {
mb : 0, // Margin Bottom
pt : 25 // Padding Top
};
var el = $(this).find('.arrow');
if(el.hasClass('down')){
anim = {
mb : -270,
pt : 10
};
}
// The first animation moves the form up or down, and the second one
// moves the "Feedback" heading, so it fits in the minimized version
feedback.stop().animate({marginBottom: anim.mb});
feedback.find('.section').stop().animate({paddingTop:anim.pt},function(){
el.toggleClass('down up');
});
});
La segunda parte del script lo que hace es la gestión del envío del formulario cuando se pulsa el botón de envío.
$('#feedback a.submit').live('click',function(){
var button = $(this);
var textarea = feedback.find('textarea');
// We use the working class not only for styling the submit button,
// but also as kind of a "lock" to prevent multiple submissions.
if(button.hasClass('working') || textarea.val().length < 5){
return false;
}
// Locking the form and changing the button style:
button.addClass('working');
$.ajax({
url : submitURL,
type : 'post',
data : { message : textarea.val()},
complete : function(xhr){
var text = xhr.responseText;
// This will help users troubleshoot their form:
if(xhr.status == 404){
text = 'Your path to submit.php is incorrect.';
}
// Hiding the button and the textarea, after which
// we are showing the received response from submit.php
button.fadeOut();
textarea.fadeOut(function(){
var span = $('',{
className : 'response',
html : text
})
.hide()
.appendTo(feedback.find('.section'))
.show();
}).val('');
}
});
return false;
});
});
En el script, utilizamos el método $.ajax() para interactuar con “submit.php”. Este método da un poco más de control que los métodos $.get() y $.post().
El último paso que veremos será la creación de archivo php que gestionará el envío del formulario. El código que contendrá el archivo “submit.php” será el siguiente.
// Enter your email address below
$emailAddress = 'me@example.com';
// Using session to prevent flooding:
session_name('quickFeedback');
session_start();
// If the last form submit was less than 10 seconds ago,
// or the user has already sent 10 messages in the last hour
if( $_SESSION['lastSubmit'] && ( time() - $_SESSION['lastSubmit'] < 10 || $_SESSION['submitsLastHour'][date('d-m-Y-H')] > 10 )){
die('Please wait for a few minutes before sending again.');
}
$_SESSION['lastSubmit'] = time();
$_SESSION['submitsLastHour'][date('d-m-Y-H')]++;
require "phpmailer/class.phpmailer.php";
if(ini_get('magic_quotes_gpc')){
// If magic quotes are enabled, strip them
$_POST['message'] = stripslashes($_POST['message']);
}
if(mb_strlen($_POST['message'],'utf-8') < 5){
die('Your feedback body is too short.');
}
$msg = nl2br(strip_tags($_POST['message']));
// Using the PHPMailer class
$mail = new PHPMailer();
$mail->IsMail();
// Adding the receiving email address
$mail->AddAddress($emailAddress);
$mail->Subject = 'New Quick Feedback Form Submission';
$mail->MsgHTML($msg);
$mail->AddReplyTo('noreply@'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');
$mail->SetFrom('noreply@'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');
$mail->Send();
echo 'Thank you!';
En este código, lo primero que hacemos es comprobar la sesión para controlar el número de mensajes enviados durante la última hora. Si este es mayor a 10 o desde el último mensaje no ha pasado más de 10 segundos, la aplicación dará un error.
Para hacer el envío del email, utilizaremos la clase PHPMailer, que nos facilita mucho el envío de los correos.
Con esto ya hemos terminado la creación de nuestro formulario de comentarios.
Puede ver un ejemplo aquí.
Vía: Tutorialzine
 |
Publicado por: angel carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
