Detailed Contact Form

<!DOCTYPE html>
<title>My Example</title>

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group select {
    appearance: none; /* For custom arrow, if desired later */
}
.form-group textarea {
    height: 140px;
    resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
}
/* Checkbox specific styling */
.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-group-checkbox label {
    margin-bottom: 0;
    font-weight: normal;
}
.form-group-checkbox input {
    width: auto;
}

/* Submit button styling */
.submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: #28a745;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
.submit-btn:hover {
    background-color: #218838;
}
</style>

<div class="detailed-form-container">
    <form action="#" method="post">
        
        <div class="form-row">
            <div class="form-group">
                <label for="first-name">First Name</label>
                <input type="text" id="first-name" name="first_name" required>
            </div>
            <div class="form-group">
                <label for="last-name">Last Name</label>
                <input type="text" id="last-name" name="last_name" required>
            </div>
        </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="phone">Phone Number (Optional)</label>
            <input type="tel" id="phone" name="phone">
        </div>
        
        <div class="form-group">
            <label for="contact-reason">Reason for Contact</label>
            <select id="contact-reason" name="contact_reason" required>
                <option value="" disabled selected>Please select an option...</option>
                <option value="sales">Sales Inquiry</option>
                <option value="support">Technical Support</option>
                <option value="billing">Billing Question</option>
                <option value="general">General Feedback</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="message">Your Message</label>
            <textarea id="message" name="message" required></textarea>
        </div>

<div class="form-group form-group-checkbox">
            <input type="checkbox" id="newsletter" name="newsletter" value="yes">
            <label for="newsletter">Sign me up for the weekly newsletter</label>
        </div>
        
        <button type="submit" class="submit-btn">Submit Inquiry</button>
    </form>
</div>