Shopifyストアに連絡フォームを追加する方法

カスタマーサービスはあなたのビジネスの最も挑戦的な部分の1つである可能性がありますが、幸せな顧客がいなければ、あなたにはビジネスがありません。 そのため、カスタマーエクスペリエンスを最優先事項の1つにすることが重要であり、カスタマーとのコミュニケーション方法はすべてそのエクスペリエンスの一部です。

多くの企業がIntercomやZenDeskなどのヘルプデスクツールを利用していますが、それは今必要以上のものかもしれません。

Shopifyテーマにまだお問い合わせフォームがない場合、またはTypeform、Googleフォーム、Wufooなどのサードパーティツールを使用している場合、または少し単純化したい場合は、Shopifyで独自の簡単な連絡フォームを作成できます。 。

このチュートリアルのために、ストアにフォームがないと仮定します。このチュートリアルの終わりまでに、顧客情報を受け入れ、次のようなものができあがります。

始める前に：テーマのコピーを作成する

Shopifyダッシュボードにログインし、[オンラインストア] > [テーマ]に移動します。 ライブテーマを見つけて、[アクション]ドロップダウンメニューをクリックし、[複製]をクリックします。

重複したら、[アクション]メニューをもう一度クリックし、[コードの編集]をクリックします。

お問い合わせフォームを作成しましょう！

お問い合わせフォームを機能させるには、コードを保持するための新しいテンプレートファイルと、ストア内の新しいページの2つが必要になります。

新しいテンプレートファイルを作成する

コードエディタが表示されたので、フォルダツリーの画面の左側を見て、[テンプレート]をクリックして展開します。 次に、[新しいテンプレートの追加]リンクをクリックします。

次に、最初のドロップダウンから[ページ]を選択し、[連絡先]と呼びます。 次に、[テンプレートの作成]ボタンをクリックします。

コードをコピーして貼り付ける

お問い合わせフォームを作成するために必要なすべてのコードは次のとおりです。

次のコードブロックをコピーして新しいファイルに貼り付け、[保存]ボタンをクリックします。

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

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

<div class = “ contact-form form-vertical” >
{％-formId = 'ContactForm'-％}を割り当てます
{％form'contact '、id：formId％}
{％include'form-status '、form_id：formId％}

<div class = “ grid grid–half-gutters” >
<div class = “ grid__item medium-up–1 / 2” >
<label for = “ {{formId}}-name " > {{'contact.form.name' | t}} </ label>
<input type = “ text” id = “ {{formId}}-name” name = “ contact [name]” >
</ div>
<div class = “ grid__item medium-up–1 / 2” >
<label for = “ {{formId}}-email " > {{'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”
{％-form.errorsに「email」が含まれている場合-％}
class = “ input–error”
aria-invalid = “ true”
aria-describeby = “ {{formId}}-email-error”
{％-endif-％}
>>
{％-form.errorsに「email」が含まれている場合-％}
<span id = “ {{formId}}-email-error” class = “ input-error-message " >
<span class = “ Visually-hidden " > {{'general.accessibility.error' | t}} </ span>
{％include'icon-error '％}
<span> {{form.errors.translated_fields ['email'] | }} {{form.errors.messages ['email']}}を大文字にします。 </ span>
</ span>
{％-endif-％}
</ div>
</ div>

<label for = “ {{formId}}-order” class = “ hidden-label " >注文番号： </ label>
<input type = “ text” id = “ {{formId}}-order” name = “ contact [order]” placeholder = “＃1234 " >

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

<label for = “ {{formId}}-メッセージ " > {{'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％} </ textarea>

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

{％endform％}
</ div>
</ div>
</ div>
</ div>

検証スニペット

私たちのフォームには、フォームに入力するときに間違いを犯したかどうかをユーザーが知るのに役立つ簡単な検証が含まれています。 このコードは、 form-status.liquidと呼ばれる別の液体スニペットファイルにあります。

テーマコードエディター内に戻り、[スニペット]をクリックして展開します。 次に、[新しいスニペットを追加]をクリックします。

form-statusという名前を付け、[スニペットの作成]をクリックします。

ここにあるコードをコピーして新しいスニペットに貼り付け、[保存]をクリックします。

新しい連絡先ページを作成する

次に、Shopify管理者に戻り、[オンラインストア]> [ページ]をクリックします。

次に、画面の右上にある[ページの追加]ボタンをクリックします。 タイトルを選択し、説明を入力します（オプション）。 次に、画面の右下にある[テンプレートサフィックス]の下のドロップダウンをクリックして、作成したばかりの新しいテンプレートを探します。 page.contactと呼ばれる必要があります。

これで、この新しいページは、新しいテンプレートファイルに貼り付けたばかりのコードを使用します。 したがって、そこで変更を加えると、テンプレートpage.contactを使用するために選択したページにのみ反映されます。 タイトルと説明に満足したら、[保存]をクリックします。

これで、上部の[ページの表示]をクリックしてページをプレビューできます。

ちょっと待って！ そのすべてのコードはどういう意味でしたか？

必要に応じて自分で編集や変更を行えるように、使用したコードについてもう少し学びましょう。 コードをダウンロードまたはブックマークしたい場合は、ここに要点を作成して、簡単にコピーして貼り付けることができるようにしました。

コードは圧倒的に見えるかもしれませんが、すべてのifステートメント、クラス、およびその他の属性を確認すると、かなり基本的なものになります。

フォームがデータを適切にキャプチャして送信するために必要な主な要素は、フォームデータを受け入れるために必要なラベルと入力フィールドです。

顧客の名前をキャプチャするコードを見てください。

<label for = “ {{formId}}-name " > {{'contact.form.name' | t}} </ label>
<input type = “ text” id = “ {{formId}}-name” name = “ contact [name]” >

ラベルと入力要素が必要です。 ラベルにはfor属性があり、同じIDを共有する一致する入力要素にラベルを関連付け（または接続）します。

括弧内のテキストは、顧客が連絡先ページに表示するものです。 {{'contact.form.name' | T}}それはダイナミックタグを使用していますので、参照しているあなたのShopify管理内部の言語設定。

管理者のこの領域はあなたにとって新しいかもしれませんが、Shopify内で編集可能なすべてのテキストが存在する場所です。 ここで編集できるその他の項目には、チェックアウトのタイトル、または[今すぐ支払う]ボタンのテキストがあります。

お問い合わせフォームの「名前」ラベルを編集するには、 [設定] > [ストアの言語] > [テーマの言語を変更]に移動します。

ナビゲーションで[連絡先]をクリックします。

これで、お問い合わせフォーム内で使用できるすべてのフィールドを確認できます。

テストメールの送信

yourwebsite.com/pages/contact-usの連絡フォームに戻り、フォームを送信してみてください。 成功すると、画面に次のようなものが表示されます。

次に、次のような電子メールを受信する必要があります。

ボーナス

これで、注文番号用の追加フィールドもある、ストアのネイティブ連絡フォームが正常に作成されました。 これを前もって収集することで、後でそれを要求する手間と時間を節約できます。 これは、注文数が多く、複数の注文を参照している可能性のあるリピーターがいる店舗にとって特に価値があります。

結論

このチュートリアルがお役に立てば幸いです。 私はこの情報を収集するために最初に話したサードパーティのツールの1つを使用していましたが、それらは優れていますが、ストアフロントに統合されておらず、費用がかかります。