Cum să adăugați un formular de contact în magazinul dvs. Shopify

Serviciul pentru clienți poate fi una dintre cele mai provocatoare piese ale afacerii dvs., dar fără clienți fericiți, nu aveți nicio afacere. De aceea, este vital să faceți din experiența clientului una dintre prioritățile dvs. principale, iar modul în care clienții dvs. comunică cu dvs. face parte din această experiență.

O mulțime de companii utilizează instrumente de asistență, cum ar fi Intercom sau ZenDesk, dar este posibil să fie mai mult decât aveți nevoie acum.

Dacă tema dvs. Shopify nu are deja un formular de contact sau dacă utilizați un instrument terță parte precum Typeform, Google Forms sau Wufoo sau doriți să simplificați puțin lucrurile, vă puteți crea propriul formular simplu de contact chiar în Shopify .

De dragul acestui tutorial, voi presupune că magazinul dvs. nu are un formular și, până la sfârșitul acestui tutorial, veți avea ceva care acceptă informații despre clienți și arată așa:

Înainte de a începe: Faceți o copie a temei dvs.

Conectați-vă la tabloul de bord Shopify și accesați Magazin online > Teme . Găsiți tema live și faceți clic pe meniul derulant Acțiuni și faceți clic pe Duplicare .

După ce se duplică, faceți clic din nou pe meniul Acțiuni și faceți clic pe Editați codul .

Să construim un formular de contact!

Vom avea nevoie de două lucruri pentru ca formularul nostru de contact să funcționeze: un nou fișier șablon pentru a păstra codul nostru și o nouă pagină în magazinul nostru.

Creați un fișier șablon nou

Acum, după ce ați aterizat în editorul de cod, priviți în partea stângă a ecranului în arborele de dosare și faceți clic și extindeți Șabloane . Apoi faceți clic pe linkul Adăugați un șablon nou .

Apoi alegeți Pagina din primul meniu derulant și numiți-l Contact . Apoi apăsați butonul Creați șablon .

Copiați și lipiți codul nostru

Iată tot codul de care avem nevoie pentru a crea formularul nostru de contact.

Copiați și lipiți următorul bloc de cod în noul fișier și apăsați butonul Salvare .

<div class = „page-width” >
<div class = „grid” >
<div class = “grid__item medium-up – five-sixs medium-up – push-one-XII” >
<div class = „section-header text-center” >
<h1> {{page.title}} </h1>
</div>

{% dacă page.content.size> 0%}
<div class = “rte” >
{{page.content}}
</div>
{% endif%}

<div class = „contact-form form-vertical” >
{% - assign formId = 'Formular de contact' -%}
{% form 'contact', id: formId%}
{% include „form-status”, form_id: formId%}

<div class = „grilă de rețea – jgheaburi” >
<div class = “grid__item medium-up – one-half” >
<etichetă pentru = „{{formId}} - nume” > {{'contact.form.name' | | t}} </label>
<input type = „text” id = „{{formId}} - name” name = „contact [name]” >
</div>
<div class = “grid__item medium-up – one-half” >
<etichetă pentru = „{{formId}} - e-mail” > {{'contact.form.email' | | t}} <span aria-hidden = “true” > * </span> </label>
<input required type = "email" id = "{{formId}} - email" name = "contact [email]" autocorrect = "off" autocapitalize = "off" aria-required = "true"
{% - dacă form.errors conține „e-mail” -%}
class = „intrare – eroare”
aria-invalid = „adevărat”
aria-describedby = „{{formId}} - eroare de e-mail”
{% - endif -%}
>
{% - dacă form.errors conține „e-mail” -%}
<span id = „{{formId}} - email-error” class = „input-error-message” >
<span class = “visually-hidden” > {{'general.accessibility.error' | | t}} </span>
{% include „pictogramă-eroare”%}
<span> {{form.errors.translated_fields ['email'] | majuscule}} {{form.errors.messages ['email']}}. </span>
</span>
{% - endif -%}
</div>
</div>

<label for = “{{formId}} - order” class = “hidden-label” > Număr comandă: </label>
<input type = "text" id = "{{formId}} - order" name = "contact [order]" placeholder = "# 1234" >

<etichetă pentru = “{{formId}} - telefon” > {{'contact.form.phone' | | t}} </label>
<input type = “tel” id = “{{formId}} - phone” name = “contact [phone]” pattern = “[0-9 \ -] *” >

<etichetă pentru = „{{formId}} - mesaj” > {{'contact.form.message' | | t}} <span aria-hidden = “true” > * </span> </label>
<textarea required lines = “10” id = “{{formId}} - message” name = “contact [body]” > {% if form.body%} {{form.body}} {% endif%} </ textarea>

<input type = "submit" class = "btn" value = "{{'contact.form.submit' | t}} ” >

{% endform%}
</div>
</div>
</div>
</div>

Fragment de validare

Formularul nostru are o validare ușoară care îl va ajuta pe utilizator să știe dacă a greșit când a completat formularul. Acest cod se află într-un fișier separat de fragment de lichid numit form-status.liquid .

Reveniți în editorul de cod tematic și faceți clic și extindeți Fragmente . Apoi faceți clic pe Adăugați un fragment nou .

Denumiți-l starea formularului și apăsați Creați fragment .

Copiați și lipiți codul găsit aici în noul fragment și apăsați Salvare .

Creați o nouă pagină de contact

Apoi, înapoi în administratorul Shopify, faceți clic pe Magazin online > Pagini .

Apoi faceți clic pe butonul Adăugare pagină din partea dreaptă sus a ecranului. Alegeți un titlu și introduceți o descriere (opțional). Apoi, în partea din dreapta jos a ecranului, faceți clic pe meniul derulant de sub Sufix șablon și căutați noul șablon pe care tocmai l-am creat. Ar trebui să fie numit page.contact .

Acum, această nouă pagină va folosi codul pe care tocmai l-am lipit în noul nostru fișier șablon. Deci, dacă faceți modificări acolo, acesta se va reflecta doar pe paginile pe care le-ați selectat pentru a utiliza șablonul page.contact . După ce sunteți mulțumit de titlu și descriere, dați clic pe Salvați .

Acum, puteți previzualiza pagina făcând clic pe Vizualizare pagină din partea de sus.

Dar asteapta! Ce a însemnat tot acel cod?

Să învățăm puțin mai multe despre codul pe care l-am folosit, astfel încât să puteți face modificări sau modificări pe cont propriu, dacă aveți nevoie. Dacă doriți să descărcați sau să marcați codul, am creat un Gist aici, astfel încât să îl puteți copia și lipi cu ușurință.

Codul poate părea copleșitor, dar odată ce treceți peste toate declarațiile if, clase și alte atribute, este destul de simplu.

Principalele elemente de care aveți nevoie pentru ca un formular să capteze și să trimită corect datele sunt etichetele și câmpurile de intrare necesare care acceptă datele formularului.

Aruncați o privire asupra codului care surprinde numele clientului:

<etichetă pentru = „{{formId}} - nume” > {{'contact.form.name' | | t}} </label>
<input type = „text” id = „{{formId}} - name” name = „contact [name]” >

Necesită o etichetă și un element de intrare . Eticheta are un atribut for , care îl asociază (sau îl conectează) la un element de intrare corespunzător care are același id .

Textul dintre paranteze este ceea ce vor vedea clienții dvs. pe pagina de contact. Arată ca {{'contact.form.name' | | t}} deoarece folosește o etichetă dinamică care face trimitere la setările de limbă din administratorul Shopify.

Această zonă a administratorului ar putea fi nouă pentru dvs., dar aici trăiește tot textul care poate fi editat în Shopify. Unele dintre celelalte lucruri pe care le puteți edita aici sunt titlul Checkout sau textul de pe butonul „Plătiți acum”.

Pentru a edita eticheta „nume” pentru formularul nostru de contact, accesați Setări > Limbi magazin > Schimbați limba temei .

Faceți clic pe Contact în navigare.

Acum puteți vedea toate câmpurile pe care aveți acces să le utilizați în formularul nostru de contact.

Trimiterea unui e-mail de test

Reveniți la formularul dvs. de contact de pe site-ul dvs.web.com/pages/contact-us și încercați să trimiteți formularul. Dacă aveți succes, ar trebui să vedeți așa ceva pe ecran.

Apoi, ar trebui să primiți un e-mail care arată astfel:

Primă

Acum ați construit cu succes un formular de contact nativ pentru magazinul dvs. care are chiar și un câmp suplimentar pentru numărul de comandă! Adunând acest avans, economisiți dificultățile și timpul de a cere mai târziu. Acest lucru este deosebit de valoros pentru orice magazin cu clienți care repetă, care au multe comenzi și care s-ar putea referi la mai multe.

Concluzie

Sper că ați găsit acest tutorial valoros. Foloseam unul dintre acele instrumente terță parte despre care vorbeam la început pentru a aduna aceste informații și, deși sunt minunate, nu sunt integrate în vitrina dvs. și costă bani!