SIRIUS(シリウス)にお問合せページを設置しよう(フォームズ編)

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

お問合せページを設置しよう(フォームズ編)

サンプル画像

 

SIRIUS(シリウス)にはお問合せページを作る機能が備わってません。

 

そのため当サイトではこれまで無料のメールフォーム作成サービス「フォームメーラー」を使ってお問合せページを作成してました。

 

ところがある日、
「お問合せページの確認画面で文字化けが起きる」とのご指摘があり、
調べてみたところ確かに思いっきり文字化けしてるじゃないですか。

 

原因は、、、当サイトの文字コードを「UTF-8」に変えていたためでした。

 

SIRIUS(シリウス)でサイトを作ると
デフォルトの文字コードは「Shift-JIS」になります。

 

そのため文字コードが「Shift-JIS」しか選べない無料版の「フォームメーラー」でも
問題はなかったんです。

 

しかし異なる文字コードに変えてしまえば、、、文字化けが起きるのは当然ですね。

 

「フォームメーラー」も有料版にすれば「UTF-8」も使えるようになります。
しかし”それだけのために”毎月1,000円近く払うのはちょっと考え物です。

 

そこで代替策を探していたところ、
「フォームズ」というメールフォームサービスが
無料版でも「UTF-8」が使えることがわかりました。

 

さっそくそっちに鞍替えです。

実装(基本のフォーム作成)

フォームズを開き、
お問合せメールを受信したいメールアドレスを入力して
メールフォーム作成に進みます。

 

キャプチャ画像

 

フォームタイトルパスワードを設定します。(どちらもあとで変更可能)

 

その後、「同意して進む」をクリックします。
(テンプレートは”基本のフォーム”のままで問題なし)

 

パスワードは必ずメモしておきましょう。

 

キャプチャ画像

 

新規作成画面に変わるので、
左サイドメニュー最上段の「フォーム表示」をクリックします。

 

キャプチャ画像

 

現在の設定でのレイアウト画面が出ます。

何も編集しなくてもほぼこれで問題ないぐらいの出来ですね。

 

キャプチャ画像

 

この時点で一度、左サイドメニュー最下段の「フォーム保存」をクリックします。

 

次の画面で「保存する」をクリックすると、フォームIDが表示され、
記入したメールアドレスにも同じ内容のメールが届きます。

 

キャプチャ画像

 

フォームID自動振り分けURLは忘れずにメモしておきます。そしてことあるごとにフォーム保存をしておくとあとあと便利です。

というのも無意識にブラウザの戻る・進むボタンで前(後)ページに行っちゃう時があるんですが、フォームズの場合はそれをやるとそれまでの入力がすべて無効になっちゃうからです。

しかしフォームID&パスワードさえ覚えておけば最後の保存時の状態までは復元できます。

くれぐれも左サイドメニューの項目をクリックしてページ移動するようにしましょう。

 

ところでこれだけだとちょっと味気ないので
もう少し使いやすくしていきましょう。

実装(より使いやすくするカスタマイズ)

左サイドメニューの「フォーム基本情報」をクリックします。

 

出てきた画面で基本情報を細かく変更することができます。

左下のパラメータ変更をクリックします。

 

キャプチャ画像

 

タイトルやメールアドレス、トップページへ戻るボタンの表示・非表示などがカスタマズできます。
この辺はお好みで。

 

キャプチャ画像

 

要らない項目は削除することもできます。

 

たとえばサイドメニューの「こちらからメッセージをお送りください」をクリックするとテキストの変更ができますが、削除をクリックすれば項目自体を非表示にできます。

 

キャプチャ画像

 

「メッセージ」をもう少しカスタマイズしてみます。

 

左メニューから「メッセージ」をクリックし、さらにパラメータ変更をクリックします。

 

・入力必須を「いいえ」から「はい」に変更。

・タイトルを「メッセージ」から「お問合せ内容」に変更。

・プレースホルダーに「お問合せ内容を入力してください。」と入力。

 

「更新する」をクリックして確定すると、結果こんなふうに↓変わりました。

 

キャプチャ画像

 

プレースホルダーというのは項目内に予め記入されてるテキストのことです。

通常は薄いグレーで表示されます。

 

左サイドメニューの「項目の追加」をクリックすれば、
電話番号入力や選択型ラジオボタンなども追加できます。

 

試しに添付ファイルを追加してみます。

 

追加の反映後、サイドメニューに「添付ファイル」が出てくるので、
「添付ファイル」をクリック→パラメータ変更をクリックします。

 

”添付画像は非圧縮の1枚のみに制限”してみました。

こんな↓感じで設定できます。

 

キャプチャ画像

 

このほか、「順番並べ替え」で各項目の位置を変えることができます。

 

「デザイン設定」で好きなカラーやテーマを選べます。

 

「メール設定→投稿通知メール」のメール件名は、問い合わせがあった場合に
自分へのメールボックスに「どんな件名で届くか」を設定できます。

さらに文字コードはUTF-8になってることを確認します。

 

「条件設定」では、「もし○○なら○○を表示する」など
条件によって項目の表示・非表示などが設定できます。

(ただし無料版は2条件まで)

 

この条件設定はとても便利です。

 

たとえば通常のお問合せでは非表示だった項目が、サポートに関するお問合せなら新たに2つの入力項目(注文IDや購入日)が表示されるようになる設定とかが簡単にできちゃいます。

 

キャプチャ画像

 

他にもアクセス解析や注文フォームなども設定可能ですので、
必要な方は設置してみてください。

 

フォームが必要なくなったらフォーム削除で削除できます。

SIRIUS(シリウス)への設置

メールフォームの設定が終わったら(保存したら)、
いよいよSIRIUSのページ内に組み込む作業です。

 

こちら↓を開きます。

フォームの設置方法

(※フォームズのトップページからもイケます)

 

フォームURLには最初に発行してもらった「自動振り分けURL」を入力します。

 

そして「タグ生成」をクリックすると
すぐ下のフォーム設置HTMLタグにあなた専用のタグが表示されます。

 

キャプチャ画像

 

上のHTMLタグをお問合せページにコピペすれば
お問合せメールフォームの完成です。

(注:デザインモードではなくテキストモードで入力してね)

 

最終的にはコチラ(当サイトのお問合せページ)で確認できます。

 

購入ページへ


てっぺん