html Formulario de contacto

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Formulario de contacto相关的知识，希望对你有一定的参考价值。

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;
}

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);
            }
        });

    });

});

<?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');
}

<!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>

以上是关于html Formulario de contacto的主要内容，如果未能解决你的问题，请参考以下文章

css Formulario de contacto desplegable。

php 得到更加巧妙的Formulario de busqueda

php Formulario de busqueda desplegable hover

php Ejemplo de Santiago insertaLista listado desplegable insertaformulario formulario desvinculado

php Añadirunmensaje encima del formulario de registro y登录

JavaScript Utilizar la tecla intro como un tabulador de formulario