【HTML不要】Shopifyでのお問い合わせフォームのカスタマイズ方法

Shopify(ショッピファイ)でストアを構築している方の中には、

• Shopifyのお問い合わせフォームに項目を追加したい
• ストアとフォームの世界観を統一させたい
• 日本人が入力しやすいフォームへ簡単にカスタマイズしたい

と思っている方が多いと思います。

ただし、カスタマイズにはHTMLの編集が必要だったり、日本語対応していないアプリが多いことから、エンジニアや外部企業にフォームの作成を依頼している方も多いのではないでしょうか。

そこで今回は、2021年2月にリリースした日本初のフォーム作成アプリ『formrun(フォームラン)』についてご紹介します。HTMLやCSSを編集することなく簡単にデザイン性の高い日本語/英語対応フォームを作成できるので、ぜひご利用ください。

Shopifyでのフォームの作成・カスタマイズ方法

まず、Shopifyのデフォルトのフォーム作成・カスタマイズ方法を紹介します。Shopify「オンラインストア>ページ>ページを追加」より、下記の画面に遷移し、テンプレートを「page.contact」に設定します。

*この設定では、「名前」「Eメール」「電話番号」「メッセージ」しか表示されません。*そのため、カスタマイズを行いたい場合は「オンラインストア>テーマ>アクション>コードを編集する」より、Liquidの編集をする必要があります。

ただ、HTMLやCSSの知識が必要となるため、エンジニアやデザイナーがいないと、フォームをカスタマイズするのは難しいです。

そこで次に、日本初のフォーム作成アプリ「formrun」にてHTML・CSSの編集なしに簡単にデザイン性の高いフォームを作成する方法をご紹介します。

ノーコードフォーム作成ツール「formrun」でできること

formrunの活用例

クリック操作だけでエンジニア・デザイナー要らずで簡単にデザイン性の高いフォームを作成でき、フォームからいただいた内容に対してformrunからメール送信することも可能です。

formrunでできること① フォームの作成・設置

formrunでは2種類のフォームを作成することが可能です。よりご自身の希望に沿ったフォームをお選びください。
※Shopify連携を行う場合は、クリエイターフォームをご利用ください

①クリエイターフォーム
40種のテンプレートから1つ選び、ドラッグ&ドロップの直感的な操作でデザイン性の高いフォームを誰でも簡単に作成できます。フォームの埋め込みも可能です。

②コード型フォーム
HTMLコードを入力/埋め込みを行うことで、必要なフォームを作成・公開できます。クリエイターフォームよりも拡張性に優れているため、フォームの入力項目やデザインを自由に設計することができます。

formrrunでできること② 顧客管理（メール送受信・進捗管理）

以下の3つをformrunで行うことができます。

• フォームの回答内容の確認
• 回答内容を踏まえたメール送信・受信
• 「未対応」「対応中」「対応完了」などの進捗管理

フォーム作成から顧客管理までをformrunだけで完結できるため、業務効率化を促進します。

formrrunでできること③ データ管理

フォームから回答内容はCSV形式やGoogleスプレッドシートに出力することが可能です（STARTERプラン以上）。
お問い合わせ内容を複数名で一覧で確認したい場合や、アンケートやキャンペーンの結果を確認したい場合は、ぜひご利用ください。

また、formrunとMailchimpを連携することで、一斉メール配信も可能です。これによりお問い合わせをした顧客を対象に、メールマーケティングを講じることが可能です。

その他、formrunと連携している外部ツールを確認したい方は、FAQ：外部連携ツール一覧をご確認ください。

ここからは実際にShopifyとformrunの連携方法を紹介していきます。
アカウント作成〜フォームの作成まで最短5分、Shopifyへのフォームの埋め込みも5分で終わるのでとても簡単ですよ！

手順1. アカウント作成〜チーム作成（3分）

① Shopifyアプリからformrunをインストールしましょう。

② 「アプリ管理」からformrunを選んだ後、「formrunサイトへ」からアカウントを作成しましょう。

③ チームを作成しましょう。

チームについての説明は、こちらをご確認ください。

④ フォームを作成しましょう。
フォームの詳しい作成方法は次項で説明します。

手順2. お問い合わせフォームの作成（最短30秒）

ほぼ全てのお客様が作成されるだろう「お問い合わせフォーム」の作成例をご紹介します。
手順2のフォーム作成は後からでも編集可能なので、とりあえず仮にフォームを作って手順3に進んでもOKです。

入力項目の設置

フォーム編集画面に遷移したら、入力項目を設置しましょう。

編集・設置をお勧めしたい項目は以下4つです。
①プレースホルダーの設定
プレースホルダー（＝フォームの記入欄に記述される、入力に関するヒントを示したテキスト）を設定することで、フォームご回答者様が回答しやすくなります。

②選択項目（ボタン）の編集
ドロップダウン形式にすることで、ファーストビューをすっきりさせることができます。もちろん、ラジオボタンの選択も可能です。

③条件分岐選択（BEGINNERプラン以上）
選択項目によって、次に表示する質問項目を変更することが可能です。

④スパム対策
スパム対策を行いたい場合は、フォームにreCAPTCHAを設定しましょう。

フォーム回答の内容が半角英字・数字・記号のみであった場合にボード画面に回答を表示させないスパム投稿フィルタの設定も可能です。

デザインの調整

ストアとフォームの世界観を統一させることで、より良い顧客体験を提供することができます。以下の3つを行い、デザイン性の高いフォームに仕上げましょう！

• カバー画像を変更する
• フォントや送信ボタン等のカラーを、ストアでよく使っているカラーにする
• レイアウトを変更する

詳細はFAQ：カバータブ・スタイルタブをご確認ください。

＋α 英語対応フォームの作成方法

Shopifyを活用されている方には、多言語で展開したい方も多いと思います。
formrunでは現在、日本語・英語対応フォームを作成することが可能です。

以下の2点を満たしている場合、フォーム回答者に英語表記のフォームが表示されます。

(1) フォーム回答者のブラウザ言語設定が英語
フォーム作成時に変更できない部分（必須/任意）は、エンドユーザーのブラウザの言語設定が英語の場合は英語表記となります。

(2)フォームの項目名をそれぞれ英語で入力する
フォーム作成時に変更できる部分（各項目や説明欄など）は、直接英語でご入力いただくことで英語表記となります。

手順3. Shopifyとformrunの連携（1分）

プラン変更/無料トライアル

Shopifyとformrunを連携するためには、BEGINNERプラン以上のプランへ変更が必要です。詳しい手順はFAQ：プラン変更方法をご確認ください。

使用感を確かめてから有料プランのご利用を検討したい方は、全ての有料プランを14日間無料でお試しいただける無料トライアルをご利用ください。

参考：formrun料金表

外部連携設定

設定画面「フォーム>外部連携設定>Shopify」より「連携する」をクリックし、API keyをコピーします。

Shopify「アプリ管理>formrun連携」に遷移し、先ほどコピーしたAPI keyを貼り付けます。これで連携は完了です。

手順4. お問い合わせフォームの設置（5分）

formrunで作成したフォームをShopifyに埋め込む方法をご紹介します。

Shopify画面より、「テーマセクションに埋め込み」をクリックします。

Shopify「アプリ管理>設定>テーマ選択」に自動遷移後、任意のテーマを選択してインストールします。

「オンラインストア>テーマ」の右上に表示される「カスタマイズ」をクリックします。

「セクションを追加する」をクリックします。

「formrun連携」の下にフォーム名が表示されるため、そちらにチェックを入れ、「選択する」をクリックします。

Shopifyの画面に戻り、「保存する」をクリックします。

formrunで作成したフォームが埋め込まれていることを確認できます。

フォーム設置後の使い方(お問い合わせ内容の確認)

フォームから回答があった内容は、formrunの「ボード画面」から確認できます。

ボード画面では、各お問い合わせの担当者や対応状況を確認できます。詳細は以下の記事をご参照ください。

参考：【顧客管理に便利な機能がたくさん】お問い合わせに役立つ6つのカード機能を徹底解説します

また、通知（メール/チャットツール）を設定することをお勧めします。通知設定を行うことのメリットは以下の2つです。

• formrunにログインしなくても回答を確認できる
• より迅速にお客様対応ができる

最後に：formrunを使って、簡単にデザイン性の高いフォームを作成しよう！

formrunを利用することでHTML・CSSの編集なしに、デザイン性の高いフォームを作成できます。エンジニアや外部に依頼するより、早く作成・改善ができるので、ぜひformrunを使ってみてください。