商品ページ別の問い合わせフォームを作成、詳しくは商品ページのタイトルをクエリパラメータとして、リンク先のページ(問い合わせフォーム)に渡すという方法について解説いたします。
ユーザーが商品ページで購入を悩む理由はいくつかあります。
「予算と合わない」「送料が高い」など、価格にまつわる理由ももちろん多いと思いますが、詳細な説明や画像が不足していて、商品のイメージが湧かないなど、「商品情報が不足」も挙げられます。
運営するストアに商品について問い合わせができるような設計を施しておくと、コンバージョン率の向上が期待できます。
可能であれば、商品ページに「この商品についてスタッフに問い合わせする」というボタン(もしくはリンク)が設置されていると、わざわざ商品タイトルを控えて問い合わせページに移動する手間が省けます。
今回は、商品ページ別の問い合わせフォームを作成について考察してみたいと思います。
こんなイメージ
例えば、「包丁」を扱う専門ストアを訪れたユーザーは、購入前に以下のような疑問を抱えるでしょう。
「ステンレス製と炭素鋼製の違いが分からない」
「切れ味がどれくらい持続するの？」
「初心者にはどれが最適か分からない」
このようなユーザーのために、ページの右下には「この商品についてスタッフに問い合わせする」というボタンが設置されています。
ユーザーがそのボタンをクリックすると、問い合わせフォームに遷移しますが、フォームの上には「〇〇包丁(商品タイトル)の購入をご検討いただきありがとうございます。質問をどうぞ」というテキストが綴られています。
ユーザーが質問を書き込んで送信ボタンを押すと、ストア側に商品タイトルと問い合わせ内容がメールで届くというイメージです。
クエリパラメータで商品タイトルを渡す
各商品専用の問い合わせフォームをすべて作成する必要はありません。
商品ページのタイトルをクエリパラメータとして、リンク先のページ(問い合わせフォーム)に渡すという方法になります。
問い合わせフォームへのリンク
以下は、商品ページに設置する問い合わせフォーム（ストアURL/contact）へのリンクのサンプルコードになります。
<a href="/contact?product_title={{ product.title | url_encode }}">
この商品についてスタッフに問い合わせする
</a>URLの後ろにあるクエリパラメータ?product_title={{ product.title | url_encode }}で、商品のタイトルを取得しています。url_encodeは、フィルターは特殊文字をURLに適した形式に変換するLiquidのfilterです。
商品専用の問い合わせフォームを作る
次は、商品専用の問い合わせフォームの作成です。
問い合わせフォームを一から作るのは大変なので、Shopifyのデフォルトセクションである「contact-form.liquid」をコピペし、少しカスタマイズを加える事をおすすめします。（※ここでは便宜上「product-form.liquid」にします）
デフォルトの問い合わせとの違いは、
・商品ページから遷移したら、フォームの上に「商品タイトル」が自動挿入される
・ユーザーが送信をしたら、ストア運営者に「商品タイトル」が記載された問い合わせが届く
になります。
フォームの上に「商品タイトル」自動挿入
「product-form.liquid」に「商品タイトル」が自動挿入されるHTMLタグを設置します。
<div id="product-title"></div>次は、URLのクエリパラメータ(商品タイトル)を取得し、上記のHTMLタグにテキストを表示させるJavaScript(DOM操作)コードを設置します。
document.addEventListener('DOMContentLoaded', function() {
// URLのクエリパラメータを取得
const params = new URLSearchParams(window.location.search);
const productTitle = params.get('product_title');
// 商品タイトルがある場合
if (productTitle) {
// 商品タイトルをフォームに表示
const titleElement = document.getElementById('product-title');
if (titleElement) {
titleElement.textContent = `問い合わせする商品タイトル: ${decodeURIComponent(productTitle)}`;
}隠しフィールドを追加
次は、隠しフィールドの設置。ユーザーには見えないため、商品タイトルを自動入力させ、メールが届いたら、どの商品に関する問い合わせなのか確認するために設置します。
<input type="hidden" name="contact[商品タイトル]" id="hidden-product-title">以下は、このフィールドに商品タイトルを取得・入力するJavaScriptコードになります。
document.addEventListener('DOMContentLoaded', function() {
// URLのクエリパラメータを取得
const params = new URLSearchParams(window.location.search);
const productTitle = params.get('product_title');
// 商品タイトルを隠しフィールドに設定
const hiddenField = document.getElementById('hidden-product-title');
if (hiddenField && productTitle) {
hiddenField.value = decodeURIComponent(productTitle);
}
});こちらは、に「value」を追加するDOM操作になります。
これによりにHTML要素が変更され、ユーザーには見えませんが、商品タイトルが記載された問い合わせメールが届くようになります。
以上、商品ページ別の問い合わせフォームを作成、詳しくは商品ページのタイトルをクエリパラメータとして、リンク先のページ(問い合わせフォーム)に渡すという方法について解説いたしました。
ぜひご活用ください！
追記
タイトルの中に「%」「$」など特殊文字が入っていたら、上手く動作しない場合があります。その時は、Jsのtry～catch文でだいたいは解決できると思います。
