Scribd
Upload
23 views3 pages

Form 1

The document contains the code for a styled contact form. It includes CSS for styling elements like the container, header, buttons and text. It also includes JavaScript code to adjust the container styling based on screen width. The form itself asks for name, email, phone, age and contains multiple textarea questions.

Uploaded by

Daniel Laiton
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
23 views3 pages

Form 1

The document contains the code for a styled contact form. It includes CSS for styling elements like the container, header, buttons and text. It also includes JavaScript code to adjust the container styling based on screen width. The form itself asks for name, email, phone, age and contains multiple textarea questions.

Uploaded by

Daniel Laiton
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #094293; /* Color beige */
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

.header img {
max-width: 50%;
height: auto;
margin-left: 25%;

.container {
width: 60%;
max-width: 40%; /* Agrandado el contenedor */
margin-top: 2%; /* Margen superior por defecto */
padding: 20px 5%; /* Padding 20px arriba/abajo, 15% izquierda/derecha */
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow-y: scroll; /* Barra para subir y bajar el formulario */
max-height: 80vh; /* Altura máxima para la barra de desplazamiento */
background-color: #fff; /* Color blanco */
}

.form-title {
text-align: center;
font-size: 24px;
color: #ea5a25; /* Color naranja */
}

.form-group {
margin-bottom: 3%;
}

label {
display: block;
font-weight: bold;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],


select, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

textarea {
resize: vertical;
}

button {
background-color: #ea5a25; /* Color naranja */
width: 50%;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 5px; /* Aumenta el espacio entre el formulario y el botón */
}

button:hover {
background-color: #d1410c; /* Color naranja más oscuro */
}

.apology-text {
text-align: center;
text-transform: uppercase;
color: #ffffff;
font-size: 20px;
margin-left: 10%;
margin-right: 10%;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const container = document.querySelector('.container');
const screenWidth = window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth;

if (screenWidth > 800) {


container.style.marginTop = '2%';
} else {
container.style.marginTop = '5%';
}

container.style.maxWidth = '100%';
container.style.marginBottom = '5%';
container.style.padding = '20px 5%';
container.style.maxHeight = '80vh'; // Ajusta la altura máxima según necesites
});
</script>
<title>Formulario Estilizado</title>
</head>
<body>
<div class="header" >
<img src="file:///C:/Users/daniel.laiton/Desktop/TestForm/IMG/Fondo1.png"
alt="Logo de la página">
</div>
<div class="apology-text">
<p>We apologize for the inconvenients, we have detected an abnormality with one
of our products. Please fill out the form and we will get back in touch with you
shortly</p>
</div>
<div class="container">
<h1 class="form-title">Contact Form</h1>
<form action="enviar_correo.php" method="POST">
<div class="form-group">
<label for="nombre">Name:</label>
<input type="text" id="nombre" name="nombre" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="telefono">Phone:</label>
<input type="tel" id="telefono" name="telefono">
</div>
<div class="form-group">
<label for="edad">Age:</label>
<input type="number" id="edad" name="edad">
</div>
<div class="form-group">
<label for="pregunta1">Question 1:</label>
<textarea id="pregunta1" name="pregunta1" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="pregunta2">Question 2:</label>
<textarea id="pregunta2" name="pregunta2" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="pregunta3">Question 3:</label>
<textarea id="pregunta3" name="pregunta3" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="pregunta4">Question 4:</label>
<textarea id="pregunta4" name="pregunta4" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="pregunta5">Question 5:</label>
<textarea id="pregunta5" name="pregunta5" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="pregunta6">Question 6:</label>
<textarea id="pregunta6" name="pregunta6" rows="4" required></textarea>
</div>
<button type="submit" class="Guardar">Enviar</button>
</form>
</div>

</body>
</html>

You might also like