Shopifyストアで利用したいフォーム作成アプリ
商用利用するWebサイトの多くではユーザーと接点を持つ為にお問い合わせフォームなどフォーム機能を設けるケースが多々あります。
特にECサイトでは単なるお問い合わせだけでなくWeb上での接客（顧客とのコミュニケーション）で頻繁に利用されます。
しかし、フォームを一から自作しようと思うとHTML、CSS、JavaScriptによるデザイン適用だけでなくサーバーサイド言語を用いてシステム部分も構築することが一般的です。その為、技術的な知識がないと中々手を出しにくいというイメージをお持ちの方も多いのではないでしょうか？
この記事で紹介するPOWrのフォーム作成サービスはShopifyサイトでのフォーム作成を GUI （ グラフィカルユーザインターフェース ）で行うことができる非常に便利なアプリ（プラグイン）です。
アプリの設定方法
まずは以下アプリをShopifyサイトへインストールします。無料プランから利用することができるので気軽に試すことができます。
Shopify管理画面の「アプリ管理」からインストールしたアプリ 「Contact Form 」を選択し、アプリの管理画面を立ち上げます。
次のようにフォーム作成画面が表示されたらフォームを作成していきましょう。画面左上でフォームの名称を設定できるので利用用途に応じて変更してください。次に「テンプレートへ進む」を選択します。
注意: アプリ管理画面内の言語は日本語で表示されますが、自動翻訳されているようなので所々日本語のおかしい箇所があります。また星マークがついている項目は有料プランでのみ利用できる機能になります。
「形」 と表示されている項目ではフォームに必要な要素の追加削除やテキストの編集を行うことができます。「要素を追加」からフォーム要素の追加を行うことができまるので試しに入れてみましょう。
ここではプレゼントキャンペーン用のアンケートフォームを作成してみました。表示させたい項目を調整することができたら、「設定」でフォームの通知や期間設定などを行います。
「通知」の「フォーム管理者へのEメール」ではフォーム送信された際の通知先を設定することができます。
「提出行動」ではフォーム入力後の画面設定などを行うことができます。
「統合」ではフォームで入力された情報のサービス間連携やreCAPTCHAの設定をすることができます。情報の連携先にはGoogleスプレッドシートやメールマーケティングで人気のアプリ Klaviyoなどがあります。
「支払い」ではフォーム経由で決済を行えるようにする設定が用意されています。
「設計」ではフォームのボタン色やレイアウト、アニメーション設定などを行うことができます。
ここまで調整ができたら「サイトに追加」ボタンを押下してフォームの設置箇所などを設定します。ページ単位で選択することもできますが、今回は任意の場所に汎用性を持たせて設置したいので埋め込み用のタグをコピーして利用したいと思います。
埋め込み用コードのコピーができたらShopify管理画面の「ページ」から新たにキャンペーン用ページを作成し、「コンテンツ」部分に先ほどコピーした埋め込みコードを貼り付けます。この際 ”<>” ボタンでHTMLを入力できるようにしてから貼り付けてください。
貼り付けが完了したら「ページを見る」で表示の確認をしてみましょう。
利用できる機能にはベータ版もいくつかありますので、実際に利用される際はフォーム入力のテストをして問題がないか事前に検証することをおすすめします。
まとめ
Shopifyサイトでは上手くアプリ（プラグイン）を利用することで機能の実装工数を抑え、ビジネスで本来力を注ぐべき箇所にリソースを投下できます。本記事で紹介したアプリの他にも様々な拡張機能が存在しますので利用したい機能があればまずShopifyアプリストアで検索してみてください。
