こんな方におすすめ
- Shopifyでお問い合わせフォームを簡単に作成したい
- Improved Contact Formの使い方を知りたい
注意ポイント
このアプリは2020年12月現在、日本語を入力しようとすると文字化けしてしまいます。
日本人向けに作成するときは注意してください
(もし文字化けしない方法をご存じでしたら教えてください...)
![](https://lumpgather.com/wp-content/themes/affinger5/images/no-img.png)
そうなのです、そのため海外に販売する際に利用すると良いと思います。
Improved Contact Formの説明
今回はShopifyで簡単にお問い合わせフォームを作成できる、「Improved Contact Form」を解説していきます。
Improved Contact Formはインストールと少しの設定で簡単にお問い合わせフォームやSNS、プロモーションのポップアップ画面を作成できます。
機能
機能は主に以下のようなものがあります。
- メール、プロモーション、お問い合わせフォームのポップアップ作成
- SNSバーの作成
- メール、プロモーションの上に追従するバーを作成
- お問い合わせページの作成
- 他のメールアプリとの連携
料金
料金は以下のようになっています。
![](https://lumpgather.com/wp-content/uploads/2020/12/no1-2-1024x408.png)
無料プランでも3つのコンタクトフォームか他のポップアップを作成できるため十分利用することができます。
Improved Contact Formの使い方
アプリインストール
まずはアプリをインストールしていきましょう。
アプリのインストール方法は下記記事にまとめてあるので参考にしてみてください。
検索窓に「Improved Contact Form」と入力すると出てくると思います。
インストールが完了すると下記ページに移動します。
![](https://lumpgather.com/wp-content/uploads/2020/12/no2-1-1024x489.png)
お問い合わせフォームのカスタマイズ
カスタマイズの前に、現在どうなっているか確認してみましょう。
先ほどの画像の真ん中らへんに、「Your Widgets」というところがあり、Improved Contact Formというのが追加されているのが分かります。
これはお問い合わせフォームのポップアップが追加されていると言うことです。
自分のショップのページの下の方を見てみると、ボタンが追加されていました。
![](https://lumpgather.com/wp-content/uploads/2020/12/no3-1-1024x111.png)
クリックするとこのようにお問い合わせフォームが出てきました
![](https://lumpgather.com/wp-content/uploads/2020/12/no4-1-1024x407.png)
それでは編集していきます。
下のところをクリックすると編集画面に移動します。
![](https://lumpgather.com/wp-content/uploads/2020/12/no5-1-1024x145.png)
ここでは文字の色や背景色を変更することができます。
![](https://lumpgather.com/wp-content/uploads/2020/12/no6-1-1024x451.png)
続いて「Fields」ではテキストやフォームの内容を変更できます。
![](https://lumpgather.com/wp-content/uploads/2020/12/no8-2-1024x294.png)
「Form Fields」のところでフォームの内容が変更できます。
どうやらmessageの部分は必須のようですね。
![](https://lumpgather.com/wp-content/uploads/2020/12/no7-1-1024x536.png)
私は下のように編集してみました。
![](https://lumpgather.com/wp-content/uploads/2020/12/no9-1-1024x421.png)
続いて、こちらでは表示するボタンをカスタマイズできます
![](https://lumpgather.com/wp-content/uploads/2020/12/no10-1-1024x359.png)
「When to Show」ではいつこのポップアップを表示するかを設定できます。
![](https://lumpgather.com/wp-content/themes/affinger5/images/no-img.png)
上から2番目にすると、ウェブサイトを訪れたときにも表示されます。プロモーションの時などに使うと便利ですね。
![](https://lumpgather.com/wp-content/uploads/2020/12/no11-1-1024x406.png)
How Often to Showではどのくらいの頻度で表示するかを設定できます。
![](https://lumpgather.com/wp-content/uploads/2020/12/no12-1-1024x376.png)
お問い合わせ内容の確認
お問い合わせがあった場合、確認はこちらに設定されたメールアドレス宛に届きます
![](https://lumpgather.com/wp-content/uploads/2021/03/Contact_Form-1024x323.png)
![](https://lumpgather.com/wp-content/uploads/2021/03/f2476e62c03d9986ac9a7c7f05736156-1024x809.png)
![](https://lumpgather.com/wp-content/themes/affinger5/images/no-img.png)
残念ながら、こちらのアプリでは送ることはできないようです...
お問い合わせページの作成
続いて、ポップアップだけだと不便なのでページも作成したいと思います。
My Contact Us Pageをクリックしてください。
![](https://lumpgather.com/wp-content/uploads/2020/12/no13-2-1024x524.png)
ここではお問い合わせページのカスタマイズができます(なぜかPreviewが表示されない...)
カスタマイズできるといっても中身は先ほどのポップアップで作成した状態のままで前後のデザインを左の枠にて設定できます。
(今回は省略します)
ページの表示方法は「/community/contact」にアクセスすると良い、と書いてあるので、それをメインメニューに追加します。
管理画面の「オンラインストア→メニュー」をクリックしてください。
そして下記のように設定します。
![](https://lumpgather.com/wp-content/uploads/2020/12/no14-1.png)
実際にショップのメニューから「お問い合わせ」をクリックすると、
![](https://lumpgather.com/wp-content/uploads/2020/12/no15-1-1024x373.png)
このように表示することができました。
デザインをカスタマイズします。
(デザインによって作業量が変わるためお見積もりを出させていただきます)
まとめ
簡単にお問い合わせフォームが作成できました!
他の機能もほとんど同じようにつけられるため、メールやプロモーション、SNSボタンを表示させたい方は是非これを参考に作成してみてください。
質問等ございましたらお問い合わせフォームよりよろしくお願いします。