diff --git a/4-forms-validations/form.html b/4-forms-validations/form.html
new file mode 100644
index 0000000..9b242b6
--- /dev/null
+++ b/4-forms-validations/form.html
@@ -0,0 +1,44 @@
+<!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>document</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <form class="contenido-p" action="">
+        <fieldset>
+        <legend>Please enter your contact details</legend>
+        <label for="name">Your name (required):</label>
+        <input type="text" id="name" name="name" required><br>
+        <label for="mail">E-mail address (required):</label>
+        <input type="email" id="mail" name="user_mail" required><br>
+        <label for="namber">Phone number (+57): (optional):</label>
+        <input type="number" id="namber" name="user_mail" required>
+        </fieldset>
+        <fieldset>
+        <legend>Please select the courses that you are interested in (required):</legend>
+        <input type="checkbox" id="cbox1" value="checkbox" required>
+        <label for="cbox1">Web Developer</label><br>
+        <input type="checkbox" id="cbox2" value="checkbox" required>
+        <label for="cbox2">React Developer</label><br>
+        <input type="checkbox" id="cbox3" value="checkbox" required>
+        <label for="cbox3">Fullstack Developer</label><br>
+        <input type="checkbox" id="cbox4" value="checkbox" required>
+        <label for="cbox4">Other</label><br>
+
+    </fieldset>
+        <legend>Please enter a massage (optional):</legend>
+        <label for="text"></label>
+        <textarea name="text" id="text" cols="100" rows="10"></textarea><br>
+        <button class="btn" type="submit">Send massage</button>
+        <button class="btn" aria-label="Close" type="reset">Reset form</button>
+    </form>
+    <footer class="footer">
+        <p>Formulario de validación</p>
+    </footer>
+
+</body> 
\ No newline at end of file
diff --git a/4-forms-validations/img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg b/4-forms-validations/img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg
new file mode 100644
index 0000000..8d93d8f
Binary files /dev/null and b/4-forms-validations/img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg differ
diff --git a/4-forms-validations/style.css b/4-forms-validations/style.css
new file mode 100644
index 0000000..d584e5e
--- /dev/null
+++ b/4-forms-validations/style.css
@@ -0,0 +1,30 @@
+.contenido-p{
+   font-family: Arial, Helvetica, sans-serif;
+   font-size: 22px;
+   background-image: url(img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg) ;
+   background-size: cover;
+   background-repeat: no-repeat;
+   width: 100%;
+   padding: 20px;
+}
+.btn:hover{
+    background-color: #133e11;
+    color: #6294a6;
+    font-family: Arial, Helvetica, sans-serif;
+
+}
+.btn{
+    width: 138px;
+    height: 30px;
+    border-radius: 5px;
+    background-color: #575a57;
+    color: white;
+    font-size: 15px;
+}
+.footer{
+    background-color: #9fa7aa;
+    height: 100px;
+    margin: 0px;
+    padding: 1px;
+    width: 100%;;
+}
\ No newline at end of file
