Un formular de contact care există doar pe o pagină standalone este o oportunitate ratată. Cele mai eficiente formulare de contact apar acolo unde vizitatorii se află deja — pe paginile de produse, articolele de blog, paginile de destinație, barele laterale și footer-uri — fără a solicita vizitatorilor să navigheze mai întâi la o pagină de contact separată.
Acest ghid acoperă cele două metode principale de încorporare (snippet JavaScript și iFrame), când să utilizați fiecare metodă și cum să le implementați corect pe cele mai comune platforme de site-uri web.
Două Metode de Încorporare: Snippet JS vs. iFrame
Snippet JavaScript (Recomandat pentru Majoritatea Cazurilor)
Un embed JavaScript este un singur tag <script> pe care îl lipiți în HTML-ul dumneavoastră. Scriptul rulează în browserul vizitatorului și redă formularul inline, corespunzând sau adaptându-se la layout-ul paginii dumneavoastră.
Avantaje:
- Se poate potrivi cu fonturile și stilul general al paginii înconjurătoare
- Poate trimite fără a reîncărca pagina complet (UX mai bun)
- Poate crește sau scădea în înălțime dinamic în funcție de starea formularului
- Poate comunica cu pagina principală (analitics, urmărirea conversiilor)
- În general mai rapid de încărcat decât un iFrame deoarece nu creează un context de navigare separat
Limitări:
- Necesită ca site-ul gazdă să permită scripturi externe (majoritatea permit)
- JavaScript trebuie să fie activat în browserul vizitatorului
- Necesită testare atentă pentru a asigura că formularul nu intră în conflict cu scripturile existente ale paginii
iFrame
Un iFrame încorporează formularul de contact ca o „fereastră" separată în interiorul paginii dumneavoastră. Formularul rulează într-un context complet izolat.
Avantaje:
- Zero conflict cu CSS sau JavaScript-ul site-ului gazdă — este complet izolat
- Funcționează pe platforme care restricționează scripturile externe (unele medii CMS)
- Nu necesită JavaScript pe pagina gazdă
Limitări:
- Înălțimea trebuie să fie fixă sau gestionată cu JavaScript; iFrame-urile nu se redimensionează automat în funcție de conținut
- Stilizarea este izolată — formularul nu moștenește niciunul dintre fonturile sau culorile paginii principale, cu excepția cazului în care sunt configurate în instrumentul de formulare
- Unele urmăriri de analitics sunt mai dificile peste granițele iFrame
- Poate arăta vizual deconectat de pagina înconjurătoare
Când să folosiți iFrame:
- Platforma de găzduire restricționează JavaScript extern
- Încorporați pe o platformă unde conflictele de script sunt frecvente și greu de depanat
- Formularul este încorporat într-un email sau într-un mediu care nu poate executa JavaScript
Încorporarea pe WordPress
Metoda 1: Bloc HTML cu Snippet JS
În editorul de blocuri WordPress (Gutenberg):
- Faceți clic pe + pentru a adăuga un bloc nou
- Căutați și selectați HTML personalizat
- Lipiți codul dumneavoastră de embed JavaScript în bloc
Aceasta funcționează fiabil pentru majoritatea site-urilor WordPress. Scriptul rulează când se încarcă pagina și redă formularul în locul blocului.
Important: dacă site-ul dumneavoastră WordPress folosește un plugin de caching (WP Rocket, W3 Total Cache etc.), adăugați pagina cu formularul la lista de excludere din cache. Paginile din cache pot să nu execute corect scripturile încorporate după o trimitere de formular.
Metoda 2: Bloc iFrame
În editorul de blocuri:
- Adăugați un bloc HTML personalizat
- Lipiți codul iFrame:
<iframe src="https://formularul-dumneavoastra.url" width="100%" height="600" frameborder="0"></iframe>
Ajustați atributul height în funcție de înălțimea reală a formularului dumneavoastră. Dacă formularul are erori de validare care extind înălțimea vizibilă a formularului, iFrame-ul va afișa o bară de derulare în interiorul ferestrei încorporate — ceea ce arată defect. Testați toate stările formularului (gol, eroare, succes) și setați înălțimea la starea cea mai înaltă.
Metoda 3: Zona de Widget sau Footer
Pentru un formular de contact în footer sau bară laterală, folosiți un widget Text:
- Accesați Aspect → Widgeturi
- Adăugați un widget HTML personalizat în bara laterală sau footer-ul dumneavoastră
- Lipiți codul de embed
Încorporarea pe Webflow
Componenta embed nativă a Webflow suportă JavaScript:
- În designerul Webflow, trageți o componentă Embed pe pagina dumneavoastră
- Faceți clic pe componentă și deschideți editorul de cod embed
- Lipiți snippet-ul dumneavoastră JavaScript
- Faceți clic pe Save & Close
- Publicați pagina
Pentru embed-urile iFrame, același proces se aplică — lipiți tag-ul iFrame în componenta Embed.
Notă Webflow: modul de previzualizare al Webflow din interiorul designerului poate să nu execute scripturile externe. Publicați pe domeniul de staging sau producție pentru a testa formularul.
Încorporarea pe Squarespace, Wix și Constructori Similari
Majoritatea constructorilor de site-uri web au un bloc de „cod personalizat" sau „embed HTML":
- Squarespace: Adăugați un bloc Cod pe orice pagină și lipiți snippet-ul de embed
- Wix: Inserați un element HTML iframe (via Adaugă → Embed → HTML iframe) și lipiți codul dumneavoastră iFrame sau JS
- Showit: Folosiți un widget HTML în canvas-ul de design
Notă despre Wix: containerul de embed al Wix este tehnic un iFrame chiar și atunci când lipiți un snippet JavaScript. Scripturile externe din interiorul unui embed HTML Wix rulează într-un context iframe izolat. Aceasta înseamnă că formularul va funcționa, dar integrarea de analitics cross-pagină este limitată.
Încorporarea pe un Site Web HTML Personalizat
Pentru site-urile HTML/CSS simple sau site-urile construite cu un generator static (Hugo, Jekyll, Eleventy):
Snippet JavaScript: lipiți tag-ul <script> chiar înainte de </body> pe orice pagină unde doriți să apară formularul. Adăugați un placeholder <div id="contact-form"></div> unde ar trebui să se redea formularul dacă scriptul necesită un element țintă.
iFrame: lipiți tag-ul <iframe> direct în HTML-ul paginii la locația unde ar trebui să apară formularul.
Considerații privind Performanța de Încărcare
Un formular de contact încorporat nu ar trebui să încetinească pagina dumneavoastră. Urmăriți:
Încărcare asincronă: tag-ul script ar trebui să includă atributul async astfel încât să nu blocheze redarea conținutului principal al paginii.
<script src="https://cdn.example.com/form.js" data-key="cheia-dumneavoastra" async></script>
Lazy loading: pentru formularele de sub linia de pliere, unele sisteme de embed suportă lazy loading — scriptul formularului nu se încarcă până când vizitatorul nu derulează lângă formular. Aceasta îmbunătățește timpul de încărcare inițial al paginii.
Livrare CDN: JavaScript-ul formularului ar trebui servit dintr-o rețea de livrare de conținut (CDN) cu puncte edge globale, astfel încât timpul de încărcare să fie rapid pentru vizitatori indiferent de locația lor.
Urmărirea Conversiilor după Încorporare
Dacă folosiți Google Analytics, Meta Pixel sau alt instrument de analitics, configurați urmărirea trimiterilor de formulare să se declanșeze când formularul încorporat este trimis cu succes.
Pentru embed-urile JavaScript, furnizorul de formulare ar trebui să suporte un callback sau un eveniment care se declanșează la trimiterea cu succes:
// Exemplu — sintaxa reală variază în funcție de furnizor
onContactFormSubmit(function() {
gtag('event', 'contact_form_submit', { event_category: 'engagement' });
});
Pentru embed-urile iFrame, folosiți window.postMessage pentru a comunica evenimentul de trimitere din iFrame la pagina principală, apoi declanșați evenimentul de analitics pe pagina principală. Aceasta implică tehnic mai multă complexitate — verificați dacă furnizorul dumneavoastră de formulare îl suportă nativ.
Testarea Formularului Încorporat
Înainte de publicare, testați:
- Trimitere goală — confirmați că validarea câmpurilor obligatorii se declanșează corect
- Email invalid — confirmați că câmpul de email afișează o eroare de validare
- Trimitere cu succes — confirmați că apare starea de succes și că trimiterea este primită
- Mobil — deschideți pagina pe un telefon real și testați țintele de apăsare, comportamentul tastaturii și derularea formularului
- Cu caching activat — dacă site-ul dumneavoastră folosește un cache, testați că formularul funcționează pe o pagină încărcată din cache
- Cu o extensie de browser — unele blocatoare de reclame blochează scripturile externe; testați într-un profil de browser curat
Cum Oferă Nura24 Încorporarea Formularului de Contact
Modulul de pagină de contact al Nura24 generează atât un snippet de embed JavaScript, cât și un cod de embed iFrame din dashboard, gata de lipit în orice site web fără cod. Scriptul widget se încarcă asincron și este servit dintr-un CDN. Setările vizuale — culoare, font, raza bordurilor, mod dark/light — sunt configurate în dashboard-ul Nura24 și aplicate automat formularului încorporat, astfel încât actualizarea brandingului într-un singur loc îl actualizează pretutindeni unde este încorporat formularul. Trimiterile sunt rutate către sistemul de ticketing Nura24 și declanșează opțional notificări email pentru agenți și email-uri de răspuns automat pentru vizitator.