Formele sunt esențiale pentru orice site web—de la simple formulare de contact la fluxuri complexe de înregistrare în mai mulți pași. Elementor Pro include un widget de Formular încorporat care elimină necesitatea unui plugin de formular separat în multe cazuri. În acest ghid, acoperim cum să creăm formulare de contact, formulare de înregistrare și formulare în mai mulți pași folosind Elementor Pro, împreună cu opțiuni de integrare pentru marketing prin email și servicii CRM.
Acest tutorial necesită Elementor Pro. Versiunea gratuită a Elementor nu include widgetul de Formular.
Prezentare generală a widgetului de Formular Elementor
Widgetul de Formular Elementor suportă următoarele tipuri de câmpuri:
| Tip câmp | Utilizare | Note |
|---|---|---|
| Text | Nume, companie, subiect | Input de text pe o linie |
| Colectarea adreselor de email | Include validarea formatului email | |
| Textarea | Corpul mesajului, comentarii, descrieri | Text pe mai multe linii cu rânduri configurabile |
| Tel | Numere de telefon | Activează tastatura numerică pe mobil |
| Număr | Cantități, bugete, evaluări | Validare min/max/pas |
| URL | Adrese de site web | Validare format URL |
| Select | Selecții din dropdown (țară, categorie) | Selectare unică sau multiplă |
| Radio | Alegere unică din opțiuni (tip serviciu) | Opțiuni vizibile fără dropdown |
| Checkbox | Selecții multiple (interese, servicii) | Selecții multiple permise |
| Data | Date pentru întâlniri, date de evenimente | Selector de date nativ |
| Ora | Programarea întâlnirilor | Control pentru selecția orei |
| Încărcare fișier | CV, document, trimiterea imaginilor | Tipuri de fișiere și limite de dimensiune configurabile |
| Aceptare | Termeni și condiții, consimțământ GDPR | Checkbox obligatoriu cu link |
| Ascuns | Date de urmărire (URL pagină, referent) | Nu este vizibil pentru utilizator |
| reCAPTCHA | Protecție împotriva spamului | Checkbox v2 sau v3 invizibil |
| Honeypot | Anti-spam (invizibil pentru oameni) | Câmp ascuns care prinde boți |
Crearea unui Formular de Contact
Pasul 1: Adăugați Widgetul de Formular
- Deschideți orice pagină în editorul Elementor
- Căutați "Formular" în panoul de widgeturi
- Trageți widgetul de Formular în layout-ul dvs.
- Formularul implicit include câmpurile Nume, Email și Mesaj
Pasul 2: Configurați Câmpurile Formularului
Pentru un formular de contact standard, această configurație a câmpurilor funcționează bine:
- Nume (Câmp text, obligatoriu) – Placeholder: "Numele dvs."
- Email (Câmp email, obligatoriu) – Placeholder: "[email protected]"
- Subiect (Câmp text, opțional) – Placeholder: "Cum vă putem ajuta?"
- Mesaj (Câmp textarea, obligatoriu) – Placeholder: "Spuneți-ne despre proiectul dvs....", Rânduri: 5
- reCAPTCHA sau Honeypot pentru protecția împotriva spamului
Pasul 3: Configurați Acțiunile După Trimitere
Sub secțiunea "Acțiuni După Trimitere", configurați ce se întâmplă când un utilizator trimite formularul: For related information, see our guide on Elementor complete guide.
- Email: Trimiteți datele formularului la adresa dvs. de email (sau la mai multe adrese)
- Redirect: Trimiteți utilizatorul la o pagină de mulțumire după trimitere
- Popup: Afișați un popup de confirmare
- Webhook: Trimiteți datele formularului la un URL extern (Zapier, Make, API personalizat)
- Mailchimp / ConvertKit / Drip: Adăugați abonați la listele de marketing prin email
- Slack: Trimiteți notificări la un canal Slack
- Discord: Trimiteți notificări la un webhook Discord
Pasul 4: Stilizați Formularul
În tab-ul Stil, personalizați aspectul vizual: For related information, see our guide on Elementor templates and kits.
- Layout formular
- Tipuri de câmpuri: Câmpuri suprapuse (lățime completă) sau inline (una lângă alta)
- Stilizarea câmpurilor: Margine, culoare de fundal, padding, rază de colț, culoare stare de focus
- Stilizarea etichetelor: Familie de fonturi, dimensiune, culoare, spațiere
- Stilizarea butoanelor: Culoare de fundal, culoare text, margine, efecte hover, opțiune lățime completă
- Mesaje: Culorile și tipografia mesajelor de succes și eroare
Crearea unui Formular cu Pași Multipli
Formularele cu pași multipli sunt utile pentru formulare lungi (înregistrări, aplicații, sondaje) unde afișarea tuturor câmpurilor deodată poate suprasolicita utilizatorii. Elementor Pro suportă formulare cu pași multipli în mod nativ. For related information, see our guide on creating landing pages with Elementor.
Cum să Configurați Pașii
- Adăugați un widget Formular pe pagina dvs.
- În lista câmpurilor formularului, adăugați un tip de câmp "Pas" între grupurile de câmpuri
- Fiecare câmp Pas creează un nou pas cu un buton "Următor" și "Anterior"
- Structură exemplu:
- Pasul 1: Nume, Email, Telefon (Informații personale)
- Pasul 2: Companie, Buget, Cronologie (Detalii proiect)
- Pasul 3: Mesaj, Încărcare fișier (Informații suplimentare)
Formularele cu pași multipli afișează un indicator de progres care arată pe ce pas se află utilizatorul. Acest lucru reduce complexitatea percepută și îmbunătățește ratele de completare comparativ cu afișarea tuturor câmpurilor deodată.
Crearea unui Formular de Înregistrare a Utilizatorilor
Elementor Pro poate crea formulare de înregistrare a utilizatorilor WordPress fără un plugin separat:
- Adăugați un widget Formular și configurați câmpurile (Nume utilizator, Email, Parolă)
- Sub "Acțiuni după trimitere," adăugați acțiunea "Înregistrează-te"
- Maparea fiecărui câmp de formular la câmpul corespunzător al utilizatorului WordPress
- Setați rolul implicit al utilizatorului pentru noile înregistrări
- Opțional, redirecționați utilizatorii către pagina lor de cont după înregistrare
Notă: WordPress necesită ca un administrator să aprobe utilizatorii noi în mod implicit. Puteți schimba acest lucru în Setări → General → Membru dacă doriți ca utilizatorii să se înregistreze liber.
Integrând cu Servicii de Marketing prin Email
Elementor Pro se integrează direct cu platforme populare de marketing prin email:
Serviciu Tip de integrare Pași de configurare Mailchimp Nativ (încorporat) Adăugați cheia API → Selectați lista → Mapare câmpuri ConvertKit Nativ (încorporat) Adăugați cheia API → Selectați formularul → Mapare câmpuri ActiveCampaign Nativ (încorporat) Adăugați acreditivul API → Selectați lista → Mapare câmpuri Drip Nativ (încorporat) Adăugați tokenul API → Selectați contul → Mapare câmpuri GetResponse Nativ (încorporat) Adăugați cheia API → Selectați campania → Mapare câmpuri MailerLite Nativ (încorporat) Adăugați cheia API → Selectați grupul → Mapare câmpuri HubSpot Prin Webhook Creați o conexiune Zapier/Make cu acțiunea webhook Pentru fiecare integrare, procesul este: introduceți cheia API a serviciului dvs. în setările de integrare ale Elementor, apoi selectați serviciul ca "Acțiune după trimitere" în formularul dvs. Maparea câmpurilor formularului la câmpurile serviciului va face ca abonații să fie adăugați automat atunci când formularul este trimis.
Strategii de Protecție împotriva Spamului
Formularele de contact atrag boți de spam. Elementor Pro oferă mai multe opțiuni de prevenire a spamului:
- Google reCAPTCHA v3: Detectare a spamului invizibil care evaluează trimiterile fără interacțiune din partea utilizatorului. Recomandat pentru cele mai multe formulare
- reCAPTCHA v2: Caseta de selectare "Nu sunt un robot". Mai vizibilă, dar poate reduce completările formularului
- Câmp Honeypot: Un câmp invizibil pe care boții îl completează. Dacă câmpul conține date, trimiterea este respinsă. Nu este necesară interacțiunea utilizatorului
- Câmp de acceptare: O casetă de selectare obligatorie (consimțământ GDPR, acceptarea termenilor) care acționează și ca un deterrent pentru boți
Recomandăm utilizarea reCAPTCHA v3 combinată cu un câmp Honeypot. Aceasta oferă două straturi de protecție împotriva spamului fără un impact vizibil asupra utilizatorului.
în experiența utilizatorului.
Elementor Forms vs Pluginuri dedicate pentru formulare
Caracteristică Elementor Forms Gravity Forms WPForms Constructor vizual În editorul Elementor Drag-and-drop separat Drag-and-drop separat Logică condițională De bază (afișare/ascundere câmpuri) Avansată Avansată Integrare plăți Buton PayPal Stripe, PayPal, Square Stripe, PayPal, Square Calculații Nu Da Da (Pro) Multi-pas Da Da Da Încărcare fișiere Da Da Da Gestionarea intrărilor Prin trimiterea Elementor Manager complet de intrări Manager complet de intrări Necesită constructor de pagini Da (Elementor Pro) Nu Nu Elementor Forms este suficient pentru formulare de contact, înscriere la newsletter și formulare simple de înregistrare. Pentru formulare complexe care necesită procesare a plăților, logică condițională avansată sau gestionare sofisticată a intrărilor, pluginuri dedicate pentru formulare precum Gravity Forms sau WPForms sunt mai potrivite.
Întrebări frecvente
Pot folosi formularele Elementor fără Elementor Pro?
Nu. Widgetul Form este exclusiv pentru Elementor Pro. Dacă ai nevoie de formulare cu versiunea gratuită a Elementor, folosește un plugin separat pentru formulare, cum ar fi Contact Form 7 (gratuit), WPForms Lite (gratuit) sau Gravity Forms (premium).
Unde sunt stocate trimiterile de formulare Elementor?
Trimiterile de formulare sunt stocate în baza de date WordPress și sunt accesibile sub Elementor → Trimiteri în panoul de administrare. Poți vizualiza, exporta (CSV) și șterge trimiterile. Trimiterile sunt de asemenea trimise la adresele de email pe care le configurezi în acțiunea Email.
Puteți formularele Elementor accepta încărcări de fișiere?
Da. Adaugă un tip de câmp Încărcare fișiere la formularul tău. Poți configura tipurile de fișiere acceptate (PDF, JPG, PNG, DOCX etc.) și dimensiunea maximă a fișierului. Fișierele încărcate sunt stocate în biblioteca media WordPress și sunt legate de trimiterea formularului.
Cum adaug logică condițională la formularele Elementor?
Elementor Pro suportă logică condițională de bază: afișează sau ascunde câmpuri în funcție de valoarea unui alt câmp. În setările câmpului, activează "Condițional" și setează condițiile (de exemplu, afișează câmpul "Companie" doar când butonul radio "Sunt o afacere" este selectat). Pentru logică condițională avansată (calculări, condiții multi-nivel), un plugin dedicat pentru formulare poate fi mai potrivit.
Pot crea formulare popup cu Elementor?
Da. Creează un șablon popup în Elementor, adaugă un widget Form în interiorul său și setează condițiile de declanșare (click, procentaj de derulare, intenție de ieșire, întârziere de timp). Acest lucru este util pentru înscrierea la newsletter, magneti de lead-uri și oferte promoționale fără a adăuga un formular la layout-ul principal al paginii.
Cum pot preveni spamul pe formularele Elementor?
Folosește Google reCAPTCHA v3 (invizibil) combinat cu un câmp Honeypot pentru protecție în două straturi. Acest lucru blochează roboții automatizați fără a adăuga fricțiune pentru utilizatorii reali. Pentru formulare cu volum mare de spam, ia în considerare adăugarea unui câmp de Acceptare (checkbox obligatoriu) ca un al treilea strat.
Obține Elementor Pro cu Constructor de Formulare
Accesează widgetul Form, Theme Builder, WooCommerce Builder și 100+ widgeturi Pro. Creează formulare vizual fără pluginuri suplimentare.
Explorează Elementor Pro →
