To se mi líbí 0
Fork 0

Naposledy aktivní 1767614887

Fixed-WhatsApp.html Raw
1<div class="whatsapp-contact-widget">
2 <div class="widget-header">
3 <div class="whatsapp-icon">
4 <svg width="28" height="28" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
5 <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"/>
6 </svg>
7 </div>
8 <div class="header-text">
9 <h3>Contactează-ne pe WhatsApp</h3>
10 <p>Completează numele și începe conversația</p>
11 </div>
12 </div>
13
14 <form id="whatsappWidgetForm" class="widget-form">
15 <div class="form-group">
16 <label for="widgetUserName">Numele tău:</label>
17 <input type="text" id="widgetUserName" placeholder="Introdu numele tău complet" required>
18 </div>
19
20 <button type="submit" class="submit-button">
21 <svg width="20" height="20" viewBox="0 0 24 24" fill="white" style="margin-right: 10px;">
22 <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"/>
23 </svg>
24 Trimite pe WhatsApp
25 </button>
26 </form>
27
28 <div class="widget-footer">
29 <p><small>Vei fi redirecționat către aplicația WhatsApp pentru a continua conversația.</small></p>
30 </div>
31</div>
32
33<style>
34.whatsapp-contact-widget {
35 width: 100%;
36 max-width: 400px;
37 background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
38 border-radius: 12px;
39 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
40 border: 1px solid #e9ecef;
41 overflow: hidden;
42 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
43 margin: 0 auto;
44 display: block;
45}
46
47.widget-header {
48 background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
49 color: white;
50 padding: 20px;
51 display: flex;
52 align-items: center;
53 gap: 15px;
54}
55
56.whatsapp-icon {
57 background: rgba(255, 255, 255, 0.2);
58 width: 56px;
59 height: 56px;
60 border-radius: 50%;
61 display: flex;
62 justify-content: center;
63 align-items: center;
64 flex-shrink: 0;
65}
66
67.header-text h3 {
68 margin: 0 0 5px 0;
69 font-size: 18px;
70 font-weight: 600;
71}
72
73.header-text p {
74 margin: 0;
75 font-size: 14px;
76 opacity: 0.9;
77}
78
79.widget-form {
80 padding: 25px;
81}
82
83.form-group {
84 margin-bottom: 20px;
85}
86
87.form-group label {
88 display: block;
89 margin-bottom: 8px;
90 color: #333;
91 font-weight: 500;
92 font-size: 14px;
93}
94
95.form-group input {
96 width: 100%;
97 padding: 14px;
98 border: 2px solid #e9ecef;
99 border-radius: 8px;
100 font-size: 15px;
101 box-sizing: border-box;
102 transition: all 0.3s ease;
103 background: #f8f9fa;
104}
105
106.form-group input:focus {
107 outline: none;
108 border-color: #25D366;
109 background: white;
110 box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
111}
112
113.form-group input::placeholder {
114 color: #adb5bd;
115}
116
117.submit-button {
118 width: 100%;
119 padding: 16px;
120 background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
121 color: white;
122 border: none;
123 border-radius: 8px;
124 font-size: 16px;
125 font-weight: 600;
126 cursor: pointer;
127 display: flex;
128 justify-content: center;
129 align-items: center;
130 transition: all 0.3s ease;
131 margin-top: 10px;
132}
133
134.submit-button:hover {
135 background: linear-gradient(135deg, #1da851 0%, #0f7a5e 100%);
136 transform: translateY(-2px);
137 box-shadow: 0 6px 12px rgba(37, 211, 102, 0.2);
138}
139
140.submit-button:active {
141 transform: translateY(0);
142}
143
144.widget-footer {
145 padding: 15px 25px 25px;
146 text-align: center;
147 border-top: 1px solid #e9ecef;
148 background: #f8f9fa;
149}
150
151.widget-footer p {
152 margin: 0;
153}
154
155.widget-footer small {
156 color: #6c757d;
157 font-size: 13px;
158 line-height: 1.5;
159}
160
161/* Success message styling */
162.success-message {
163 display: none;
164 text-align: center;
165 padding: 20px;
166 color: #155724;
167 background-color: #d4edda;
168 border: 1px solid #c3e6cb;
169 border-radius: 8px;
170 margin-top: 15px;
171}
172
173.success-message.active {
174 display: block;
175 animation: fadeIn 0.3s ease;
176}
177
178@keyframes fadeIn {
179 from { opacity: 0; }
180 to { opacity: 1; }
181}
182
183/* Responsive design */
184@media (max-width: 480px) {
185 .whatsapp-contact-widget {
186 border-radius: 10px;
187 }
188
189 .widget-header {
190 padding: 16px;
191 flex-direction: column;
192 text-align: center;
193 gap: 12px;
194 }
195
196 .whatsapp-icon {
197 width: 48px;
198 height: 48px;
199 }
200
201 .header-text h3 {
202 font-size: 16px;
203 }
204
205 .header-text p {
206 font-size: 13px;
207 }
208
209 .widget-form {
210 padding: 20px;
211 }
212
213 .submit-button {
214 padding: 14px;
215 font-size: 15px;
216 }
217}
218</style>
219
220<script>
221document.getElementById('whatsappWidgetForm').addEventListener('submit', function(event) {
222 event.preventDefault();
223
224 const nameInput = document.getElementById('widgetUserName');
225 const name = nameInput.value.trim();
226
227 if (!name) {
228 alert('Vă rugăm să introduceți numele dumneavoastră.');
229 nameInput.focus();
230 return;
231 }
232
233 // Create WhatsApp message
234 const message = `Salut sunt ${encodeURIComponent(name)} și doresc mai multe informații.`;
235 const phoneNumber = '34643732407'; // Your WhatsApp number
236
237 // Create WhatsApp URL
238 const whatsappURL = `https://wa.me/${phoneNumber}?text=${message}`;
239
240 // Show success message
241 showSuccessMessage();
242
243 // Reset form
244 nameInput.value = '';
245
246 // Open WhatsApp after a short delay
247 setTimeout(() => {
248 window.open(whatsappURL, '_blank');
249 }, 1500);
250});
251
252function showSuccessMessage() {
253 // Create success message if it doesn't exist
254 let successMsg = document.querySelector('.success-message');
255
256 if (!successMsg) {
257 successMsg = document.createElement('div');
258 successMsg.className = 'success-message';
259 successMsg.innerHTML = `
260 <svg width="48" height="48" viewBox="0 0 24 24" fill="#28a745" style="margin-bottom: 10px;">
261 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
262 </svg>
263 <h4 style="margin: 10px 0 5px 0;">Mesajul a fost pregătit!</h4>
264 <p style="margin: 0; font-size: 14px;">Vei fi redirecționat către WhatsApp...</p>
265 `;
266
267 const form = document.querySelector('.widget-form');
268 form.parentNode.insertBefore(successMsg, form.nextSibling);
269 }
270
271 // Show message
272 successMsg.classList.add('active');
273
274 // Hide message after 5 seconds
275 setTimeout(() => {
276 successMsg.classList.remove('active');
277 }, 5000);
278}
279</script>

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

Čeština