To se mi líbí 0
Fork 0

Naposledy aktivní 1767614236

WhatsApp-form.html Raw
1<div class="whatsapp-widget">
2 <div class="whatsapp-toggle" onclick="toggleWhatsAppForm()">
3 <svg width="28" height="28" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
4 <path d="M20.4054 3.5875C18.1607 1.3425 15.1714 0.0675 11.9946 0.0675C5.4375 0.0675 0.0964285 5.40857 0.0964285 12C0.0964285 14.1107 0.6375 16.1625 1.65 17.9732L0 24L6.15535 22.3821C7.90714 23.3036 9.9375 23.7857 11.9946 23.7857C18.5518 23.7857 23.8929 18.4446 23.8929 11.8532C23.8929 8.67643 22.65 5.8325 20.4054 3.5875ZM11.9946 21.7875C10.2 21.7875 8.45357 21.3214 6.9375 20.4643L6.58928 20.2607L2.85 21.1821L3.78214 17.5446L3.55714 17.1804C2.6089 15.6107 2.08928 13.8321 2.08928 12C2.08928 6.50893 6.50357 2.09464 12 2.09464C14.6786 2.09464 17.1696 3.15 19.0286 5.00893C20.8875 6.86786 21.9429 9.35893 21.9429 12C21.9 17.4911 17.4857 21.7875 11.9946 21.7875ZM17.4321 14.5125C17.1429 14.3732 15.6696 13.6446 15.4018 13.5589C15.1339 13.4732 14.9357 13.425 14.7375 13.7196C14.5393 14.0143 13.9607 14.6786 13.7839 14.8768C13.6071 15.075 13.4304 15.0964 13.1411 14.9571C12.8518 14.8179 11.8714 14.4964 10.7089 13.4732C9.8089 12.6804 9.2089 11.7 9.03214 11.4054C8.85535 11.1107 9.01071 10.95 9.15535 10.8C9.28928 10.6714 9.44464 10.4625 9.59465 10.2857C9.74464 10.1089 9.79285 9.975 9.87857 9.77679C9.9643 9.57857 9.91608 9.40179 9.85715 9.2625C9.79285 9.12322 9.19285 7.65 8.94642 7.05C8.69464 6.45 8.45357 6.54643 8.27678 6.525C8.1 6.5035 7.90178 6.5035 7.7035 6.5035C7.50535 6.5035 7.19464 6.57322 6.92678 6.86786C6.65892 7.1625 5.88214 7.8911 5.88214 9.36429C5.88214 10.8375 6.95892 12.2679 7.1089 12.4661C7.25892 12.6643 9.2089 15.6643 12.1714 16.9553C12.9 17.2714 13.4732 17.4696 13.9179 17.6143C14.6571 17.8661 15.3321 17.8339 15.8679 17.7696C16.4571 17.6946 17.6518 17.0518 17.8982 16.3607C18.1446 15.6696 18.1446 15.075 18.0857 14.9786C18.0268 14.8821 17.8286 14.8179 17.4321 14.5125Z"/>
5 </svg>
6 <span class="close-icon">×</span>
7 </div>
8
9 <div class="whatsapp-form" id="whatsappForm">
10 <div class="form-header">
11 <h3>Contactează-ne pe WhatsApp</h3>
12 <p>Completează numele și vom începe conversația</p>
13 </div>
14
15 <form id="whatsappContactForm" onsubmit="sendWhatsAppMessage(event)">
16 <div class="form-group">
17 <label for="userName">Numele tău:</label>
18 <input type="text" id="userName" name="name" placeholder="Introdu numele tău" required>
19 </div>
20
21 <button type="submit" class="whatsapp-submit-btn">
22 <svg width="20" height="20" viewBox="0 0 24 24" fill="white" style="margin-right: 8px;">
23 <path d="M20.4054 3.5875C18.1607 1.3425 15.1714 0.0675 11.9946 0.0675C5.4375 0.0675 0.0964285 5.40857 0.0964285 12C0.0964285 14.1107 0.6375 16.1625 1.65 17.9732L0 24L6.15535 22.3821C7.90714 23.3036 9.9375 23.7857 11.9946 23.7857C18.5518 23.7857 23.8929 18.4446 23.8929 11.8532C23.8929 8.67643 22.65 5.8325 20.4054 3.5875ZM11.9946 21.7875C10.2 21.7875 8.45357 21.3214 6.9375 20.4643L6.58928 20.2607L2.85 21.1821L3.78214 17.5446L3.55714 17.1804C2.6089 15.6107 2.08928 13.8321 2.08928 12C2.08928 6.50893 6.50357 2.09464 12 2.09464C14.6786 2.09464 17.1696 3.15 19.0286 5.00893C20.8875 6.86786 21.9429 9.35893 21.9429 12C21.9 17.4911 17.4857 21.7875 11.9946 21.7875ZM17.4321 14.5125C17.1429 14.3732 15.6696 13.6446 15.4018 13.5589C15.1339 13.4732 14.9357 13.425 14.7375 13.7196C14.5393 14.0143 13.9607 14.6786 13.7839 14.8768C13.6071 15.075 13.4304 15.0964 13.1411 14.9571C12.8518 14.8179 11.8714 14.4964 10.7089 13.4732C9.8089 12.6804 9.2089 11.7 9.03214 11.4054C8.85535 11.1107 9.01071 10.95 9.15535 10.8C9.28928 10.6714 9.44464 10.4625 9.59465 10.2857C9.74464 10.1089 9.79285 9.975 9.87857 9.77679C9.9643 9.57857 9.91608 9.40179 9.85715 9.2625C9.79285 9.12322 9.19285 7.65 8.94642 7.05C8.69464 6.45 8.45357 6.54643 8.27678 6.525C8.1 6.5035 7.90178 6.5035 7.7035 6.5035C7.50535 6.5035 7.19464 6.57322 6.92678 6.86786C6.65892 7.1625 5.88214 7.8911 5.88214 9.36429C5.88214 10.8375 6.95892 12.2679 7.1089 12.4661C7.25892 12.6643 9.2089 15.6643 12.1714 16.9553C12.9 17.2714 13.4732 17.4696 13.9179 17.6143C14.6571 17.8661 15.3321 17.8339 15.8679 17.7696C16.4571 17.6946 17.6518 17.0518 17.8982 16.3607C18.1446 15.6696 18.1446 15.075 18.0857 14.9786C18.0268 14.8821 17.8286 14.8179 17.4321 14.5125Z"/>
24 </svg>
25 Trimite pe WhatsApp
26 </button>
27 </form>
28
29 <div class="form-footer">
30 <small>Vei fi redirecționat către WhatsApp pentru a continua conversația</small>
31 </div>
32 </div>
33</div>
34
35<style>
36.whatsapp-widget {
37 position: relative;
38 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
39}
40
41.whatsapp-toggle {
42 position: fixed;
43 bottom: 20px;
44 right: 20px;
45 width: 60px;
46 height: 60px;
47 background-color: #25D366;
48 border-radius: 50%;
49 display: flex;
50 justify-content: center;
51 align-items: center;
52 cursor: pointer;
53 box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
54 transition: all 0.3s ease;
55 z-index: 10000;
56}
57
58.whatsapp-toggle:hover {
59 background-color: #128C7E;
60 transform: scale(1.1);
61}
62
63.close-icon {
64 display: none;
65 font-size: 28px;
66 color: white;
67 font-weight: bold;
68 position: absolute;
69}
70
71.whatsapp-form {
72 position: fixed;
73 bottom: 90px;
74 right: 20px;
75 width: 320px;
76 background: white;
77 border-radius: 12px;
78 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
79 padding: 20px;
80 display: none;
81 z-index: 9999;
82 animation: slideUp 0.3s ease;
83}
84
85@keyframes slideUp {
86 from {
87 opacity: 0;
88 transform: translateY(20px);
89 }
90 to {
91 opacity: 1;
92 transform: translateY(0);
93 }
94}
95
96.form-header {
97 text-align: center;
98 margin-bottom: 20px;
99}
100
101.form-header h3 {
102 margin: 0 0 8px 0;
103 color: #333;
104 font-size: 18px;
105}
106
107.form-header p {
108 margin: 0;
109 color: #666;
110 font-size: 14px;
111}
112
113.form-group {
114 margin-bottom: 20px;
115}
116
117.form-group label {
118 display: block;
119 margin-bottom: 8px;
120 color: #333;
121 font-weight: 500;
122 font-size: 14px;
123}
124
125.form-group input {
126 width: 100%;
127 padding: 12px;
128 border: 1px solid #ddd;
129 border-radius: 6px;
130 font-size: 14px;
131 box-sizing: border-box;
132 transition: border-color 0.3s ease;
133}
134
135.form-group input:focus {
136 outline: none;
137 border-color: #25D366;
138}
139
140.whatsapp-submit-btn {
141 width: 100%;
142 padding: 14px;
143 background-color: #25D366;
144 color: white;
145 border: none;
146 border-radius: 6px;
147 font-size: 16px;
148 font-weight: 600;
149 cursor: pointer;
150 display: flex;
151 justify-content: center;
152 align-items: center;
153 transition: background-color 0.3s ease;
154}
155
156.whatsapp-submit-btn:hover {
157 background-color: #128C7E;
158}
159
160.form-footer {
161 margin-top: 15px;
162 text-align: center;
163}
164
165.form-footer small {
166 color: #888;
167 font-size: 12px;
168 line-height: 1.4;
169}
170
171/* Arrow pointing to the toggle button */
172.whatsapp-form::after {
173 content: '';
174 position: absolute;
175 bottom: -8px;
176 right: 25px;
177 width: 0;
178 height: 0;
179 border-left: 8px solid transparent;
180 border-right: 8px solid transparent;
181 border-top: 8px solid white;
182}
183
184/* Mobile responsiveness */
185@media (max-width: 768px) {
186 .whatsapp-form {
187 width: 280px;
188 right: 10px;
189 bottom: 80px;
190 }
191
192 .whatsapp-toggle {
193 width: 56px;
194 height: 56px;
195 right: 10px;
196 bottom: 10px;
197 }
198}
199
200@media (max-width: 480px) {
201 .whatsapp-form {
202 width: 260px;
203 right: 5px;
204 left: 5px;
205 margin: 0 auto;
206 }
207
208 .whatsapp-form::after {
209 right: 20px;
210 }
211}
212
213/* When form is visible */
214.whatsapp-form.active {
215 display: block;
216}
217
218.whatsapp-form.active + .whatsapp-toggle .close-icon {
219 display: block;
220}
221
222.whatsapp-form.active + .whatsapp-toggle svg {
223 display: none;
224}
225</style>
226
227<script>
228function toggleWhatsAppForm() {
229 const form = document.getElementById('whatsappForm');
230 const toggle = document.querySelector('.whatsapp-toggle');
231
232 form.classList.toggle('active');
233
234 // Change toggle button background when form is open
235 if (form.classList.contains('active')) {
236 toggle.style.backgroundColor = '#128C7E';
237 } else {
238 toggle.style.backgroundColor = '#25D366';
239 }
240}
241
242function sendWhatsAppMessage(event) {
243 event.preventDefault();
244
245 const nameInput = document.getElementById('userName');
246 const name = nameInput.value.trim();
247
248 if (!name) {
249 alert('Vă rugăm să introduceți numele dumneavoastră.');
250 nameInput.focus();
251 return;
252 }
253
254 // Encode the message
255 const message = `Salut sunt ${encodeURIComponent(name)} și doresc mai multe informații.`;
256 const phoneNumber = '34643732407'; // Your WhatsApp number
257
258 // Create WhatsApp URL
259 const whatsappURL = `https://wa.me/${phoneNumber}?text=${message}`;
260
261 // Open WhatsApp in new tab
262 window.open(whatsappURL, '_blank');
263
264 // Reset form and close it
265 document.getElementById('whatsappContactForm').reset();
266 toggleWhatsAppForm();
267
268 // Optional: Show confirmation message
269 setTimeout(() => {
270 alert('Vei fi redirecționat către WhatsApp. Dacă nu se deschide automat, te rugăm să deschizi aplicația WhatsApp manual.');
271 }, 300);
272}
273
274// Close form when clicking outside
275document.addEventListener('click', function(event) {
276 const form = document.getElementById('whatsappForm');
277 const toggle = document.querySelector('.whatsapp-toggle');
278
279 if (form.classList.contains('active') &&
280 !form.contains(event.target) &&
281 !toggle.contains(event.target)) {
282 toggleWhatsAppForm();
283 }
284});
285
286// Optional: Add keyboard support (ESC to close)
287document.addEventListener('keydown', function(event) {
288 if (event.key === 'Escape') {
289 const form = document.getElementById('whatsappForm');
290 if (form.classList.contains('active')) {
291 toggleWhatsAppForm();
292 }
293 }
294});
295</script>

Vytvořeno pomocí Opengist ⋅ Load: 42ms⋅

Čeština