Inicia sesión



Código de formulario de contacto PHP simple

Código de formulario de contacto PHP simpleLos 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 &rarr;</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.css
#form_container
{
    background-image: url("images/paper-TL.jpg");
    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>
form.js
$(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>
Del mismo modo, el campo de mensaje (área de texto) permite una longitud máxima de 6000 caracteres
<textarea  name="Message"  maxlength="6000" required></textarea>
El uso de las validaciones HTML5 incorporadas tiene la ventaja de que el navegador muestra el mensaje de error. 
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 FormGuide\Handlx\FormHandler;

$pp = new FormHandler(); 

$validator = $pp->getValidator();
$validator->fields(['name','email'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);

$pp->sendEmailTo('[email protected]'); // ← Tu email aquí...

echo $pp->process($_POST);
Debe editar handler.php y cambiar "[email protected]" a su dirección de correo electrónico. Si desea agregar una segunda o tercera dirección de correo electrónico, puede hacerlo así:
$pp->sendEmailTo(['[email protected]', '[email protected]','[email protected]']);

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('[email protected]','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('[email protected]', 'Form');
Consulte la página PHPMailer para obtener más opciones de personalización.

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']);
Donde 'image' es el nombre del campo de carga de archivos.

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();
ReCaptcha

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


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-09-29
  • Categorias: Diseño Web CSS3 html5 Html php WebSite webmasters Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Como hacer una llamada desde tu sitio Web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-12
  • Categorias: Diseño Web html5 Html WebSite Telefonia Smartphone Noticias Tutorial

Como crear tu sitio Web con un hosting web de calidad

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-12
  • Categorias: WebSite hosting Servidor Noticias Tutorial

¿Cómo ganar en las apuestas deportivas?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-10
  • Categorias: WebSite Forex Noticias Tutorial

Cursos que aún ofrecen certificados gratuitos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-26
  • Categorias: Cursos Noticias Tutorial Aprendizaje

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial