Los formularios son unos de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Permiten a los usuarios enviar datos al sitio web. La mayoría de las veces los datos se envían al servidor web, pero la página web también puede interceptarlos para usarlos por su cuenta.Un formulario está compuesto por uno o más widgets. Esos widgets pueden ser campos de texto (línea simple o multilínea), cuadros de selección, botones, casillas de verificación o botones de opción. La mayoría de las veces esos widgets están emparejados con una etiqueta que describe su propósito: las etiquetas implementadas adecuadamente pueden instruir claramente a los usuarios videntes y ciegos sobre qué ingresar en una entrada de formulario. La principal diferencia entre un formulario HTML y un documento HTML normal es que la mayoría de las veces, los datos recopilados por el formulario se envían a un servidor web. En ese caso, debe configurar un servidor web para recibir y procesar los datos. Leer mas...
Uso:
- Descarga el archivo zip contiene todo el código que necesita para el formulario (Parte inferior de este tutorial).
- Descomprima el archivo php-contact-form-code
- Abra el archivo llamado "handler.php"
- Busque sendEmailToagregue las direcciones de correo electrónico para recibir los envíos de formularios.
- Sube la carpeta completa a tu sitio web
- Abra el formpage.html en su navegador y pruebe
Las secciones a continuación explican el código de este formulario:
Código HTML
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="form_container">
<h2>Contáctenos</h2>
<p>Por favor envíe su mensaje a continuación. ¡Nos pondremos en contacto con usted lo antes posible!</p>
<form role="form" method="post" id="reused_form">
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Mensaje:</label>
<textarea class="form-control" type="textarea" id="message" name="message" maxlength="6000" rows="7"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Nombre:</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" class="btn btn-lg btn-default pull-right" >Enviar →</button>
</div>
</div>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; "> <h3>Envio su mensaje con éxito!</h3> </div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Lo sentimos, hubo un error al enviar su formulario. </div>
</div>
</div>
</div>Estilo CSS
El siguiente estilo CSS adicional se usa para hacer que el formulario se vea mejor
<link rel="stylesheet" href="form.css" >#form_container
{
background-image: url("images/paper-TL.webp");
background-size:100% 100%;
padding:15px 15px;
margin-top:15px;
}
body
{
background-color: #F4EAD5;
}
#form_container input[type='text'],
#form_container input[type='email'],
#form_container textarea
{
background: rgba(255,255,255,0.2);
}
Manejo de envío de formularios jQuery
<script src="form.js"></script>$(function()
{
function after_form_submitted(data)
{
if(data.result == 'success')
{
$('form#reused_form').hide();
$('#success_message').show();
$('#error_message').hide();
}
else
{
$('#error_message').append('<ul></ul>');
jQuery.each(data.errors,function(key,val)
{
$('#error_message ul').append('<li>'+key+':'+val+'</li>');
});
$('#success_message').hide();
$('#error_message').show();
//reverse the response on the button
$('button[type="button"]', $form).each(function()
{
$btn = $(this);
label = $btn.prop('orig_label');
if(label)
{
$btn.prop('type','submit' );
$btn.text(label);
$btn.prop('orig_label','');
}
});
}//else
}
$('#reused_form').submit(function(e)
{
e.preventDefault();
$form = $(this);
//show some response on the button
$('button[type="submit"]', $form).each(function()
{
$btn = $(this);
$btn.prop('type','button' );
$btn.prop('orig_label',$btn.text());
$btn.text('Sending ...');
});
$.ajax({
type: "POST",
url: 'handler.php',
dаta: $form.serialize(),
success: after_form_submitted,
dataType: 'json'
});
});
});
</script>Validaciones de formulario
Se utilizan validaciones HTML5. Por ejemplo, los campos Nombre y Correo electrónico tienen validación 'requerida' y el campo de correo electrónico es del tipo de entrada 'correo electrónico'.
<input type="email" class="form-control" id="email" name="email" required><textarea name="Message" maxlength="6000" required></textarea>Puede personalizar esas validaciones para satisfacer sus necesidades.
Manejo del lado del servidor (PHP)
Cada formulario requiere un script del lado del servidor para recopilar los datos del formulario y realizar el procesamiento como enviar correos electrónicos, guardar en la base de datos, etc. Este formulario viene con un script PHP para manejar los envíos de formularios. PHP es una plataforma de scripting del lado del servidor ampliamente compatible.
Cuando se envía el formulario, el controlador de eventos de envío de formularios de jаvascript anterior recopila los datos del formulario y los envía al script del lado del servidor.
El punto de entrada del script del servidor es handler.php (ver en el archivo zip descargado). El script usa una biblioteca llamada FormHandler, que usa otras bibliotecas.
Este FormHandler es una solución PHP para generar campos de formulario y validarlos. En general, hacer formularios es un trabajo que lleva mucho tiempo. En este paquete intentamos ofrecer una solución para que sea fácil crear formularios. Este implementa los estándares de codificación PSR-1 y PSR-2. Ademas implementa el estándar de carga automática PSR-4. Ver github.
Aquí está el código del handler.php<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
/*
Tested working with PHP5.4 and above (including PHP 7 )
*/
require_once './vendor/autoload.php';
use FormGuideHandlxFormHandler;
$pp = new FormHandler();
$validator = $pp->getValidator();
$validator->fields(['name','email'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);
$pp->sendEmailTo('webmaster@tutorialesenlinea.es'); // ← Tu email aquí...
echo $pp->process($_POST);$pp->sendEmailTo(['someone@gmail.com', 'another@gmail.com','more@gmail.com']);Agregar validaciones de formulario
Agregue sus validaciones en la función validate (). Puede agregar más validaciones según sea necesario. Ejemplos:
$validator = $pp->getValidator();
$validator->fields(['name','email'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);Personalizar PHPMailer
FormHandler utiliza PHPMailerpara enviar correos electrónicos. Puede personalizar el objeto interno PHPMailer de esta manera:
$mailer = $pp->getMailer();
$mailer->setFrom('someone@yourwebsite.com','Form',false);Usando una cuenta SMTP
También puede personalizar PHPMailer para usar una cuenta SMTP. El fragmento a continuación utiliza una cuenta SMTP de Amazon SES:
$mailer = $pp->getMailer();
//Using Aamazon AWS SES SMTP account
$mailer->IsSMTP();
$mailer->SMTPAuth = true;
$mailer->SMTPSecure = "tls";
$mailer->Host = "email-smtp.us-east-1.amazonaws.com";
$mailer->Username = "YOUR AWS SMTP CREDENTIALS";
$mailer->Password = "YOUR AWS SMTP CREDENTIALS";
$mailer->setFrom('yourname@domain.com', 'Form');Subidas de archivos
Si tiene cargas de archivos en el formulario, simplemente llame a attachFiles () con el nombre del campo de entrada del archivo para adjuntar el archivo al correo electrónico.
$pp->attachFiles(['image']);Captcha
Puede usar Gregwar/Captchapara agregar captcha a su formulario. Llame a la función requireCaptcha () para que se active la validación.
$pp->requireCaptcha();Alternativa al captcha de imagen, también puede agregar ReCaptcha al formulario. Primero debes registrarte con reCaptcha y obtener tu clave secreta .
Luego habilite ReCaptcha y configure su clave secreta.
$pp->requireReCaptcha();
$pp->getReCaptcha()->initSecretKey('Your ReCaptcha Secret Key Here');Validaciones de formularios del lado del servidor
Las validaciones de formularios del lado del servidor son esenciales para cualquier formulario. No puede confiar en los datos enviados a un script de procesamiento de formularios.
Para este formulario, las validaciones y la personalización del formulario del lado del servidor se realizan utilizando esta biblioteca PHPFormValidation. Consulte la anterior documentación menconada para agregar o actualizar las validaciones. Descargar
Comentarios