No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
12H
30M
18S
Curso de PHP: Integraci贸n con HTML

Curso de PHP: Integraci贸n con HTML

Carlos Eduardo G贸mez Garc铆a

Carlos Eduardo G贸mez Garc铆a

Creando el maquetado

20/24
Recursos

Aportes 28

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Este es mi maquetado hecho con HTML y CSS.

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

Este fue mi peque帽o formulario

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

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.

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

As铆 qued贸 mi formulario

As铆 quedo mi formulario con mis colores favoritos, obviamente con un texto lorem porque no tenia muchas ganas de escribir jajaja
![](

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 maquetadio en css y html

El mio quedo asi. Utilizando TailwindCSS

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 鈥淪tar鈥

<?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.