Agentie de marketing digital

cum sa creezi un formular de contact

Te întrebi de ce ai nevoie de un formular de contact pe site-ul tău? De ce nu publici o adresă de e-mail și gata?

Crearea unui formular de contact pare a fi o muncă grea, dar este destul de ușor de creat cu softul potrivit. Un formular de contact este de fapt vital dacă dorești să-și dezvolți afacerea.

În acest articol, ne vom uita la importanța de a avea un formular de contact și vom explica cum să facem unul cu ușurință.

Formularele de hârtie sunt încă folosite de multe instituții precum școli, spitale și bănci pentru a colecta informații. Dar cantitatea de hârtie utilizată continuă să scadă pe măsură ce lumea trece din ce în ce mai mult la formatele digitale.

A avea o modalitate simplificată de a colecta date despre vizitatorii site-ului tău este cheia pentru a te asigura că poți păstra cu ușurință legătura cu aceștia sau că te pot contacta dacă au o problemă sau o întrebare.

Cel mai bun mod în care poți face acest lucru este prin utilizarea unui formular web pe site. Dacă nu ești prea familiarizat cu subiectul, nu-ți face griji, vom detalia exact ce este un formular web, împreună cu cel mai bun mod de a crea unul pentru site-ul tău.

Ce este un formular web?

Un formular web este un document digital folosit pentru sondaje și alte comunicări. Companiile le folosesc pentru comunicarea cu clienții, determinându-i pe vizitatorii site-ului să introducă diverse informații personale, împreună cu orice întrebare sau nelămurire pe care o au.
Configurarea unui formular digital te poate ajuta în realizarea:
  • Comunicării cu clienții 
  • Răspunsuri la întrebările de asistență tehnică 
  • Formularelor pentru angajare 
  • Formularelor pentru a plasa o comandă
Principalul lucru de reținut este scopul final pe care dorești să-l atingi prin intermediul formularului.

Cum se creează un formular web?

Poți fie să scrii codul manual, fie să utilizezi un generator de formulare online pentru a-l crea sau un plug-in. Un generator de formulare este o alegere mai bună pentru majoritatea oamenilor, mai ales dacă nu ai timpul necesar pentru a-l coda de la 0.

De asemenea, există metode mai simple sau mai complexe, în funcție de modul în care este configurat site-ului tău.

  • Prima variantă și un exemplu de cod manual și cum va arăta în website este:
<div class="formbold-main-wrapper">
<div class="formbold-form-wrapper">
<form action="https://formbold.com/s/FORM_ID" method="POST">
<div class="formbold-input-flex">
<div>
<input
type="text"
name="firstname"
id="firstname"
placeholder="Popescu"
class="formbold-form-input"
/>
<label for="firstname" class="formbold-form-label"> Nume </label>
</div>
<div>
<input
type="text"
name="lastname"
id="lastname"
placeholder="Alex"
class="formbold-form-input"
/>
<label for="lastname" class="formbold-form-label"> Prenume </label>
</div>
</div>
<div class="formbold-input-flex">
<div>
<input
type="email"
name="email"
id="email"
placeholder="jhon@mail.com"
class="formbold-form-input"
/>
<label for="email" class="formbold-form-label"> e-mail </label>
</div>
<div>
<input
type="text"
name="phone"
id="phone"
placeholder="07...."
class="formbold-form-input"
/>
<label for="phone" class="formbold-form-label"> Telefon </label>
</div>
</div>
<div class="formbold-textarea">
<textarea
rows="6"
name="message"
id="message"
placeholder="Scrie aici mesajul tau"
class="formbold-form-input"
></textarea>
<label for="message" class="formbold-form-label"> Mesaj </label>
</div>
<div class="formbold-input-file">
<div class="formbold-filename-wrapper">
<span class="formbold-filename">
website-information-architecture.pdf
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1670_1541)">
<path d="M9.00005 7.93906L12.7126 4.22656L13.7731 5.28706L10.0606 8.99956L13.7731 12.7121L12.7126 13.7726L9.00005 10.0601L5.28755 13.7726L4.22705 12.7121L7.93955 8.99956L4.22705 5.28706L5.28755 4.22656L9.00005 7.93906Z" fill="#536387"/>
</g>
<defs>
<clipPath id="clip0_1670_1541">
<rect width="18" height="18" fill="white"/>
</clipPath>
</defs>
</svg>
</span>
<span class="formbold-filename">
website-logo.png
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1670_1541)">
<path d="M9.00005 7.93906L12.7126 4.22656L13.7731 5.28706L10.0606 8.99956L13.7731 12.7121L12.7126 13.7726L9.00005 10.0601L5.28755 13.7726L4.22705 12.7121L7.93955 8.99956L4.22705 5.28706L5.28755 4.22656L9.00005 7.93906Z" fill="#536387"/>
</g>
<defs>
<clipPath id="clip0_1670_1541">
<rect width="18" height="18" fill="white"/>
</clipPath>
</defs>
</svg>
</span>
</div>
<label for="upload" class="formbold-input-label">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1670_1531)">
<path d="M12.3568 6.4644L7.64349 11.1786C7.5639 11.2554 7.50041 11.3474 7.45674 11.4491C7.41307 11.5507 7.39008 11.6601 7.38912 11.7707C7.38815 11.8814 7.40924 11.9911 7.45114 12.0935C7.49304 12.1959 7.55492 12.289 7.63316 12.3672C7.71141 12.4455 7.80445 12.5073 7.90686 12.5492C8.00928 12.5912 8.11901 12.6122 8.22966 12.6113C8.34031 12.6103 8.44966 12.5873 8.55133 12.5436C8.653 12.5 8.74495 12.4365 8.82182 12.3569L13.536 7.64356C14.0049 7.17468 14.2683 6.53875 14.2683 5.87565C14.2683 5.21255 14.0049 4.57661 13.536 4.10773C13.0671 3.63885 12.4312 3.37544 11.7681 3.37544C11.105 3.37544 10.469 3.63885 10.0002 4.10773L5.28599 8.8219C4.89105 9.20701 4.57652 9.6667 4.36062 10.1743C4.14473 10.6819 4.03178 11.2274 4.02832 11.779C4.02487 12.3306 4.13097 12.8774 4.34049 13.3877C4.55 13.8979 4.85876 14.3615 5.24884 14.7516C5.63892 15.1416 6.10256 15.4503 6.61287 15.6597C7.12318 15.8692 7.67 15.9752 8.2216 15.9717C8.77321 15.9681 9.31862 15.8551 9.82621 15.6391C10.3338 15.4232 10.7934 15.1086 11.1785 14.7136L15.8927 10.0002L17.071 11.1786L12.3568 15.8927C11.8151 16.4344 11.172 16.8641 10.4643 17.1573C9.75649 17.4505 8.99791 17.6014 8.23182 17.6014C7.46574 17.6014 6.70716 17.4505 5.99939 17.1573C5.29162 16.8641 4.64853 16.4344 4.10682 15.8927C3.56512 15.351 3.13542 14.7079 2.84225 14.0002C2.54908 13.2924 2.39819 12.5338 2.39819 11.7677C2.39819 11.0016 2.54908 10.2431 2.84225 9.5353C3.13542 8.82753 3.56512 8.18443 4.10682 7.64273L8.82182 2.9294C9.60767 2.17041 10.6602 1.75043 11.7527 1.75992C12.8451 1.76942 13.8902 2.20762 14.6627 2.98015C15.4353 3.75269 15.8735 4.79774 15.883 5.89023C15.8925 6.98271 15.4725 8.03522 14.7135 8.82106L10.0002 13.5369C9.76794 13.7691 9.49226 13.9532 9.18887 14.0788C8.88548 14.2045 8.56032 14.2691 8.23195 14.2691C7.90357 14.269 7.57843 14.2043 7.27507 14.0786C6.97171 13.9529 6.69607 13.7687 6.46391 13.5365C6.23174 13.3043 6.04759 13.0286 5.92196 12.7252C5.79633 12.4218 5.7317 12.0966 5.73173 11.7683C5.73177 11.4399 5.79649 11.1148 5.92219 10.8114C6.04788 10.508 6.2321 10.2324 6.46432 10.0002L11.1785 5.28606L12.3568 6.4644Z" fill="#07074D"/>
</g>
<defs>
<clipPath id="clip0_1670_1531">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
Attach files
<input type="file" name="upload" id="upload">
</label>
</div>
<button class="formbold-btn">
Trimite mesaj
</button>
</form>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
}
.formbold-main-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}
.formbold-form-wrapper {
margin: 0 auto;
max-width: 550px;
width: 100%;
background: white;
}
.formbold-input-flex {
display: flex;
gap: 20px;
margin-bottom: 22px;
}
.formbold-input-flex > div {
width: 50%;
display: flex;
flex-direction: column-reverse;
}
.formbold-textarea {
display: flex;
flex-direction: column-reverse;
}
.formbold-form-input {
width: 100%;
padding-bottom: 10px;
border: none;
border-bottom: 1px solid #DDE3EC;
background: #FFFFFF;
font-weight: 500;
font-size: 16px;
color: #07074D;
outline: none;
resize: none;
}
.formbold-form-input::placeholder {
color: #536387;
}
.formbold-form-input:focus {
border-color: #6A64F1;
}
.formbold-form-label {
color: #07074D;
font-weight: 500;
font-size: 14px;
line-height: 24px;
display: block;
margin-bottom: 18px;
}
.formbold-form-input:focus + .formbold-form-label {
color: #6A64F1;
}
.formbold-input-file {
margin-top: 30px;
}
.formbold-input-file input[type="file"] {
position: absolute;
top: 6px;
left: 0;
z-index: -1;
}
.formbold-input-file .formbold-input-label {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.formbold-filename-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 22px;
}
.formbold-filename {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
line-height: 24px;
color: #536387;
}
.formbold-filename svg {
cursor: pointer;
}
.formbold-btn {
font-size: 16px;
border-radius: 5px;
padding: 12px 25px;
border: none;
font-weight: 500;
background-color: #6A64F1;
color: white;
cursor: pointer;
margin-top: 25px;
}
.formbold-btn:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
</style>
  • A doua varianta mai simpla este folosirea unui soft pentru a genera un formular pe care sa il integrezi in website. Iata un exemplu si pentru aceasta varianta

Crearea unui formular pe Getform

Orice formular creat pe Getform poate trimite cu ușurință un e-mail către mai mulți destinatari. Să setăm un formular care trimite un e-mail către mai mulți destinatari.

Conectează-te la tabloul de bord al formularului și creează un formular numit „Formular de e-mail HTML”. Iată cum arată tabloul de bord după ce creezi formularul:

Poți să citești și să afli mai multe despre cum să creezi un formular pe Getform chiar de pe blog-ul lor de aici.

  • A treia varianta este pentru WordPress cu Elementor:

MetForm este cel mai flexibil și mai ușor de utilizat plugin de generare de formulare pentru Elementor. Pluginul oferă atât versiunea gratuită, cât și versiunea pro. În ambele versiuni, te vei bucura de o mulțime de funcții avansate pentru a crea formulare de contact, formulare cu mai mulți pași, newsletter, formulare pentru evenimente, formulare de înregistrare, formulare de comandă și multe altele.

Caracteristici gratuite
– Export intrări ca CSV
– Captarea datelor browser-ului utilizatorului
– Salvarea intrărilor în panoul de administrare
– Câmpuri de validare bazate pe cuvinte și caractere
– Redirecționare după transmiterea cu succes
– Acceptă shortcode
– Câmpul de consimțământ GDPR

Pur si simplu instalezi plug-in în WordPress și începi să-ți editezi formularul cu Elementor în ce formă dorești.

Sfaturi pentru crearea formularului tău digital

Procesul de creare a formularului web este destul de simplu, dar este totuși util să ai în vedere câteva sfaturi și linii directoare atunci când vine vorba de crearea acestuia.

  • Folosește titluri simple: Titlurile formularului ar trebui să fie simple și să precizeze exact ce face formularul – fie că este un formular de contact, cerere de angajare sau formular de asistență pentru clienți. 
  • Evită încercarea de a fi unic sau foarte detaliat atunci când creezi câmpurile pentru completare, păstrează asta pentru produsele/serviciile pe care le oferi
  • Oferă instrucțiuni pas cu pas: Oferă informații clare pas cu pas despre ce vor trebui să facă vizitatorii când completează formularul, împreună cu motivul pentru care colectezi informațiile.
  • Păstrați consecvența formularului de pe site-ul dvs

Când vine vorba de aspectul formularului, asigură-te că îl păstrezi cât mai consistent și organizat posibil. Acest lucru va duce atât la un aspect vizual mai coerent, cât și la ajutarea utilizatorilor. Este un factor cheie în modul în care se simt utilizatorii despre interacțiunea cu un site. Aceste mici detalii contează, mai ales în lumea digitală, când concurența ta este la un simplu click distanță.

 

Concluzie

Formularele digitale sunt o parte esențială a unui site web funcțional și le poți crea cu ușurință în mai multe moduri și tipuri, în funcție de nevoile tale. 

Fie că este un formular care trimite ulterior infomații pe e-mail sau un formular de comandă.. 

a avea un formular bine structurat pe site-ul tău poate fi o modalitate excelentă de a crește rata de conversie a clienților potențiali, deoarece îi poți încuraja să te contacteze atunci când au neovie te tine, ajutând la stabilirea unui punct important din strategia ta de comunicare.

Abonează-te la Newsletter și primești noul nostru eBook GRATUIT!

Ți-am pregătit 38 de pagini pline cu informații utile ce te vor ajuta pe tine și afacerea ta să beneficiați de succesele unei agenții specializate în Facebook & Instagram Ads.

Campanii Facebook Ads de SUCCES!

Campanii Facebook Ads de SUCCES!

Transformă campaniile Facebook Ads în SUCCESE cu strategii precise! Campaniile Facebook Ads reprezintă, în continuare, un instrument puternic pentru a…

Tendințe Marketing Digital 2023

Tendințe Marketing Digital 2023

Piața digitală este și va fi mereu într-o continuă schimbare, pe măsură ce numărul utilizatorilor crește.. și cererea de tehnologie…

Cum să creeazi conținut calitativ în 2023

Cum să creeazi conținut calitativ în 2023

Află care sunt cele mai eficiente modălități de a atrage și păstra publicul țintă în era digitală a anului 2023.…

Promovarea Facebook Ads îți poate crește afacerea!

Promovarea Facebook Ads îți poate crește afacerea!

🔥 Facebook are peste 12 milioane de utilizatori în România și este în continuare cea mai populară platformă de socializare.…

🎯 Cum îți poți crește vânzările cu TikTok Ads?

🎯 Cum îți poți crește vânzările cu TikTok Ads?

În 2021, TikTok a depășit Google și Facebook ca fiind cel mai vizitat site online. Deși inițial renumit pentru videoclipurile…

Google Ads te ajută să-ți crești cifra de afaceri!

Google Ads te ajută să-ți crești cifra de afaceri!

Toată lumea a auzit de Google Ads, platforma de publicitate online oferită de Google. Este una dintre cele mai populare…

Abonează-te la Newsletter și primești noul nostru eBook GRATUIT!

Ți-am pregătit 38 de pagini pline cu informații utile ce te vor ajuta pe tine și afacerea ta să beneficiați de succesele unei agenții specializate în Facebook & Instagram Ads.

Scroll to Top