如何將聯繫表格添加到您的 Shopify 商店

客戶服務可能是您業務中最具挑戰性的部分之一，但沒有滿意的客戶，您就沒有業務。 這就是為什麼將客戶體驗作為您的首要任務之一至關重要，而您的客戶與您溝通的方式也是這種體驗的一部分。

許多企業使用諸如 Intercom 或 ZenDesk 之類的幫助台工具，但這可能超出了您現在的需要。

如果您的 Shopify 主題還沒有聯繫表，或者您正在使用 Typeform、Google Forms 或 Wufoo 等第三方工具或想要簡化一些事情，您可以直接在 Shopify 中製作自己的簡單聯繫表.

就本教程而言，我將假設您的商店沒有表單，並且在本教程結束時，您將擁有接受客戶信息的內容，如下所示：

開始之前：複製您的主題

登錄您的 Shopify 儀表板並轉到在線商店>主題。 找到您的實時主題並單擊“操作”下拉菜單，然後單擊“複製” 。

複製後，再次單擊“操作”菜單，然後單擊“編輯代碼” 。

讓我們建立一個聯繫表格！

我們需要兩個東西才能讓我們的聯繫表單工作：一個新的模板文件來保存我們的代碼，以及我們商店中的一個新頁面。

創建新模板文件

現在您已進入代碼編輯器，請在文件夾樹中查看屏幕左側，然後單擊並展開Templates 。 然後單擊添加新模板鏈接。

然後從第一個下拉列表中選擇Page並將其命名為Contact 。 然後點擊創建模板按鈕。

複製並粘貼我們的代碼

這是我們構建聯繫表單所需的所有代碼。

將以下代碼塊複製並粘貼到您的新文件中，然後點擊“保存”按鈕。

<div class= "page-width" >
<div class= "grid" >
<div class= "grid__item medium-up–六分之五中上–push-12th" >
<div class= "section-header text-center" >
<h1> {{ page.title }} </h1>
</div>

{% 如果 page.content.size > 0 %}
<div class= "rte" >
{{ 頁面內容}}
</div>
{％ 萬一 ％}

<div class= "contact-form form-vertical" >
{%- 分配 formId = 'ContactForm' -%}
{% 表單 '聯繫人', id: formId %}
{% 包含 'form-status', form_id: formId %}

<div class= "grid grid-half-gutters" >
<div class= "grid__item medium-up-half-half" >
<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-half-half" >
<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' -%}
類= “輸入錯誤”
詠嘆調無效= “真”
aria-描述的 = “{{ formId }}-email-error”
{％- 萬一 -％}
>
{%- 如果 form.errors 包含 'email' -%}
<span id= "{{ formId}}-email-error" class= "input-error-message" >
<span class= "visually-hidden" > {{ 'general.accessibility.error' | t }} </span>
{% 包含“圖標錯誤”%}
<span> {{ form.errors.translated_fields['email'] | 大寫 }} {{ form.errors.messages['email'] }}。 </span>
</span>
{％- 萬一 -％}
</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 }}-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 %} </文本區域>

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

{% 尾形 %}
</div>
</div>
</div>
</div>

驗證片段

我們的表單中有一些簡單的驗證，這將幫助用戶知道他們在填寫表單時是否犯了錯誤。 此代碼位於名為form-status.liquid的單獨液體片段文件中。

返回主題代碼編輯器並單擊並展開Snippets 。 然後單擊添加新代碼段。

將其命名為form-status並點擊Create snippet 。

將此處找到的代碼複製並粘貼到新代碼段中，然後點擊Save 。

創建新的聯繫人頁面

接下來，返回 Shopify 後台，單擊Online Store > Pages 。

然後單擊屏幕右上角的添加頁面按鈕。 選擇標題並輸入描述（可選）。 然後在屏幕的右下方，單擊Template Suffix下的下拉列表並查找我們剛剛創建的新模板。 它應該被稱為page.contact 。

現在，這個新頁面將使用我們剛剛粘貼到新模板文件中的代碼。 因此，如果您在那裡進行更改，它只會反映在您選擇使用模板page.contact 的頁面上。 對標題和描述感到滿意後，點擊保存。

現在，您可以通過單擊頂部的查看頁面來預覽頁面。

可是等等！ 所有這些代碼是什麼意思？

讓我們進一步了解我們使用的代碼，以便您可以根據需要自行進行編輯或更改。 如果您想下載代碼或為代碼添加書籤，我在此處創建了一個 Gist，以便您可以輕鬆地複制和粘貼它。

代碼可能看起來很繁重，但是一旦您瀏覽了所有 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上的聯繫表格並嘗試提交表格。 如果您成功了，您應該會在屏幕上看到類似的內容。

然後您應該會收到一封如下所示的電子郵件：

獎金

現在您已經成功地為您的商店構建了一個本地聯繫表單，其中甚至還有一個額外的訂單號字段！ 通過預先收集這些信息，您可以節省以後必須要求的麻煩和時間。 這對於任何擁有許多訂單且可能涉及多個訂單的回頭客的商店尤其有價值。

結論

我希望您發現本教程很有價值。 我曾經使用我在開始時談到的第三方工具之一來收集這些信息，雖然它們很棒，但它們並未集成到您的店面中，而且要花錢！