Este es mi maquetado hecho con HTML y CSS.
Introducción
¿Cómo se renderiza una página web en mi computadora?
Levantando un servidor local
¿Cómo combinar HTML con PHP?
PHP como preprocesador de HTML
Imprime texto y etiquetas HTML
Condicionales
Ciclos
¿Cómo pasar variables de PHP a JavaScript?
Evita el código espagueti
Refactorizando código espagueti
Manejo de formularios
Cómo obtener una solicitud al servidor con PHP
Envío de un formulario a través de GET
Envío de un formulario a través de POST
Envío de imágenes
Guardando imágenes en el servidor
Tipos de inputs
Otros tipos de inputs
Valida si un formulario ha sido enviado
Sanitizando datos de mi formulario
Validando datos
Proyecto: formulario de contacto
Creando el maquetado
Haciendo la lógica de recepción del formulario
Integrando PHPMailer
Implementando el servidor de correos de Gmail
Conclusión
Es tu turno de poner todo en práctica
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Creando el maquetado
20/24Recursos
Aportes 32
Preguntas 0
Ordenar por:
Yo utilice TailwindCSS y para los iconos, yo puedo recomendar esta librería, la cuál es muy buena y los iconos son bastantes limpios: Line Awesome, está libreria pertenece a ICONS8, otra plataforma de iconos con una gran diversidad de ellos.
Maquetado
Este fue mi pequeño formulario
Este es el maquetado que hice usando tailwind.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de contacto</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid place-content-center min-h-screen bg-slate-900">
<div class="max-w-md mx-auto px-4 py-4">
<form action="#">
<h1 class="text-xl text-center text-white">Contactanos</h1>
<input class="w-full px-4 py-2 my-3 border-b-2 border-gray-500 outline-none focus:border-gray-400"
placeholder="Nombre" type="text" name="name" id="name">
<input class="w-full px-4 py-2 my-3 border-b-2 border-gray-400 outline-none focus:border-gray-400"
placeholder="Correo" type="email" name="email" id="email">
<input class="w-full px-4 py-2 my-3 border-b-2 border-gray-400 outline-none focus:border-gray-400"
placeholder="Asunto" type="text" name="subject" id="subject">
<textarea class="w-full h-32 px-4 py-3 my-3 border-b-2 border-gray-400 rounded-sm outline-none focus:border-gray-400" name="message" placeholder="Mensaje"></textarea>
<div class="w-full flex justify-center">
<button class="rounded bg-cyan-500 px-4 py-2 font-semibold w-40" type="submit">Enviar</button>
</div>
</form>
</div>
</div>
</body>
</html>
Así quedó mi formulario
Este es mi aporte en HTML y CSS.
HTML
<!-- //index -->
<!DOCTYPE html>
<html lang="en">
<head>
<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
?>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> -->
<link rel="stylesheet" href="style.css">
<title>Php con HTML</title>
</head>
<body>
<div class="container">
<div class="tittle"> <strong> Registro de cliente </strong></div>
<form action="#">
<div class="user-details">
<div class="input-box">
<span class="details"> Nombre</span>
<input type="text" placeholder="Ingresa tu nombre" required>
</div>
<div class="input-box">
<span class="details"> Telefono</span>
<input type="number" placeholder="Ingresa tu Telefono" required>
</div>
<div class="input-box">
<span class="details"> Correo electronico</span>
<input type="text" placeholder="Ingresa tu telefono" required>
</div>
<div class="gender-details">
<input type="radio" name="gender" id="dot-1">
<input type="radio" name="gender" id="dot-2">
<input type="radio" name="gender" id="dot-3">
<span class="gender-title">Arreglo</span>
<div class="category">
<label for="dot-1">
<span class="dot one"></span>
<span class="gender">Pantalon</span>
</label>
<label for="dot-2">
<span class="dot two"></span>
<span class="gender">Chaqueta</span>
</label>
<label for="dot-3">
<span class="dot three"></span>
<span class="gender">Otro</span>
</label>
</div>
</div>
<div class="input-box">
<span class="details"> Arreglo</span>
<input class="arreglo" type="text" placeholder="Descripcion de la modificacion de la prenda" required>
</div>
<div class="input-box">
<span class="details">Fecha</span>
<input type="date" placeholder="Ingresa tu nombre" required>
</div>
</div>
<div class="button">
<input type="submit" value="Register">
</div>
</form>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing:boder-box;
font-family: 'Popins',sans-serif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: linear-gradient(355deg, #ff89a4 0, #ff8f90 5.56%, #ff967c 11.11%, #ff9e6a 16.67%, #ffa758 22.22%, #ffb047 27.78%, #ffb937 33.33%, #ffc228 38.89%, #ffca1a 44.44%, #f8d110 50%, #e5d812 55.56%, #d0de1f 61.11%, #bae32e 66.67%, #a2e840 72.22%, #88ec52 77.78%, #68ef65 83.33%, #37f278 88.89%, #00f48d 94.44%, #00f6a2 100%);
}
.container{
max-width: 700px;
width: 100%;
background: #ffff;
padding: 25px 30px;
border-radius: 5px;
}
.container .title {
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
background: linear-gradient(355deg, #ff89a4 0, #ff8f90 5.56%, #ff967c 11.11%, #ff9e6a 16.67%, #ffa758 22.22%, #ffb047 27.78%, #ffb937 33.33%, #ffc228 38.89%, #ffca1a 44.44%, #f8d110 50%, #e5d812 55.56%, #d0de1f 61.11%, #bae32e 66.67%, #a2e840 72.22%, #88ec52 77.78%, #68ef65 83.33%, #37f278 88.89%, #00f48d 94.44%, #00f6a2 100%);
}
.container form .user-details{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box{
margin-bottom: 15px;
width:calc(100% / 2 - 20px);
}
.user-details .input-box .details{
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input{
height: 45px;
width: 100%;
outline: none;
border-radius: 5px;
border: 1px solid #ccc;
padding-left: 15px;
font-size: 16px;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:focus{
border-color: black;
}
form .gender-details .gender-title{
font-size: 15px;
font-weight: 500;
}
form .gender-details .category{
display: flex;
width: 80%;
margin: 14px 0;
justify-content: space-between;
}
.gender-details .category label{
display: flex;
align-items: center;
}
.gender-details .category .dot{
height: 18px;
width: 18px;
background: #d9d9d9;
border-radius: 50%;
margin-right: 10px;
margin-left: 10px;
border:5px solid transparent ;
transition: all 0.3s ease;
}
#dot-1:checked ~ .category label .one,
#dot-2:checked ~ .category label .two,
#dot-3:checked ~ .category label .three{
border-color: #37f278;
background: #68ef65;
}
form input [type="radio"]{
display: none;
}
form .button{
height: 45px;
margin: 45px 0;
}
form .button input{
height: 100%;
width: 100%;
outline: none;
color: #fff;
font-size: 18px;
font-weight: 500;
border-radius: 5px;
letter-spacing: 1px;
background: linear-gradient(355deg, #ff89a4 0, #ff8f90 5.56%, #ff967c 11.11%, #ff9e6a 16.67%, #ffa758 22.22%, #ffb047 27.78%, #ffb937 33.33%, #ffc228 38.89%, #ffca1a 44.44%, #f8d110 50%, #e5d812 55.56%, #d0de1f 61.11%, #bae32e 66.67%, #a2e840 72.22%, #88ec52 77.78%, #68ef65 83.33%, #37f278 88.89%, #00f48d 94.44%, #00f6a2 100%);
}
form .button input:hover{
background: #F24C4C;
}
@media (max-width: 584px){
.container{
max-width: 100%;
}
form .user-details .input-box{
margin-bottom: 15px;
width:100%;
}
form .gender-details .category{
width: 100%;}
.container form .user-details{
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar{
width: 0;
}
}
Ya quedo mi formulario 😍
Se los comparto por si a alguno le sirve como guía
.
Resultado
.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./assets/img/contacto.png" type="image/x-icon">
<link rel="stylesheet" href="./css/styles.css">
<title>iJCode - Formulario de Contacto</title>
</head>
<body>
<!-- Creación de la estructura del Formulario -->
<div class="form-container">
<div class="container">
<form action="#" class="form">
<div class="form-header">
<h2 class="form-title">¡Contactanos ✨!</h2>
</div>
<div class="form-body">
<label class="form-label" for="name">Nombre: </label>
<input class="form-input" type="text" required name="name" id="name" placeholder="Julieta Ortiz Sanchez">
<label class="form-label" for="email">Correo: </label>
<input class="form-input" type="text" required name="email" id="email" placeholder="[email protected]">
<label class="form-label" for="subject">Asunto: </label>
<input class="form-input" type="text" required name="subject" id="subject" placeholder="Solicitud de documentación final">
<label class="form-label" for="message">Mensaje: </label>
<textarea class="form-area" name="message" id="message" placeholder="Me urge obtener la documentación del proyecto de la papelería debido a que ya estoy en fecha límite para entregarlos al área correspondiente"></textarea>
<button class="form-cta">Enviar</button>
</div>
</form>
<div class="form-footer">
<p class="form-paragraph"><i class="fa-solid fa-location-dot"></i> 13 Saw Mill Circle, North Olmested.</p>
<p class="form-paragraph"><i class="fa-solid fa-phone"></i> +1 123 456 7890</p>
</div>
</div>
</div>
<!-- Mensaje de error -->
<div class="message">
<div class="container">
<div class="message-error">
<p class="message-paragraph">Surgió un problema</p>
</div>
</div>
</div>
<!-- Mensaje de éxito -->
<div class="message">
<div class="container">
<div class="message-success">
<p class="message-paragraph">¡Mensaje enviado con éxito!</p>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/36b3528883.js" crossorigin="anonymous"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
:root{
--mainColor: #1B2430;
--white: #F9F2ED;
--mainFont: 'Lato', sans-serif;
--cardBackground: #816797;
--cta: #371B58;
--red: #F87474;
--green: #9EB23B;
}
body{
margin: 0;
block-size: 100%;
min-block-size: 100vh;
font-family: var(--mainFont);
background-color: var(--mainColor);
padding: 2rem 0;
}
.form-container{
color: #F9F2ED;
border-block-start: .1px solid transparent;
}
.form{
box-shadow: rgba(255, 255, 255, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}
.container{
inline-size: 90%;
max-inline-size: 43.75rem;
margin: 0 auto;
border-radius: .5rem;
box-sizing: border-box;
overflow: hidden;
}
.form{
background-color: var(--cardBackground);
padding: 2rem 1.5rem;
position: relative;
}
.form::before{
content: '';
position: absolute;
background-color: var(--white);
block-size: 1rem;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-start: 0;
}
.form-header{
margin-block-end: 2rem;
}
.form-title{
margin: 0;
text-align: center;
font-size: 2.2rem;
}
.form-body{
display: flex;
flex-direction: column;
}
.form-label{
font-weight: 700;
margin-block-end: .25rem;
}
.form-input,
.form-area{
font-family: var(--mainFont);
margin-block-end: 2rem;
padding: .625rem;
border-radius: .25rem;
border: none;
outline: none;
font-size: 1rem;
}
.form-area{
inline-size: auto;
block-size: 6rem;
resize: none;
}
.form-cta{
background-color: var(--cta);
border: none;
color: var(--white);
padding: 1rem 0;
border-radius: .25rem;
font-weight: 700;
transition: transform .2s;
border: none;
text-transform: uppercase;
}
.form-cta:active{
transform: scale(.9);
}
.form-cta:hover{
--cta: #371b58a3;
}
.form-footer{
border-block-start: 0.1px solid transparent;
background-color: var(--white);
color: var(--mainColor);
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem;
}
.form-paragraph{
margin: 0;
font-weight: 700;
}
.fa-solid{
color: var(--cardBackground);
}
.message-error,
.message-success{
padding: 2rem;
color: var(--white);
font-size: 1.2rem;
text-align: center;
margin: 1rem 0;
border-radius: .25rem;
}
.message-error{
background-color: var(--red);
}
.message-success{
background-color: var(--green);
}
.message-paragraph{
margin: 0;
}
@media screen and (min-width: 768px){
.form-title{
font-size: 3rem;
}
.form-cta{
font-size: 1rem;
}
.form-footer{
flex-direction: row;
justify-content: space-between;
}
.form-paragraph{
font-size: 1.2rem;
}
}
Este curso me ha encantado igual que los de este profe, definitivamente tiene una forma muy dinámica de enseñar y dejar claro los conceptos, les dejo mi formulario
.
.
Si son de los que no le saben mucho al frontend (como yo), pueden apoyarse en herramientas como bootstarp para crear pequeños formularios y realizar estos proyectos.
Aunque nunca esta de mas tomar el curso definitivo de html y css de platzi.
Así quedo mi formulario con mis colores favoritos, obviamente con un texto lorem porque no tenia muchas ganas de escribir jajaja
El mio quedo asi. Utilizando TailwindCSS
Les dejo mi aporte
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario con PHPmailer</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<center>
<h1>
Envia un correo electronico aquí
</h1>
</center>
<form class="form-style-4" action="" method="post">
<label for="field1">
<span>Tu nombre</span><input type="text" name="field1" required="true" />
</label>
<label for="field2">
<span>Correo electronico</span><input type="email" name="field2" required="true" />
</label>
<label for="field3">
<span>Tema de platica</span><input type="text" name="field3" required="true" />
</label>
<label for="field4">
<span>Contenido del mensaje</span><textarea name="field4" onkeyup="adjust_textarea(this)" required="true"></textarea>
</label>
<label>
<span> </span><input type="submit" value="Enviar el correo" />
</label>
</form>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
h1
{
font-family: 'Lato', sans-serif;
padding-top: 5rem;
letter-spacing: 0.1rem;
text-transform: uppercase;
color: #1C819E;
}
body
{
background-color: #FFD6FF;
}
form
{
margin: 2rem auto;
border-radius: 5%;
}
.form-style-4{
width: 450px;
font-size: 16px;
background: #845EC2;
padding: 30px 30px 15px 30px;
border: 5px solid #B39CD0;
}
.form-style-4 input[type=submit],
.form-style-4 input[type=button],
.form-style-4 input[type=text],
.form-style-4 input[type=email],
.form-style-4 textarea,
.form-style-4 label
{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #fff;
}
.form-style-4 label {
display:block;
margin-bottom: 10px;
}
.form-style-4 label > span{
display: inline-block;
float: left;
width: 150px;
}
.form-style-4 input[type=text],
.form-style-4 input[type=email]
{
background: transparent;
border: none;
border-bottom: 1px dashed #83A4C5;
width: 275px;
outline: none;
padding: 0px 0px 0px 0px;
font-style: italic;
}
.form-style-4 textarea{
font-style: italic;
padding: 0px 0px 0px 0px;
background: transparent;
outline: none;
border: none;
border-bottom: 1px dashed #83A4C5;
width: 275px;
overflow: hidden;
resize:none;
height:20px;
}
.form-style-4 textarea:focus,
.form-style-4 input[type=text]:focus,
.form-style-4 input[type=email]:focus,
.form-style-4 input[type=email] :focus
{
border-bottom: 1px dashed #D9FFA9;
}
.form-style-4 input[type=submit],
.form-style-4 input[type=button]{
background: #FBEAFF;
border: none;
padding: 8px 10px 8px 10px;
border-radius: 5px;
color: #845EC2;
}
.form-style-4 input[type=submit]:hover,
.form-style-4 input[type=button]:hover{
background: #394D61;
}
Lo único que tienen que hacer es copiar y pegar, aquí mi aporte
![]()Mi formulario.
espero les guste.
Me gusta un estilo simple, siento que destaca mas saludos.
MI maquetado :)
![]()
Es algo simple pero considerando que no se mucho de css creo que esta bien :3
![]()
Mi maquetadio en css y html
El mio lo creé con bootstrap, no tengo tanta creatividad como ustedes pero asi quedo 😁😁
Si les gusta, visiten el repositorio en github: https://github.com/jcomte23/ContactForm y dejen una “Star”
<?php
require("mail.php");
function validate($name, $email, $subject, $message, $form) {
return !empty($name) && !empty($email) && !empty($subject) && !empty($message);
}
$status = "";
if ( isset($_POST["form"]) ) {
if ( validate(...$_POST) ) {
$name = $_POST["name"];
$email = $_POST["email"];
$subject = $_POST["subject"];
$message = $_POST["message"];
$body = "$name <$email> te envia el siguiente mensaje: <br><br> $message";
// Mandar el correo
sendMail($subject, $body, $email, $name, true);
$status = "success";
}
else {
$status = "danger";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Formulario de contacto</title>
</head>
<body>
<?php if($status == "danger"): ?>
<div class="alert danger">
<span>Surgió un problema</span>
</div>
<?php endif; ?>
<?php if($status == "success"): ?>
<div class="alert success">
<span>¡Mensaje enviado con éxito!</span>
</div>
<?php endif; ?>
<form action="./" method="POST">
<h1>¡Contáctanos!</h1>
<div class="input-group">
<label for="name">Nombre:</label>
<input type="text" name="name" id="name">
</div>
<div class="input-group">
<label for="email">Correo:</label>
<input type="email" name="email" id="email">
</div>
<div class="input-group">
<label for="subject">Asunto:</label>
<input type="text" name="subject" id="subject">
</div>
<div class="input-group">
<label for="message">Mensaje:</label>
<textarea name="message" id="message"></textarea>
</div>
<div class="button-container">
<button name="form" type="submit">Enviar</button>
</div>
<div class="contact-info">
<div class="info">
<span><i class="fas fa-map-marker-alt"></i> 13 Saw Mill Circle, North Olmested.</span>
</div>
<div class="info">
<span><i class="fas fa-phone"></i> +1 123 456 7890</span>
</div>
</div>
</form>
<script src="https://kit.fontawesome.com/bbff992efd.js" crossorigin="anonymous"></script>
</body>
</html>
Este es mi maquetado, lo diseñe con Figma.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<title>Contact Us</title>
</head>
<body>
<div class="form-container">
<form action="./handleSubmit.php" method="post">
<h1>Contact Us</h1>
<label for="name">Name:</label>
<input type="text" name="name">
<label for="email">Email:</label>
<input type="email" name="email">
<label for="subject">Subject:</label>
<input type="text" name="subject">
<label for="message">Message:</label>
<input type="textarea" name="message" id="message" cols="40" rows="5">
<button type="submit">Send</button>
</form>
</div>
</body>
</html>
* {
box-sizing: border-box;
color:#D7D7D7;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
--color-dark: #4F4D5C;
--color-orange: #F0712A;
}
body {
margin: 0;
width: 100%;
background-color: var(--color-dark);
}
form {
margin: auto;
margin-top: 50px;
padding: 25px 20px;
max-width: 25%;
min-width: 250px;
display: flex;
flex-direction: column;
box-shadow: inset 5px 4px 105px 13px rgba(54, 54, 54, 0.68);
border-radius: 36px;
}
h1 {
margin: 0;
margin-bottom: 20px;
align-self: center;
font-weight: 500;
font-size: 28pt;
color: var(--color-orange);
}
label {
font-weight: 300;
margin: 0 0 2px 10px;
}
input {
padding: 0 10px;
height: 35px;
margin-bottom: 20px;
background-color: var(--color-dark);
border: none;
border-radius: 36px;
box-shadow: inset 5px 4px 20px 3px #363636;
}
#message {
height: 120px;
border-radius: 20px;
}
button {
align-self: center;
width: 70px;
height: 35px;
background-color: var(--color-orange);
border: none;
border-radius: 36px;
box-shadow: inset 5px 4px 20px 3px #363636;
font-weight: 500;
}
Este es mi maquetado con HTML - CSS - BOOTSTRAP
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulario de Contacto</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body class="bg-light">
<div class="container-md">
<div class="alert alert-success" role="alert">
<span>El Mensaje fue enviado con Éxito</span>
</div>
<div class="alert alert-danger" role="alert">
<span>Ha habido un error</span>
</div>
<div class="line"></div>
<form class="border">
<h1 class="mb-3 text-center">Contáctanos</h1>
<div class="mb-3">
<label for="name" class="form-label">Nombre</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="mb-3">
<label for="subject" class="form-label">Asunto</label>
<input type="text" class="form-control" name="subject" id="subject">
</div>
<div class="mb-3">
<label for="message" class="form-label">Mensaje</label>
<textarea name="message" class="form-control" id="message"></textarea>
</div>
<button type="submit" class="btn btn-primary enviar">Enviar</button>
</form>
<div class="grid foot">
<div class="g-col-4 text-center"><i class="fa-solid fa-location-dot"></i> Calle 12 No 39 - 11</div>
<div class="g-col-4 text-center"><i class="fa-solid fa-phone-volume"></i> 322 218 20 93</div>
<div class="g-col-4 text-center"><i class="fa-solid fa-envelope"></i> [email protected]</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/4d4ad501df.js" crossorigin="anonymous"></script>
</body>
</html>
CSS
label{
font-weight: 500;
}
.btn-primary{
background-color: #2980B9 !important;
}
.line{
max-width: 80%;
width: 550px;
height: 20px;
margin-left: auto;
margin-right: auto;
background-color: #2980B9 !important;
border-radius: 20px 20px 0px 0px;
}
form{
max-width: 80%;
width: 550px;
margin-left: auto;
margin-right: auto;
padding: 30px;
background-color: white !important;
}
button .enviar{
margin-left: auto;
margin-right: auto;
padding: 10px;
}
.foot{
max-width: 80%;
width: 550px;
margin-left: auto;
margin-right: auto;
background-color: #2980B9;
color: white;
padding: 10px;
margin-bottom: 50px;
border-radius: 0px 0px 20px 20px;
}
Acá mi diseño, responsive:
El código que usé:
HTML
CSS
Buenas noches,
Este fue el estilo que implemente para este proyecto!
Así quedo mi maquetado usando tailwindcss
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=ñ, initial-scale=1.0">
<title>Contactanos</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-purple-100">
<div class="max-w-lg mx-auto my-6 bg-white p-8 rounded-xl shadow-md">
<p class="font-semibold text-2xl text-center py-3 mb-3">Contáctanos</p>
<form action="" class="flex flex-col space-y-5">
<label for="nombre">
<p class="font-medium text-slate-600 pb-2">Nombre:</p>
<input type="text" name="nombre" id="nombre" class="w-full py-1 border border-gray-200 rounded-lg px-3">
</label>
<label for="email">
<p class="font-medium text-slate-600 pb-2">Correo:</p>
<input type="email" name="email" id="email" class="w-full py-1 border border-gray-200 rounded-lg px-3">
</label>
<label for="asunto">
<p class="font-medium text-slate-600 pb-2">Asunto:</p>
<input type="text" name="asunto" id="asunto" class="w-full py-1 border border-gray-200 rounded-lg px-3">
</label>
<label for="mensaje">
<p class="font-medium text-slate-600 pb-2">Mensaje:</p>
<textarea name="mensaje" id="mensaje" class="w-full py-1 border border-gray-200 rounded-lg px-3"></textarea>
</label>
<button type="submit" class="w-full py-2 font-medium text-lg text-white bg-purple-500 rounded-lg">
Enviar
</button>
</form>
</div>
</body>
</html>
Lo hice desde cero utilizando tecnología BEM
Formulario con HTML Y CSS
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
<title>Formulario de contacto</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main_container">
<form action="#" class="formulario" method="POST">
<h2 class="contactanos">Contáctanos</h2>
<label for="nombre" class="label-form">Nombre: </label>
<input type="text" name="nombre" class="input-form" id="nombre" placeholder="Ejm: Keneth Lopez Izaguirre">
<label for="correo" class="label-form">Correo: </label>
<input type="email" name="correo" class="input-form" id="correo" placeholder="Ejm: [email protected]">
<label for="asunto" class="label-form">Asunto: </label>
<input type="text" name="asunto" class="input-form" id="asunto" placeholder="Ejm: Solicitud">
<label for="mensaje" class="label-form">Mensaje: </label>
<textarea name="mensaje" class="input-form message" id="mensaje" placeholder="Escribe tu mensaje"></textarea>
<button type="submit" class="input-form button">Enviar</button>
</form>
</main>
</body>
</html>
style.css
/* Buenas prácticas */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--primary-family-font);
}
:root{
--primary-family-font: 'DM Sans', sans-serif;
--primary-color: #30cfd0;
--secondary-color: #330867;
}
html{
font-size: 62.5%; /* 1rem = 10px */
font-family: var(--primary-family-font);
}
/* -------------------------------------- */
body{
background-image: linear-gradient(to bottom, #30cfd0 0%, #330867 100%);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: var(--primary-color);
color: white;
}
.main_container{
margin-top: 40px;
min-width: 320px;
}
.formulario{
display: flex;
flex-direction: column;
margin-top: 300px;
width: 80%;
min-width: 256px;
margin: 0 auto;
}
.contactanos{
text-align: center;
font-size: 3rem;
}
.label-form{
font-size: 1.5rem;
margin: 5px 0;
}
.input-form{
border: solid 2px white;
box-shadow: 1px 1px 1px rgba(128, 128, 128);
border-radius: 1rem;
padding: 7px;
}
.input-form.message{
width: 100%;
height: 150px;
}
.input-form.button{
display: inline-block;
margin: 0 auto;
width: 150px;
margin-top: 10px;
font-size: 1.5rem;
color: white;
background-color: var(--primary-color);
}
.input-form.button:hover {
background-color: var(--secondary-color);
cursor: pointer;
}
/* ---------------------MEDIA QUERYS-------------------------------- */
@media (min-width: 768px){
.formulario{
width: 600px;
}
.contactanos{
font-size: 3.2rem;
}
.label-form{
font-size: 1.6rem;
}
}
Realizando mi maquetado de un formulario que hare para poner en practica los conocimientos de todos los cursos que he realizado.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?