<body>
  <section id="camp-activities-inquiry">
        <h1>Camp Activities Inquiry</h1>
        <form action="/submit-form" method="POST">
            <label for="activity-select">Which camp activities are you most looking forward to?</label>
            <select id="activity-select" name="activity">
                <option value="">--Please choose an option--</option>
                <option value="hiking">Hiking</option>
                <option value="canoeing">Canoeing</option>
                <option value="fishing">Fishing</option>
                <option value="crafts">Crafts</option>
                <option value="archery">Archery</option>
            </select>
    
            <label for="food-allergies">Food Allergies (if any)</label>
            <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>
    
            <label for="additional-info">Additional things the counselor should know</label>
            <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>
    
            <button type="submit">Submit</button>
        </form>
    </section>
</body>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   height: 100vh;
   
}
body{
    font-family: Arial, Helvetica, sans-serif;
}
h1{
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    padding-top: 50px;
    color: white;

}
#camp-activities-inquiry{
     background-image: linear-gradient(to right, #0ad2df , #fb00ff);
     height: 100vh;
     display: flex;
  background-size: cover;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
form{
    display: inline-flex;
    flex-direction: column;
    background-color: white;
    color: rgb(73, 72, 69);
    width: 50%;
    height: 85%;
    padding: 40px;
    margin: auto;
    box-shadow: 0 4px 4px rgba(0,0,0,0.5);
    border-radius: 10px;
}
label{
    padding: 25px 0 10px 0;
}
#activity-select{
    padding: 10px;
    border-radius: 5px;
}
textarea{
    padding: 10px;
    border-radius: 10px;
    resize: none;
}
button{
    padding: 10px;
    border-radius: 10px;
    background-image: linear-gradient(to right, #fb00ff,#0ad2df );
    color: white;
    border: none;
    cursor: pointer;
    margin: 30px 0 0 0;
    width: 100%;
    font-size: 24px;
}
button:hover{
    background-image: linear-gradient(to right, #0ad2df, #fb00ff);
}
 const form = document.querySelector('form');

form.addEventListener('submit', submit);

function submit(e){
    e.preventDefault();
    let foodAllergies = document.getElementById('food-allergies').value;
    let additionalInfo = document.getElementById('additional-info').value;
    let activitySelect = document.getElementById('activity-select').value;

    if(foodAllergies === '' || additionalInfo === '' || activitySelect === ''){
        alert('Please fill out all fields');
    }
    else{
        alert(`Thank you for filling out the form. Your Food Allergies is ${foodAllergies}.`);
    }
    foodAllergies.value = '';
    additionalInfo = ' ';

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.