En este artículo, aprenderemos a crear un formulario de contacto básico utilizando HTML, CSS y PHP.
Estamos creando un formulario HTML simple que tiene tres campos: nombre, dirección de correo electrónico y un mensaje. La parte de diseño se implementa mediante CSS. Cualquier funcionalidad se agrega al formulario usando PHP. Podemos agregar nuestros propios detalles, como una dirección, número de teléfono, dirección de correo electrónico, etc., según las necesidades de la aplicación. Podemos crear el formulario en múltiples secciones y divs HTML para que sea más fácil agregar los estilos más adelante.
Ejemplo: en el siguiente ejemplo, se utilizan varios iconos de Font Awesome . Hemos creado una sección diferente con un encabezado. Además del formulario modificado, hemos agregado los íconos y otra información de contacto.
Código HTML:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="style.css" /> </head> <body> <section id="last"> <!-- heading --> <div class="full"> <h3>Drop a Message</h3> <div class="lt"> <!-- form starting --> <form class="form-horizontal" method="post" action="contact.php"> <div class="form-group"> <div class="col-sm-12"> <!-- name --> <input type="text" class="form-control" id="name" placeholder="NAME" name="name" value="" /> </div> </div> <div class="form-group"> <div class="col-sm-12"> <!-- email --> <input type="email" class="form-control" id="email" placeholder="EMAIL" name="email" value="" /> </div> </div> <!-- message --> <textarea class="form-control" rows="10" placeholder="MESSAGE" name="message"> </textarea> <button class="btn btn-primary send-button" id="submit" type="submit" value="SEND"> <i class="fa fa-paper-plane"></i> <span class="send-text">SEND</span> </button> </form> <!-- end of form --> </div> <!-- Contact information --> <div class="rt"> <ul class="contact-list"> <li class="list-item"> <i class="fa fa-map-marker fa-1x"> <span class="contact-text place"> your address </span> </i> </li> <li class="list-item"> <i class="fa fa-envelope fa-1x"> <span class="contact-text gmail"> <a href="mailto:yourmail@gmail.com" title="Send me an email"> email@gmail.com</a> </span> </i> </li> <li class="list-item"> <i class="fa fa-phone fa-1x"> <span class="contact-text phone"> (033) 12345678 </span> </i> </li> </ul> </div> </div> </section> </body> </html>
Producción:
Código CSS: después de crear el archivo HTML, debemos agregar CSS para mejorar su apariencia. Una vez que agregamos los estilos al código, tenemos que ocuparnos de otra cosa. Nuestro sitio web debe poder adaptarse a diferentes tamaños y resoluciones de pantalla. Entonces tenemos que agregar consultas de medios. El siguiente código CSS es el contenido del archivo «style.css» utilizado en el código HTML anterior.
estilo.css
CSS
#last{
width: 100%;
height: auto;
justify-content: center;
background-color: #ffb3b3;
}
.full{
width: 80%;
display: inline-block;
margin:2%;
margin-left: 10%;
text-align: center;
background-color: black;
color: white;
border:15px solid orange;
border-radius: 5px;
margin-bottom: 8%;
margin-top: 8%;
}
.full h3{
font-size: 2rem;
display:block;
margin: 2%;
margin-bottom: 0;
}
.lt{
padding: 2%;
margin: 2%;
}
.rt{
padding: 2%;
margin: 2%;
}
.lt textarea{
width: 94%;
margin-left: 2.8%;
}
button{
margin: 2%;
}
.btn-primary{
background-color: black;
border: 2px solid white;
border-radius: 5%;
}
.list-item{
margin-bottom: 2%;
list-style-type: none;
}
.list-item span{
margin-left: 10px;
font-size: 1.4rem;
}
.list-item a{
color: white;
display: inline-block;
}
.list-item a:hover{
text-decoration: underline;
}
.form-control{
background-color: black;
}
@media screen and (min-width: 770px){
.full{
width: 70%;
margin-left: 15%;
}
.lt textarea{
width: 95%;
margin-left: 2.4%;
}
}
@media screen and (min-width: 1100px){
.full{
width: 65%;
margin-left: 17%;
margin-top: 5%;
}
.lt{
width: 55%;
display: inline-block;
float: left;
margin-right: 0;
}
.rt{
width: 35%;
display: inline-block;
margin-left: 0;
}
.list-item{
margin-bottom: 10%;
}
.contact-list{
margin-top: 22%;
padding-right: 8%;
}
.fa-envelope, .gmail{
display: inline-block;
width: auto;
}
}
Código PHP: para agregar funcionalidad al formulario, estamos usando phpmailer. Se crea un archivo php «contact.php» separado y el nombre del archivo se agrega en el archivo HTML en el campo de acción del formulario.
<form class="form-horizontal" method="post" action="contact.php">
En el siguiente código, obtenemos el nombre, el correo electrónico y el mensaje del formulario de contacto. Cuando se hace clic en el botón «ENVIAR», se envía un correo electrónico desde el sitio web a la dirección de correo electrónico especificada en el código PHP, con el asunto «Esta es la línea de asunto».
PHP
<?php
// Get data from form
$name = $_POST['name'];
$email= $_POST['email'];
$message= $_POST['message'];
$to = "yourEmail@gmail.com";
$subject = "This is the subject line";
// The following text will be sent
// Name = user entered name
// Email = user entered email
// Message = user entered message
$txt ="Name = ". $name . "\r\n Email = "
. $email . "\r\n Message =" . $message;
$headers = "From: noreply@demosite.com" . "\r\n" .
"CC: somebodyelse@example.com";
if($email != NULL) {
mail($to, $subject, $txt, $headers);
}
// Redirect to
header("Location:last.html");
?>
En el ejemplo anterior, la ubicación de redirección se proporciona como «last.html». Podemos redirigir a cualquier nombre de archivo. El código anterior no se puede probar en el navegador web o en el servidor en vivo. Para probar el funcionamiento de los correos electrónicos, se necesita un servidor host de pago.
Producción:
ejemplo de formulario de contacto
Publicación traducida automáticamente
Artículo escrito por banerjeesneha090 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA