bootstrap-snippets/responsive-bootstrap-5-contact-form-with-image-preview-and-map.html at main · docsallover/bootstrap-snippets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Bootstrap 5 Contact Form with Image Preview and Map</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Google Fonts (Inter) -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5; /* Light grey background */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        .card-custom {
            border-radius: 20px; /* Rounded corners for the entire card */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Soft shadow */
            overflow: hidden; /* Ensure map corner is rounded by clipping content */
            max-width: 1200px;
            width: 100%;
        }
        .map-section {
            background-color: #6ee7b7; /* Light green background for map fallback */
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            overflow: hidden; /* Crucial for clipping the iframe's corners */
            position: relative;
            min-height: 350px; /* Ensure map section has some height on larger screens */
            height: 100%; /* Make map section take full height of parent card-body row */
        }
        /* Style for the iframe inside the map section */
        .map-section iframe {
            width: 100%;
            height: 100%;
            border: 0; /* Remove default iframe border */
            /* Do not apply border-radius directly to iframe if parent has overflow:hidden and desired radius */
            /* The parent's overflow:hidden and border-radius will effectively round the iframe */
        }
        .form-section {
            padding: 40px;
        }
        .form-control {
            border-radius: 8px; /* Slightly rounded input fields */
            border-color: #e2e8f0;
            padding: 12px 15px;
        }
        .form-control:focus {
            box-shadow: none;
            border-color: #6366f1; /* Indigo focus color */
        }
        .btn-primary-custom {
            background-color: #6366f1; /* Indigo button */
            border-color: #6366f1;
            border-radius: 8px;
            padding: 12px 25px;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }
        .btn-primary-custom:hover {
            background-color: #4f46e5; /* Darker indigo on hover */
            border-color: #4f46e5;
        }
        .upload-box {
            border: 2px dashed #cbd5e1; /* Light grey dashed border */
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            color: #64748b; /* Grey text */
            cursor: pointer;
            transition: border-color 0.3s ease;
            position: relative;
            min-height: 120px; /* Give it a minimum height */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .upload-box:hover {
            border-color: #94a3b8; /* Darker grey on hover */
        }
        .upload-box img.preview-image {
            max-width: 100%;
            max-height: 100px; /* Limit height of preview image */
            border-radius: 8px;
            object-fit: contain;
            display: none; /* Hidden by default */
        }
        .upload-text {
            display: block; /* Shown by default */
        }
        .contact-info-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .contact-info-item i {
            color: #6366f1;
            font-size: 20px;
            margin-right: 15px;
            width: 25px; /* Fixed width for icon */
            text-align: center;
        }
        .contact-info-item p {
            margin-bottom: 0;
            font-size: 16px;
            color: #475569;
        }

        /* Adjustments for smaller screens */
        @media (max-width: 767.98px) {
            .map-section {
                border-top-left-radius: 20px; /* Apply radius to top-left on small screens */
                border-bottom-left-radius: 20px; /* Apply radius to bottom-left on small screens */
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
                height: 300px; /* Adjust height for mobile */
                min-height: unset; /* Remove min-height override for small screens */
            }
            .form-section {
                padding: 25px;
            }
            .contact-info-group {
                text-align: center;
                margin-top: 30px;
            }
            .contact-info-item {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="card card-custom">
        <div class="row g-0">
            <div class="col-md-7 order-md-1 order-2">
                <div class="form-section">
                    <h2 class="mb-3 fw-bold text-dark">Get in touch</h2>
                    <p class="mb-4 text-secondary">
                        Need assistance or have a question? <br> Reach out to us directly through the form below.
                    </p>

                    <form>
                        <div class="mb-3">
                            <label for="contactName" class="form-label visually-hidden">Contact name</label>
                            <input type="text" class="form-control" id="contactName" placeholder="Contact name">
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6 mb-3 mb-md-0">
                                <label for="street" class="form-label visually-hidden">Street</label>
                                <input type="text" class="form-control" id="street" placeholder="Street">
                            </div>
                            <div class="col-md-6">
                                <label for="city" class="form-label visually-hidden">City</label>
                                <input type="text" class="form-control" id="city" placeholder="City">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6 mb-3 mb-md-0">
                                <label for="postcode" class="form-label visually-hidden">Postcode</label>
                                <input type="text" class="form-control" id="postcode" placeholder="Postcode">
                            </div>
                            <div class="col-md-6">
                                <label for="contactPhone" class="form-label visually-hidden">Contact Phone</label>
                                <input type="tel" class="form-control" id="contactPhone" placeholder="Contact Phone">
                            </div>
                        </div>
                        <div class="mb-4">
                            <label for="email" class="form-label visually-hidden">E-mail</label>
                            <input type="email" class="form-control" id="email" placeholder="E-mail">
                        </div>

                        <div class="mb-4">
                            <label for="ideaDescription" class="form-label text-secondary">Let's talk about your idea</label>
                            <textarea class="form-control" id="ideaDescription" rows="3" placeholder=""></textarea>
                        </div>

                        <div class="mb-4">
                            <div class="upload-box" id="uploadBox">
                                <input type="file" id="fileUpload" class="d-none" accept="image/*">
                                <label for="fileUpload" class="w-100 h-100 d-flex flex-column justify-content-center align-items-center cursor-pointer">
                                    <img id="imagePreview" class="preview-image mb-2" src="" alt="Image Preview">
                                    <div class="upload-text">
                                        <i class="fas fa-cloud-arrow-up mb-2"></i>
                                        <span class="d-block">Upload Additional File</span>
                                        <small class="d-block mt-1">Accept files. File size of your documents should not exceed 10MB.</small>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="form-check mb-4">
                            <input class="form-check-input" type="checkbox" value="" id="protectData">
                            <label class="form-check-label text-secondary" for="protectData">
                                I agree to the terms and conditions
                            </label>
                        </div>

                        <div class="d-grid mb-5">
                            <button type="submit" class="btn btn-primary-custom text-white">SUBMIT</button>
                        </div>
                    </form>

                    <div class="row contact-info-group">
                        <div class="col-md-4 mb-3 mb-md-0">
                            <div class="contact-info-item">
                                <i class="fas fa-phone-alt"></i>
                                <p>Phone</p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3 mb-md-0">
                            <div class="contact-info-item">
                                <i class="fas fa-envelope"></i>
                                <p>E-MAIL</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="contact-info-item">
                                <i class="fas fa-headset"></i>
                                <p>HELPDESK</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5 order-md-2 order-1">
                <div class="map-section">
                    <iframe frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=ney+york&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe>

                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS Bundle (Popper included) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileUpload = document.getElementById('fileUpload');
            const imagePreview = document.getElementById('imagePreview');
            const uploadText = document.querySelector('#uploadBox .upload-text');

            fileUpload.addEventListener('change', function(event) {
                const file = event.target.files[0]; // Get the first file

                if (file) {
                    // Check if the file is an image
                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();

                        reader.onload = function(e) {
                            // Set the image source
                            imagePreview.src = e.target.result;
                            // Display the image and hide the text
                            imagePreview.style.display = 'block';
                            uploadText.style.display = 'none';
                        };

                        // Read the file as a Data URL
                        reader.readAsDataURL(file);
                    } else {
                        // Not an image file, reset the preview and show text
                        imagePreview.src = '';
                        imagePreview.style.display = 'none';
                        uploadText.style.display = 'block';
                        // Optionally, you could add a message to the user that only images are supported
                    }
                } else {
                    // No file selected, hide the image and show the text
                    imagePreview.src = '';
                    imagePreview.style.display = 'none';
                    uploadText.style.display = 'block';
                }
            });
        });
    </script>
</body>
</html>