Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky

Ver más
  • 20,264 Miembros
  • 15,820 Temas
  • 6,260 Seguidores
  • 2

[Aporte] Formulario de contacto en HTML, PHP & CSS

[Aporte] Formulario de contacto en HTML, PHP & CSS

Bienvenido al tema

[Aporte] Formulario de contacto en HTML, PHP & CSS

Lo que necesitamos es Notepad++ para editar el formulario a tu gusto.

[Aporte] Formulario de contacto en HTML, PHP & CSSLOL[Aporte] Formulario de contacto en HTML, PHP & CSS

[Aporte] Formulario de contacto en HTML, PHP & CSS

Index HTML

<html>
    <head>
        <title>Contacto</title>
        <link rel='stylesheet' href='estilos.css'>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
        <script src='funciones.js'></script>
    </head>
    <body>
        <form class='contacto'>
            <div><label>Nick:</label><input type='text' class='nombre' value=''></div>
            <div><label>Correo electrónico:</label><input type='text' class='email' value=''></div>
            <div><label>Asunto:</label><input type='text' class='asunto' value=''></div>
            <div><label>Mensaje:</label><textarea rows='6' class='mensaje'></textarea></div>
            <div><input type='submit' value='Enviar Mensaje' class='boton'></div>
        </form>
    </body>
</html>

[Aporte] Formulario de contacto en HTML, PHP & CSS

Index PHP

En el archivo index.php en la linea 21 se encuentra el email de destino tucorreo@gmail.com

<html>
    <head>
        <title>Contacto</title>
        <link rel='stylesheet' href='estilos.css'>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
        <script src='funciones.js'></script>
    </head>
    <body>
    <?php
        
if(isset($_POST['boton'])){
            
$errors = array();
            if(
$_POST['nombre'] == ''){
                
$errors[1] = '<span class="error">Ingresa tu Nick</span>';
            }else if(
$_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/",$_POST['email'])){
                
$errors[2] = '<span class="error">Ingresa un email valido</span>';
            }else if(
$_POST['asunto'] == ''){
                
$errors[3] = '<span class="error">Ingresa el motivo del mensaje</span>';
            }else if(
$_POST['mensaje'] == ''){
                
$errors[4] = '<span class="error">Ingresa el mensaje</span>';
            }else{            
                
$dest "tucorreo@gmail.com"//Email de destino
                
$nombre $_POST['nombre'];
                
$email $_POST['email'];
                
$asunto $_POST['asunto']; //Asunto
                
$cuerpo $_POST['mensaje']; //Cuerpo del mensaje
                //Cabeceras del correo
                
$headers "From: $nombre $emailrn"//Quien envia?
                
$headers .= "X-Mailer: PHP5n";
                
$headers .= 'MIME-Version: 1.0' "n";
                
$headers .= 'Content-type: text/html; charset=iso-8859-1' "rn"//
                
                
if(mail($dest,$asunto,$cuerpo,$headers)){
                    
$result '<div class="result_ok">Tu mensaje se envio correctamente.</a>';    
                    
// si el envio fue exitoso reseteamos lo que el usuario escribio:
                    
$_POST['nombre'] = '';
                    
$_POST['email'] = '';
                    
$_POST['asunto'] = '';
                    
$_POST['mensaje'] = '';
                }else{
                    
$result '<div class="result_fail">Hubo un error al enviar el mensaje :(</a>';
                }
            }
        }
    
?>
        <form class='contacto' method='POST' action=''>
            <div><label>Nick:</label><input type='text' class='nombre' name='nombre' value='<?php echo $_POST['nombre']; ?>'><?php echo $errors[1?></div>
            <div><label>Correo electrónico:</label><input type='text' class='email' name='email' value='<?php echo $_POST['email']; ?>'><?php echo $errors[2?></div>
            <div><label>Asunto:</label><input type='text' class='asunto' name='asunto' value='<?php echo $_POST['asunto']; ?>'><?php echo $errors[3?></div>
            <div><label>Mensaje:</label><textarea rows='6' class='mensaje' name='mensaje'><?php echo $_POST['mensaje']; ?></textarea><?php echo $errors[4?></div>
            <div><input type='submit' value='Enviar Mensaje' class='boton' name='boton'></div>
            <?php echo $result?>
        </form>
    </body>
</html>

[Aporte] Formulario de contacto en HTML, PHP & CSS

Estilos CSS

*{
    font-family: sans-serif;
    font-size: 12px;
    color: #798e94;
}
body {
    width: 400px;
    margin: auto;
    background-color: F5F5F5;
}
.contacto{
    border: 1px solid #CED5D7;
    border-radius: 6px;
    padding: 45px 45px 20px;
    margin-top: 50px;
    background-color: white;
    box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;
}
.contacto label{
    display: block; 
    font-weight: bold;
}
.contacto div{
    margin-bottom: 15px;
}
.contacto input[type='text'], .contacto textarea{
    padding: 7px 6px;
    width: 294px;
    border: 1px solid #CED5D7;
    resize: none;
    box-shadow:0 0 0 3px #EEF5F7;
    margin: 5px 0;
}
.contacto input[type='text']:focus, .contacto textarea:focus{
    outline: none;
    box-shadow:0 0 0 3px #dde9ec;
}
.contacto input[type='text'].invalido, .contacto textarea.invalido{
    box-shadow:0 0 0 3px #FFC9C9;
}
.contacto input[type='submit']{
    border: 1px solid #CED5D7;
    box-shadow:0 0 0 3px #EEF5F7;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 0px white;
    
    background: #e4f1f6; 
    background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
    background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%); 
}
.contacto input[type='submit']:hover{
    background: #edfcff; 
    background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
    background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%); 
}
.contacto input[type='submit']:active{
    background: #cfe6ef; 
    background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
    background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}
.error{
    background-color: #BC1010;
    border-radius: 4px 4px 4px 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: 6px;
    padding: 6px 12px;
    position: absolute;
}
.error:before{
    border-color: transparent #BC1010 transparent transparent;
    border-style: solid;
    border-width: 6px 8px;
    content: "";
    display: block;
    height: 0;
    left: -16px;
    position: absolute;
    top: 8px;
    width: 0;
}
.result_fail{
    background: none repeat scroll 0 0 #BC1010;
    border-radius: 20px 20px 20px 20px;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
}
.result_ok{
    background: none repeat scroll 0 0 #1EA700;
    border-radius: 20px 20px 20px 20px;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
}

.error{
    background-color: #BC1010;
    padding: 6px 12px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: 6px;
    position: absolute;
}
.error:before{ /* Este es un truco para crear una flechita */
    content: '';
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #BC1010;
    border-left: 8px solid transparent;
    left: -16px;
    position: absolute;
    top: 5px;
}

.result_fail{
    background: none repeat scroll 0 0 #BC1010;
    border-radius: 20px 20px 20px 20px;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
}
.result_ok{
    background: none repeat scroll 0 0 #1EA700;
    border-radius: 20px 20px 20px 20px;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
}

[Aporte] Formulario de contacto en HTML, PHP & CSS

Funciones js

$(document).ready(function() { 
    var emailreg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;    
    $(".boton").click(function(){  
        $(".error").fadeOut().remove();
        
        if ($(".nombre").val() == "") {  
            $(".nombre").focus().after('<span class="error">Ingresa tu Nick</span>');  
            return false;  
        }  
        }else if ($(".email").val() == "" || !emailreg.test($(".email").val())) {
            $(".email").focus().after('<span class="error">Ingresa un email valido</span>');  
            return false;  
        }  
        if ($(".asunto").val() == "") {  
            $(".asunto").focus().after('<span class="error">Ingresa el motivo del mensaje</span>');  
            return false;  
        }  
        if ($(".mensaje").val() == "") {  
            $(".mensaje").focus().after('<span class="error">Ingresa tu mensaje</span>');   
            return false;  
        }  
    });  
    $(".nombre, .asunto, .mensaje").keyup(function(){ 
        if ($(this).val() != "") {              
            $('.error').fadeOut();
            return false;  
        }  
    });    
    $(".email").keyup(function(){ 
        if ($(".email").val() != "" && emailreg.test($(".email").val())) {    
            $('.error').fadeOut();  
            return false;  
        }  
    });
});

[Aporte] Formulario de contacto en HTML, PHP & CSS

Eso es todo, espero les sirva .

[Aporte] Formulario de contacto en HTML, PHP & CSS

Acá se explica todo al 100%:
Como hacer un formulario de contacto I – HTML y CSS
Como hacer un formulario de contacto II – Validar con jQuery
Como hacer un formulario de contacto III: Validar y enviar con PHP
  • 2
  • 16Calificación
  • 5Seguidores
  • 12.728Visitas
  • 22Favoritos

11 comentarios

@norepost Hace más de 2 años
Me re sirve el de CSS
Gracias! +1
@Crat0x_Is_Back Hace más de 2 años
+1
@gxavi Hace más de 2 años
Te quedo Elegante!!
@gamer74 Hace más de 2 años
@fif020 Hace más de 2 años
Excelente! buen aporte me sirve justo ahora!!! se agradece!
@shualt Hace más de 2 años
Que emoción, es mi tutorial

Gracias por poner la fuente.
@movilcom Hace más de 2 años
gracias
@ElNicko077 Hace más de 2 años
Como lo abro desde un boton o texto?
@AlbeerToo1229 Hace más de 1 año
Te quedo Muy Muy Bueno
@linza Hace más de 1 año
como lo agrego al dreamweaver??
@shualt Hace más de 1 año
Copia el codigo en modo HTML.
@linza Hace más de 1 año
@shualt ya lo puse pero desde el html no anda, desde el php si, tengo que poner algun codigo en el html para que ande?
Tienes que ser miembro para responder en este tema