【レスポンシブ化の準備】忍者メールフォームの作成＆設定方法

サーバーのハッキング騒動までは、Wordpress のメールフォームのプラグインを利用して、WEBサイトのお問い合わせ用メールフォームを使っていた。
（Wordpress とメール用のプラグインをインストール後、メールメール専用にテーマを新規作成）

しかし、サーバーのハッキング騒動以降、Wordpressのメールフォームは閉鎖した。
このままWordpressを使い続けると、ハッキングを防ぐことが難しいと判断したからだ。

そこで、急遽 Google のブログサービスの Blogger の機能を使い、メールフォームもどきを作った。

でもやっぱり非常に良くない。
そもそも連絡用メールフォームに見えない。

そこで、何か良いメールフォームサービスはないかと探してみた。
実は、このメールフォームを設置した２０１６年現在使用しているさくらのレンタルサーバーには、メールフォームを設置する機能がある。

でも、万一そのメールフォームが原因でサーバーがハッキングされ、サイトのファイルが書き換えられたり、マルウェアやフィッシング用のファイルを設置されたらかなり困る。

別に信用していないわけではないのだが、万が一が起きた手間を考えると、使用中のサーバーやアカウントが絶対汚染されない方法を使いたかった。

そこで、外部サービスでメールフォームを設置する方法は何かないか探したのだった。
すると、メールフォームサービスはあるにはあるが、どこもレスポンシブ化の対応はできていないようだった。

正確には、ものすごい横幅の狭い、スマホでもなんとか利用できそうなメールフォームはあるのだが、PCでもスマホでも利用しやすく、文字サイズが大きく、横幅が可変するメールフォームはなかった。
（もしかしたらあったのかもしれないが、見つけられなかった）

もうすでにサイトはレスポンシブ対応してある。
ならば、メールフォームもレスポンシブ対応した方が良いに決まっている。
そこで、私はメールフォームをレスポンシブ化することにしたのだった。

まずは忍者メールフォームを作る

まずは、もうすでに共有ボタンでお世話になっており、新規アカウントの取得の必要がない忍者ツールの 『忍者メールフォーム』 を利用することに決めた。

１．　新規アカウント作成画面から、忍者ツールの新規アカウントを作る

新規ユーザー登録｜忍者ツールズ

２．　忍者ツールのホームページから、忍者メールフォームを作る
（ふたつ目のメールフォームからは、忍者メールフォームの項目の 『ツールを作成』 のリンクをクリックする）

３．　ツールの名前を入力する
サイトごとに分けたい場合は、サイトごとに違った名前にする。
（この名前でメールが転送されるわけではない。あくまでも忍者ツール上で見分け出来やすいようにするだけ）

４．　利用規約にチェックを入れる
５．　画像認証の文字を入力する
６．　作成するボタンをクリックする

忍者メールフォームを作成し終えたら、次は、忍者メールフォームの設定を変更する。
これをしないとCSSの変更はできない。

１．　ツールの名前のリンクをクリックする

２．　画面下の『パーツ選択』をクリックする
これが非常に分かりづらかった。
多分、メール設定で躓く人はここが原因だと思う。

３．　メールフォームの名前を入力する

実は、これが忍者メールフォームのCSSのクラス名になる。
しかも、管理人に届くメールのタイトルにもなる。

なので、複数サイトを持っており、サイト毎に受信するメールを判別したい場合は、この部分をわかりやすい名前（英数字のみ）に変更する。

４．　スキンの選択・自作CSSを使用するを選択する

５．　画面下半分の『使用中パーツ一覧』を変更する
タイトルの【】を外すには 『パーツ名に括弧を付ける』 のチェックを外す

６．　パーツを追加する場合は、画面右端の『パーツを追加』ボタンを押す
スパム防止には計算やクイズのパーツは効果があるかもしれないが、↓のパーツの場合、あまり効果はないかもしれない。

７．　上書き保存ボタンをクリックする

８．　メールフォーム一覧ボタンをクリックする

９．　画面下の『デザイン』を選択する

10．　メールフォームのCSSの雛形をテキストファイルにコピペしておく

ここに書かれているCSSのクラス名が変更するクラス名になっている。
ちょっとわかり辛いと思うので、次のページでCSSのクラス名について解説する。

このカテゴリの記事