To se mi líbí 0
Fork 0

Naposledy aktivní 1767614236

Malin's Avatar Malin revidoval tento gist 1767614236. Přejít na revizi

1 file changed, 295 insertions

WhatsApp-form.html(vytvořil soubor)

@@ -0,0 +1,295 @@
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>
228 + function 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 +
242 + function 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
275 + document.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)
287 + document.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>
Novější Starší

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

Čeština