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

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

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

サンプル画像

 

可能な限りサイトには『お問合せ』ページを設置しておくことをおススメします。

 

理由は 2つ。

サイトの信頼性の向上サイト訪問者とのつながりです。

 

お問合せページ(やサイト運営人のプロフィールなど)があることで
訪問者はそのサイトに対して信頼を置くようになります。

 

またお問合せページ経由でサイト訪問者とのつながりが増えたり
信頼が強化されることもあります。

 

少しでもサイトを知ってほしい、信頼してほしいと思うのなら、
面倒くさいと思わずお問合せフォームページぐらいは設置しておきましょう。

 

しか~し、残念なことに
シリウスには問合せページを作る機能が備わってませ~ん!

 

ぢゃぁどうするの?って話なんですが、
自分が契約しているレンタルサーバーのCGIを利用したり
無料のメールフォーム作成サービスを利用したりと方法はいくつかあります。

 

実は当サイトのお問合せフォームページも
無料のメールフォーム作成サービスを利用して設置してます。

 

ページの下端にロゴが出てるのですぐにわかると思いますが、
利用しているのは「フォームメーラー」というサービスです。

 

フォームメーラーのメリットとしては
HTMLやCGIの知識なしでもすぐに設置できるということ、
無料版でもSSL暗号化通信に対応しているということです。

 

利用者も多いのでご存知の方もいるでしょう。

 

ただそのままだと「フォームメーラー」のお問合せページに飛ばされて
レイアウトデザインが一変しちゃうので、
別サイトへ「飛ばされた」感がハンパないものになります。

 

その「飛ばされた」感を少しでも軽減するため
当サイトではシリウスのページ内に組み込んで表示させてます。

(仕様上、確認画面では必ずフォームメーラーのサイトに切り替わります)

 

ということで、今回はこのフォームメーラーを利用しての
シリウスのページ内へのお問合せページ設置方法をご紹介します。

 

追記:2017.1.23

Free版の対応文字コードは「Shift-JIS」のみです。

シリウスをデフォルトの状態で使っていれば問題ないですが、「UTF-8」などに変更している場合は文字化けが起きる可能性があります。

当サイトも以前は「Shift-JIS」だったのですが現在は全面「UTF-8」に変更しており、そのため文字化けが起きて”フォームメーラー”の使用は断念しました。

代わりに”フォームズ”という別の無料フォームメールサービスを使ってお問合せページに設置してます。

お問合せフォームの設置(コード取得まで)

今回は簡単なメールフォームの設置だけですのでフォームメーラー無料版で充分です。

 

フォームメーラーにログインし、Free版(無料)に新規登録します。

(登録方法はここでは解説しません。説明に従って登録を完了させてください)

 

ログインしたら”一般フォーム作成”をクリックしてフォーム名を入力します。

(後でも変更可能)

 

キャプチャ画像

 

入力項目編集

入力項目がずら~と出ます。でも使うのはほんのわずか。

 

各項目にマウスオンすると背景色が黄色に変わり、クリックすると編集画面になります。

 

必要ないのは×ボタンで削除しちゃいましょう。

 

キャプチャ画像

 

右画面一番上の『お問合せフォーム』と書かれたブロックにマウスを乗せると色が変わるのでクリックします。

 

下の画像のような編集画面がポップアップしたら”フォーム説明”を入力しておきます。

 

何もないのも失礼なので何か一言書いておきましょう。

(シリウスのページに埋め込む場合は空欄でも構いません。どうせ後で書くことになるので)

 

キャプチャ画像

 

項目の追加と削除を繰り返して最終的にはこんな↓感じになります。

 

キャプチャ画像

 

それぞれ編集画面で項目名や必須項目の設定を済ませます。

 

キャプチャ画像

 

環境設定

 

公開設定・受付期間

公開設定では公開したい機器にチェックを入れます。
最低でもPCは「公開する」にしておきます。

 

受付期間はデフォルトのままでいいでしょう。

 

キャプチャ画像

 

各種画面設定

シリウスページで表示するのであれば
『入力画面設定』は「外部サイトに設置する」を選択します。

 

問合せ内容入力後の確認画面を出したいときは
『入力内容確認画面設定』で「表示する」を選択します。

(この確認画面自体は必ずフォームメーラーのサイトページに切り替わります)

 

ここで表示しないを選ぶと、
フォームメーラーの確認画面サイトには飛ばずいきなり送信になります。

(エラーがあった場合はフォームメーラーの画面になりますが)

 

キャプチャ画像

 

ちなみにこちらがフォームメーラーの確認画面です。

キャプチャ画像

 

送信完了時に「送信されました」などの何らかのメッセージを出したいなら
『完了メッセージ』に表示したいテキストを書き込みます。

 

もしも自分で用意したページを見せたいなら
そのページURLをリダイレクトURLに記入します。

 

キャプチャ画像

 

一例としてこちらが当サイトの送信完了後に表示される(リダイレクト)ページです。

キャプチャ画像

こちら↓はフォームメーラーの送信完了画面です。

キャプチャ画像

 

『投稿不可時の画面設定』は、
何らかの禁止事項に抵触して送信できない場合にのみ表示されるので、
ここは特に設定がない限りは無視しておいて問題ないです。

 

キャプチャ画像

 

各種メール設定

『管理者宛メールの件名』は、
問い合わせがあった時に登録しているメールアドレスに連絡が来ますが
その時の件名です。

 

キャプチャ画像

 

『自動返信メール設定』は、
送信完了後に「送信されました」みたいな自動返信メールを出すかどうかの設定です。

 

スパムメールの標的になりやすいので当サイトでは「使用しない」にしてます。

 

キャプチャ画像

 

フィルタリング設定

必要なら「?」マウスオンで表示されるヘルプ項目を見て設定を変えましょう。

 

キャプチャ画像

 

トラッキングコード設定

フォームメールのアクセス解析をしたければここで設定します。

 

キャプチャ画像

 

その他の表示設定

Free版(無料)は広告表示を「表示しない」にすることはできません。

 

キャプチャ画像

 

画面確認・デザイン変更

ここでレイアウトデザインを変更できます。

 

シリウスのページに取り込むならここはデフォルトのままでも問題ありません。

 

フォームメーラーのページを表示させるならここでデザインを決めましょう。

 

リアルタイムでプレビューが表示されるのでいろいろいじってみてください。

 

キャプチャ画像

 

コード表示

『URLリンク』というのが
フォームメーラーで表示されるお問合せページのURLです。

 

これをシリウスのページにリンクとして貼れば、
1クリックでお問合せページが表示されます。

 

キャプチャ画像

 

『埋め込みコード(iframe)』というのは、
このコードをそっくりシリウスのページに埋め込む(ペースト)と
上の『フォームメーラーで表示されるお問合せページ』が
シリウスのページの中で再現されます。

 

キャプチャ画像

 

今回のようにページ内にあたかもお問合せフォームが存在するかような体裁を作るには『HTMLコード』に表示されるコードを利用します。

 

<form>要素のみ というタブをクリックします。

 

PC用とスマホ用と携帯用の 3つの<form>要素のみがありますが、
とりあえず PC用の<form>要素のみだけ見ればいいでしょう。

 

キャプチャ画像

 

『※お客様のサイト内にフォームメーラーのバナーを必ず設置ください。』
との一文があり、リンクがあります。

 

タダで使わせてもらうのですからこの辺の規約は守りましょう。

 

キャプチャ画像

 

リンク先に飛ぶとバナー画像の設置コードを発行してくれるので、好きなバナーを選んでソースをコピーしておきます。

お問合せフォームの設置(シリウスへの実装)

ここからページへの実装方法です。

<P>タグ改行 をベースに説明していきます。

 

最初にフォームメーラー側のコードのアタマ2行をコピペします。

(value値は私固有の値なのであなたの値が入ってるハズです)

 

コード

<form action="https://ssl.form-mailer.jp/fm/service/Forms/confirm" method="post" name="form1" ENCTYPE="multipart/form-data">
<input type="hidden" name="key" value="xxxxxxxxxx" >

 

次に”何か一言”を付け加えておきます。

 

コード

<strong>「SIRIUSの賢い使い方」</strong>サイト管理人のきゅいじんです。

恐れ入りますが、
以下のフォームに必要事項をご記入の上「確認画面へ」をクリックしてください。
(<span class="f_bold f_red">*</span> の付いている項目は必須項目です)

できるだけ早めにご回答するよう心がけていますが、
もしも24時間以内に当方からのメールが届かないようであれば、
お手数ですが【迷惑メール】フォルダをいま一度ご確認の上、
催促のメールを下記アドレス宛に直接送っていただきますようお願いいたします。

文言、文字装飾等はご自身でアレンジしてください。

中には<span class="f_bold f_red">といったようなクラスがありますが、これは当サイトだけのスタイルですので無視してください。

 

続いて実際に入力項目を設置していきます。

 

フォームメーラー側で発行されたコードの以下の部分をコピーペーストしていきます。

(あくまで当サイトの例ですよ)

 

キャプチャ画像

 

ただし『<P>タグ改行』で編集しているので <p></p> は削除しておきます。
二重に表示されちゃいますので。

 

またコメント部分である <!--~--> の部分も必要なければ削除しておきます。

 

その結果、当サイトではこんな↓感じにしてあります。

 

コード

<span class="f_bold f_red">*</span>お名前
<input name="field_xxxxxx" type="text" size="50">

<span class="f_bold f_red">*</span>メールアドレス
<input name="field_xxxxxx" type="text" size="50">

<span class="f_bold f_red">*</span>お問合せの内容
<textarea name="field_xxxxxx" cols="90" rows="10"></textarea>

field_xxxxxx の部分はもちろんあなたのコードに変わってるハズです。

size="50" とか cols="90" とか rows="10" といった数値は枠の大きさですので、あなたのサイトに合わせて適当に数値を変えて見栄えを調整してください。

 

上記の設定はPC用のレイアウトデザインです。この状態でiPhoneで見ると、
サイトによっては枠が横に飛び出してたりすることがあります。

 

その場合は別に iPhone 用のコードを設置してあげる必要があります。

 

シリウス独自タグの<pcc>~</pcc><ipc>~</ipc>
それぞれを分けてあげましょう。

 

その結果、下のようなコードになりました。

(当サイトの場合、枠の数値を少し変えてあります)

 

コード

<pcc>
<span class="f_bold f_red">*</span>お名前
<input name="field_2583427" type="text" size="50">

<span class="f_bold f_red">*</span>メールアドレス
<input name="field_2583428" type="text" size="50">

<span class="f_bold f_red">*</span>お問合せの内容
<textarea name="field_2583429" cols="90" rows="10"></textarea>
</pcc>
<ipc>
<span class="f_bold f_red">*</span>お名前
<input name="field_2583427" type="text" size="30">

<span class="f_bold f_red">*</span>メールアドレス
<input name="field_2583428" type="text" size="30">

<span class="f_bold f_red">*</span>お問合せの内容
<textarea name="field_2583429" cols="45" rows="10"></textarea>
</ipc>

PC と iPhone でのコード振り分けについては「右クリックの隠し機能・タグ挿入」をご覧ください。

 

この後もこれまでのやり方を参考にコピーペストしていきます。

 

無事に設置できたら
”どんな確認画面が出るのか” ”送信テストをしてちゃんとメールが届くか”
などを必ず確認しておきましょう。

 

以上です。

 

購入ページへ


てっぺん