Shopifyの問い合わせフォーム:メモ

Cat WEBサイト構築Tag by cubismer
窓辺

個人的なメモです。

英語圏の情報を探すとほぼ確実にあとで探しにくくなるので、こうしてリンク付きのリストとして残したいと思います。

全般

問い合わせフォーム

問い合わせフォームに関して。

デフォルトのフォーム(page.contact.liquidなど)で受けた内容の送信先

管理画面左下の歯車アイコンの「設定」の「お客様のメールアドレス」に送信される(たぶん)

複数の送信先を設定することは可能(未確認/転送メールアドレスを追加することで対応可能)

場合わけして別々の送り先に送信することはできない

自動返信機能は無い。

複数の問い合わせフォームの設置

1ページに複数設置はできない(たぶん/Ajaxの関係?)。
デフォルトのフォームを複数作り、それぞれ別の送信先を設定するなどもできない。

デフォルト以外のフォームが必要な場合、アプリかWufooやJotformのようなサービスの利用が推奨されている。

古い情報を見る

Form用APP

Free Contact Form

Freeプランではポップアップとバブル(右下Fixed)しか選択できず、埋め込みは有料プランでないとできない。
セッティングなどはFree Contact Formのサイトに移動してそちらで行う。Shopifyに戻るボタンはない？

複数設置可。個別に送信先設定可。

Made by Powerful Contact Form Builde

Made by Powerful Contact Form Builderの一文挿入が気になる。このappを作成したGloboに問い合わせたところ、以下の回答(意訳)を得る。

  • 消してはだめ。消すための有料プランもない。

問題の文言に続く要素にネガティブマージンをつけることで上に移動させ、文言を消していた事例をたまたま見つけたが真似しないこと。
設置ページにアクセス時、一瞬ショートコードのまま表示されてからフォームに書き換わる、という動作になるのも気になる。
セッティングなどはMade by Powerful Contact Form Buildeのサイトに移動してそちらで行う。

複数設置可。個別に送信先設定可。SMTPも個別に設定可能で設定推奨。

Form Builder with File Upload

iframeによるフォームが出力される。そのせいか送信後にフレーム内の高さが変わってスクロールが発生する模様。そのせいで見栄えがよろしくない。他で発生していないならテーマのCSSや構造に原因がある可能性あり。
設定はSopifyの管理画面内のまま進められる。

送信元にinfo@hulkapps.comと表示されるが、これはProにして送信ドメインをカスタムできるようにする必要がある模様。

複数設置可。個別に送信先設定可。

Contact Us Form with Captcha

インストールするとAPPの名前が「Simple Contact Us Form」になる。なぜ…。

複数設置はできても、個別に送信元を設定できない。

問い合わせフォームの管理画面が各アプリの制作元のサイトに存在する場合、個人情報など扱い的に問題はないのだろうか？という点が少し気になりました。
ただこれはWufooなどのサービスでも同様なので気にしないでよいのかも…。

調べた3つとも微妙に使いづらい部分が一つはある感じです。

なお、Gmailで受信確認すると、送信元に「info@hulkapps.com sparkpostmail.com」や「info@globosoftware.net」も表示されますが、これはアプリ経由での送信のため各サービスのサーバーを利用しているから(のはず)。

これが困るなら、Powerful Contact Form BuildeのようにSMTP設定機能のあるアプリを選ぶか、有料プランにグレードをあげて独自に設定する必要がある(はず)。

フォームサービス

JotForm

フリープランは「100通(月)/100MB/5Forms/1,000View(月)」などの設定で、ビジネスでは辛い。下部にJotFormを勧める広告もつく。

WUFOO

基本的に根幹部分はJotFormと似た感じだが、プランごとの違いはもっと細かい。

流石に都合よく無料で使えるものではないので、これらを使うなら月間でのランニングコスト上昇は必須と考えた方がよいです。

page.contactを使った問い合わせフォーム

厳密には{% form %}のループを使ったお問い合わせフォームですが、これはおそらく大抵のテーマにpage.contactテンプレートとして存在すると思われます。

このフォームは以下のような動作をします。

  1. 問い合わせページ表示
    テンプレート:page.contact
    URL:myshop.com/pages/問い合わせページハンドル
  2. 送信後にrecaptchaによるボタンが表示
    URL:myshop.com/caharenge
  3. 再び問い合わせページ表示
    テンプレート:page.contactテンプレートで表示
    URL:myshop.com/pages/問い合わせページハンドル?contact_posted=true

上記を踏まえると以下のようになります。

  • 送信後に元のページに戻る。つまり「問い合わせフォーム=送信完了ページ(サンクスページ)」となる
  • パラメーターの形で送信結果の可否が判断できる

送信完了後のカスタマイズ

{%- if form.posted_successfully? -%}を使えば、送信後に表示するパーツの作成ができます。


{% form 'contact', id: formId %}
  {% comment %}このformのループ内の上の方に記載する{% endcommnet %}
  {%- if form.posted_successfully? -%}
     成功した場合の文章
  {%- endif -%}
  formのパーツ
{% endform %}

別案として、以下のようにすることでフォーム自体を消してサンクスページのように見せることも考えられます。


{% form 'contact', id: formId %}
  {% comment %}このformのループ内の上の方に記載する{% endcommnet %}
  {%- if form.posted_successfully? -%}
     成功した場合の文章
  {%- else -%}
    formのパーツ
  {%- endif -%}
{% endform %}

参考


{% if form.posted_successfully? %}
    Comment posted successfully!
{% else %}
    {{ form.errors | default_errors }}
{% endif %}

問い合わせを含むフォームに関して

上記ページにてformタグを使った各種フォームの設定例が書かれています。以下が使用可能なタイプとのこと。Shopifyはこういった一覧が見つけ辛いか見つからないことが割とある印象なので助かります。

  • activate_customer_password
  • contact
  • currency
  • customer
  • create_customer
  • customer_address
  • customer_login
  • guest_login
  • new_comment
  • product
  • recover_customer_password
  • reset_customer_password
  • storefront_password

結び

流石に好き勝手さわれないのでどこをどうすれば良いのかの情報を探す必要があり時間がかかります。

アプリを作れるレベルなら好きにできそうなので、そういう方はアプリ作成から入った方が早いのかもしれません。

補足

英語圏で自動返信機能をもつアプリを探すときは以下のような語句を使うと探しやすいと思われます。

  • auto reply
  • autoresponder
  • auto-responder email

9人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄