Scribd Logo
Upload

Welcome to Scribd!

  • Form 1

    Uploaded by

    Daniel Laiton
    2 views3 pages
    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.

    Original Description:

    Original Title

    Form1

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views3 pages

    Form 1

    Uploaded by

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

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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