jrobinsonc
4/3/2014 - 2:20 PM

Formulario de contacto

Formulario de contacto

styles.css
content_copyfile_download
body {
    background-color: #f6f6f6;
}

#contact-form {
    margin: 0 auto;
    width: 300px;
}

#contact-form p label {
    display: block;
}

#contact-form p input, 
#contact-form p textarea {
    border: 1px solid #ccc;
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 3px;
    font-family: "Courier New", Courier, monospace;
}

#contact-form p textarea {
    height: 100px;
}

#contact-form p em {
    display: inline-block;
    margin-left: 10px;
    font-size: 86%;
    color:#B00000;
}
scripts.js
content_copyfile_download
jQuery(document).ready(function($) {
    var $contact_form = $('#contact-form'),
        $contact_form_msg = $('#contact-form-msg'),
        $contact_form_inputs = $contact_form.find(':input');

    jQuery.extend(jQuery.validator.messages, {
        required: "(este campo es obligatorio)",
        email: "(el email no es válido)"
    });

    $contact_form.validate({
        errorElement: "em",
        errorPlacement: function (error, element) {

            var $element = $(element);

            $(error).appendTo($element.prev('label'));

        }
    });

    $contact_form.submit(function () {

        if (!$contact_form.valid() || $contact_form.data('sending') === true) { return; }


        $.ajax({
            type: 'POST',
            data: $contact_form.serialize() + '&contact_form=' + new Date().getTime(),
            beforeSend: function () {
                $contact_form_inputs.prop('disabled', true);

                $contact_form_msg.text('(enviando...)').show();

                $contact_form.data('sending', true);
            },
            success: function (response) {

                switch (response) {
                case '0':
                    alert('El mensaje fue enviado.');

                    $contact_form.trigger("reset");
                    break;

                default:
                    alert('Hubo un error, por favor intetalo otra vez.');
                    break;
                }
            },
            complete: function () {

                $contact_form_msg.fadeOut(function () {
                    $contact_form_msg.text('');
                });

                $contact_form_inputs.prop('disabled', false);

                $contact_form.data('sending', false);
            }
        });

    });

});
script.php
content_copyfile_download
<?php 

if (isset($_POST['contact_form']))
{
    $message = 'Formulario de Contacto' . "\n\n\n";
    
    foreach (array('full_name' => 'Nombre', 'email' => 'Email', 'message' => 'Mensaje') as $key => $value) 
    {
        $_POST[$key] = strip_tags($_POST[$key]);
        $_POST[$key] = substr($_POST[$key], 0, 200);

        $message .= sprintf('%s: %s' . "\n\n", $value, $_POST[$key]);
    }
    
    $message .= "\n" . '============================================================' . "\n";
    $message .= sprintf('IP: %s' . "\n", $_SERVER['REMOTE_ADDR']);
    $message .= sprintf('Fecha: %s' . "\n", date('Y-m-d H:i:s'));
    
    // El email se envia como texto plano.
    $sender = @mail('me@me.com', 'Formulario de contacto', $message);
    
    exit($sender ? '0' : '1');
}
contact-form.html
content_copyfile_download
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    
    <title>Formulario de contacto</title>

    <link rel="stylesheet" type="text/css" href="styles.css">
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>

    <form action="javascript:;" id="contact-form" method="post" novalidate="novalidate">

            <h3>Formulario de contacto</h3>

            <p id="contact-form-msg" style="display: none"></p>

            <p>
                <label for="contact-form-full_name">Nombre</label>
                <input type="text" id="contact-form-full_name" name="full_name" placeholder="Nombre" class="required">
            </p>

            <p>
                <label for="contact-form-email">Email</label>
                <input type="text" id="contact-form-email" name="email" placeholder="Email" class="required email">
            </p>
            
            <p>
                <label for="contact-form-message">Mensaje</label>
                <textarea id="contact-form-message" name="message" placeholder="Mensaje" class="required"></textarea>
            </p>

            <p>
                <button type="submit">Enviar</button>
            </p>

    </form>
    
</body>
</html>