​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<style>
5
.detailed-form-container {
6
    max-width: 600px;
7
    margin: 30px auto;
8
    padding: 20px;
9
    background-color: #ffffff;
10
    border: 1px solid #e0e0e0;
11
    border-radius: 8px;
12
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
13
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
14
}
15
.form-group, .form-row {
16
    margin-bottom: 20px;
17
}
18
.form-row {
19
    display: flex;
20
    gap: 20px;
21
}
22
.form-row .form-group {
23
    flex: 1;
24
    margin-bottom: 0;
25
}
26
/* Responsive stacking for the two-column layout */
27
@media (max-width: 600px) {
28
    .form-row {
29
        flex-direction: column;
30
        gap: 0;
31
    }
32
    .form-row .form-group {
33
        margin-bottom: 20px;
34
    }
35
}
36
​
37
.form-group label {
38
    display: block;
39
    margin-bottom: 8px;
40
    font-weight: 600;
41
    color: #444;
42
}
43
.form-group input,
44
.form-group textarea,
45
.form-group select {
46
    width: 100%;
47
    padding: 12px;
48
    border: 1px solid #ccc;
49
    border-radius: 4px;
50
    font-size: 1rem;
51
    box-sizing: border-box;
52
}
53
.form-group select {
54
    appearance: none; /* For custom arrow, if desired later */
55
}
56
.form-group textarea {
57
    height: 140px;
58
    resize: vertical;
59
}
60
.form-group input:focus,
61
.form-group textarea:focus,
62
.form-group select:focus {
63
    border-color: #007bff;
64
    outline: none;
65
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
66
}
67
/* Checkbox specific styling */
68
.form-group-checkbox {
69
    display: flex;
70
    align-items: center;
71
    gap: 10px;
72
}
73
.form-group-checkbox label {
74
    margin-bottom: 0;
75
    font-weight: normal;
76
}
77
.form-group-checkbox input {
78
    width: auto;
79
}
80
​
81
/* Submit button styling */
82
.submit-btn {
83
    display: block;
84
    width: 100%;
85
    padding: 12px;
86
    border: none;
87
    border-radius: 4px;
88
    background-color: #28a745;
89
    color: white;
90
    font-size: 1.1rem;
91
    font-weight: bold;
92
    cursor: pointer;
93
    transition: background-color 0.2s;
94
}
95
.submit-btn:hover {
96
    background-color: #218838;
97
}
98
</style>
99
​
100
<div class="detailed-form-container">
101
    <form action="#" method="post">
102
        <!-- Two-column row -->
103
        <div class="form-row">
104
            <div class="form-group">
105
                <label for="first-name">First Name</label>
106
                <input type="text" id="first-name" name="first_name" required>
107
            </div>
108
            <div class="form-group">
109
                <label for="last-name">Last Name</label>
110
                <input type="text" id="last-name" name="last_name" required>
111
            </div>
112
        </div>
113
​
114
        <div class="form-group">
115
            <label for="email">Email</label>
116
            <input type="email" id="email" name="email" required>
117
        </div>
118
        
119
        <div class="form-group">
120
            <label for="phone">Phone Number (Optional)</label>
121
            <input type="tel" id="phone" name="phone">
122
        </div>
123
        
124
        <div class="form-group">
125
            <label for="contact-reason">Reason for Contact</label>
126
            <select id="contact-reason" name="contact_reason" required>
127
                <option value="" disabled selected>Please select an option...</option>
128
                <option value="sales">Sales Inquiry</option>
129
                <option value="support">Technical Support</option>
130
                <option value="billing">Billing Question</option>
131
                <option value="general">General Feedback</option>
132
            </select>
133
        </div>
134
        
135
        <div class="form-group">
136
            <label for="message">Your Message</label>
137
            <textarea id="message" name="message" required></textarea>
138
        </div>
139
​
140
        <div class="form-group form-group-checkbox">
141
            <input type="checkbox" id="newsletter" name="newsletter" value="yes">
142
            <label for="newsletter">Sign me up for the weekly newsletter</label>
143
        </div>
144
        
145
        <button type="submit" class="submit-btn">Submit Inquiry</button>
146
    </form>
147
</div>