So fügen Sie Ihrem Shopify Store ein Kontaktformular hinzu

Kundenservice kann einer der schwierigsten Bereiche Ihres Geschäfts sein, aber ohne zufriedene Kunden haben Sie kein Geschäft. Aus diesem Grund ist es wichtig, das Kundenerlebnis zu einer Ihrer obersten Prioritäten zu machen, und die Art und Weise, wie Ihre Kunden mit Ihnen kommunizieren, ist Teil dieses Erlebnisses.

Viele Unternehmen verwenden Helpdesk-Tools wie Intercom oder ZenDesk, aber das ist möglicherweise mehr, als Sie derzeit benötigen.

Wenn Ihr Shopify-Theme noch kein Kontaktformular hat oder Sie ein Drittanbieter-Tool wie Typeform, Google Forms oder Wufoo verwenden oder die Dinge ein wenig vereinfachen möchten, können Sie Ihr eigenes einfaches Kontaktformular direkt in Shopify erstellen .

Für dieses Tutorial gehe ich davon aus, dass Ihr Geschäft kein Formular hat und am Ende dieses Tutorials haben Sie etwas, das Kundeninformationen akzeptiert und ungefähr so ​​​​aussieht:

Bevor wir beginnen: Machen Sie eine Kopie Ihres Themes

Melden Sie sich bei Ihrem Shopify-Dashboard an und gehen Sie zu Online Store > Themes . Suchen Sie Ihr Live-Theme und klicken Sie auf das Dropdown-Menü Aktionen und klicken Sie auf Duplizieren .

Klicken Sie nach der Duplizierung erneut auf das Menü Aktionen und dann auf Code bearbeiten .

Lassen Sie uns ein Kontaktformular erstellen!

Damit unser Kontaktformular funktioniert, benötigen wir zwei Dinge: Eine neue Vorlagendatei für unseren Code und eine neue Seite in unserem Shop.

Erstellen Sie eine neue Vorlagendatei

Nachdem Sie nun im Code-Editor gelandet sind, sehen Sie in Ihrem Ordnerbaum auf der linken Seite des Bildschirms nach und klicken und erweitern Sie Vorlagen . Klicken Sie dann auf den Link Neue Vorlage hinzufügen.

Wählen Sie dann Seite aus der ersten Dropdown-Liste und nennen Sie sie Kontakt . Klicken Sie dann auf die Schaltfläche Vorlage erstellen .

Kopieren Sie unseren Code und fügen Sie ihn ein

Hier ist der gesamte Code, den wir zum Erstellen unseres Kontaktformulars benötigen.

Kopieren Sie den folgenden Codeblock, fügen Sie ihn in Ihre neue Datei ein und klicken Sie auf die Schaltfläche Speichern .

<div class= “page-width” >
<div class= “grid” >
<div class= „grid__item mittelhoch–fünfsechstel mittelhoch–schieben-einszwölftel“ >
<div class= "Abschnittsüberschrift Textzentrum" >
<h1> {{ page.title }} </h1>
</div>

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

<div class= „Kontaktformular-Vertikal“ >
{%- formId zuweisen = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form_id: formId %}

<div class= „grid grid – half-rinnen“ >
<div class= „grid__item medium-up–one-half“ >
<label for= "{{ formId }}-name" > {{ 'contact.form.name' | t }} </label>
< eingabetyp = „text“ id= „{{ formId }}-name“ name= „kontakt[name]“ >
</div>
<div class= „grid__item medium-up–one-half“ >
<label for= "{{ formId }}-email" > {{ 'contact.form.email' | t }} <span aria-hidden= „true“ > * </span></label>
<input type = erforderlich „E - Mail“ id = „{{formid}} - e - mail“ name = „contact [email]“ autocorrect = „off“ autocapitalize = „off“ aria-required = „true“
{%- if form.errors enthält 'email' -%}
class= “Eingabe–Fehler”
aria-ungültig = "wahr"
aria-beschriebenby= "{{ formId }}-E-Mail-Fehler"
{%- endif -%}
>
{%- if form.errors enthält 'email' -%}
<span id= „{{ formId}}-email-error“ class= „input-error-message“ >
<span class= „visuell versteckt“ > {{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span> {{ form.errors.translated_fields['email'] | großschreiben }} {{ form.errors.messages['email'] }}. </span>
</span>
{%- endif -%}
</div>
</div>

<label for= „{{ formId }}-order“ class= „hidden-label“ > Bestellnummer : </label>
<input type= „text“ id= „{{ formId }}-order“ name= „contact[order]“ placeholder= „#1234“ >

<label for= "{{ formId }}-phone" > {{ 'contact.form.phone' | t }} </label>
<Eingabetyp= „tel“ id= „{{ formId }}-phone“ name= „contact[phone]“ pattern= „[0-9\-]*“ >

<label for= "{{ formId }}-message" > {{ 'contact.form.message' | t }} <span aria-hidden= „true“ > * </span></label>
<textarea required rows = „10“ id= „{{ formId }}-message“ name= „contact[body]“ > {% if form.body %}{{ form.body }}{% endif %} </ Textbereich>

<Eingabetyp = „submit “ class= „btn“ value= „{{ 'contact.form.submit' | t }}” >

{% Endform %}
</div>
</div>
</div>
</div>

Validierungs-Snippet

Unser Formular enthält eine leichte Validierung, die dem Benutzer hilft, zu erkennen, ob er beim Ausfüllen des Formulars einen Fehler gemacht hat. Dieser Code befindet sich in einer separaten Liquid-Snippet-Datei namens form-status.liquid .

Gehen Sie zurück in Ihren Theme-Code-Editor und klicken und erweitern Sie Snippets . Klicken Sie dann auf Neues Snippet hinzufügen .

Nennen Sie es form-status und klicken Sie auf Schnipsel erstellen .

Kopieren Sie den hier gefundenen Code, fügen Sie ihn in das neue Snippet ein und klicken Sie auf Speichern .

Erstellen Sie eine neue Kontaktseite

Klicken Sie anschließend im Shopify-Adminbereich auf Online Store > Pages .

Klicken Sie dann oben rechts auf Ihrem Bildschirm auf die Schaltfläche Seite hinzufügen. Wählen Sie einen Titel und geben Sie eine Beschreibung ein (optional). Klicken Sie dann unten rechts auf dem Bildschirm auf das Dropdown-Menü unter Vorlagen-Suffix und suchen Sie nach der neuen Vorlage, die wir gerade erstellt haben. Es sollte page.contact heißen.

Diese neue Seite verwendet nun den Code, den wir gerade in unsere neue Vorlagendatei eingefügt haben. Wenn Sie also dort Änderungen vornehmen, werden nur die Seiten berücksichtigt, die Sie für die Verwendung der Vorlage page.contact ausgewählt haben . Wenn Sie mit dem Titel und der Beschreibung zufrieden sind, klicken Sie auf Speichern .

Jetzt können Sie eine Vorschau der Seite , indem Sie auf Ansicht Seite an der Spitze.

Aber warte! Was bedeutete all dieser Code?

Lassen Sie uns ein wenig mehr über den von uns verwendeten Code erfahren, damit Sie bei Bedarf selbst Änderungen oder Änderungen vornehmen können. Wenn Sie den Code herunterladen oder mit einem Lesezeichen versehen möchten, habe ich hier eine Gist erstellt, damit Sie ihn einfach kopieren und einfügen können.

Der Code sieht vielleicht überwältigend aus, aber wenn Sie einmal über all die if-Anweisungen, Klassen und anderen Attribute hinwegsehen, ist er ziemlich einfach.

Die wichtigsten Elemente, die Sie für ein Formular zum korrekten Erfassen und Senden von Daten benötigen, sind die erforderlichen Beschriftungen und Eingabefelder, die die Formulardaten akzeptieren.

Sehen Sie sich den Code an, der den Namen des Kunden erfasst:

<label for= "{{ formId }}-name" > {{ 'contact.form.name' | t }} </label>
< eingabetyp = „text“ id= „{{ formId }}-name“ name= „kontakt[name]“ >

Es erfordert ein Label und ein Eingabeelement . Das Label hat ein for- Attribut, das es mit einem übereinstimmenden Eingabeelement mit derselben ID verknüpft (oder verbindet).

Der Text zwischen den Klammern wird Ihren Kunden auf der Kontaktseite angezeigt. Es sieht aus wie {{ 'contact.form.name' | t }}, da es ein dynamisches Tag verwendet, das auf die Spracheinstellungen in Ihrem Shopify-Adminbereich verweist.

Dieser Bereich des Administrators ist möglicherweise neu für Sie, aber hier befindet sich der gesamte Text, der in Shopify bearbeitet werden kann. Einige der anderen Dinge, die Sie hier bearbeiten können, sind der Titel der Kasse oder der Text auf Ihrer Schaltfläche "Jetzt bezahlen".

Um das Label „Name“ für unser Kontaktformular zu bearbeiten, gehen Sie zu Einstellungen > Store-Sprachen > Designsprache ändern .

Klicken Sie in der Navigation auf Kontakt .

Jetzt können Sie alle Felder sehen, auf die Sie in unserem Kontaktformular zugreifen können.

Senden einer Test-E-Mail

Gehen Sie zurück zu Ihrem Kontaktformular unter yourwebsite.com/pages/contact-us und versuchen Sie, das Formular abzusenden . Wenn Sie erfolgreich sind, sollten Sie so etwas auf dem Bildschirm sehen.

Dann sollten Sie eine E-Mail erhalten, die wie folgt aussieht:

Bonus

Jetzt haben Sie erfolgreich ein natives Kontaktformular für Ihren Shop aufgebaut, das sogar ein zusätzliches Feld für die Bestellnummer enthält! Indem Sie dies im Voraus sammeln, sparen Sie sich die Mühe und Zeit, später danach fragen zu müssen. Dies ist besonders wertvoll für Geschäfte mit Stammkunden, die viele Bestellungen haben und sich auf mehr als eine beziehen könnten.

Abschluss

Ich hoffe, Sie fanden dieses Tutorial wertvoll. Ich habe früher eines dieser Drittanbieter-Tools verwendet, von denen ich anfangs gesprochen habe, um diese Informationen zu sammeln, und obwohl sie großartig sind, sind sie nicht in Ihr Schaufenster integriert und kosten Geld!