レスポンシブ対応の無料お問い合わせフォーム「Responsive Mailform」の使い方とカスタマイズ方法

Web制作


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

お問い合わせフォームってどうやって作るんだろう?

 

 

といった方に対する記事となります。

お問い合わせフォームを作るにはPHPやサーバーを扱う必要が出てきます。

そこで今回は無料で使えるお問い合わせフォーム「Responsive Mailform」の使い方について解説していきたいと思います。

 


Responsive Mailformをダウンロード

 

まずは以下のサイトにアクセスします。

 

少しスクロールしていくと次の画面が現れるので、ダウンロードをクリックします。

 

 

そしてダウンロードしたファイルを解凍すると以下のファイルが入っています。

 

 

サーバーにアップロード

 

先ほどのファイルを、ファイル名やフォルダ名などは変えずにそのままサーバーへアップロードします。

サーバーへのアップロード方法については以下の記事を参照下さい。

 

ただ、慣れていない方はサーバーのどこにアップロードしていいか分からないかも知れません。

人によって設置したい場所が違うと思いますが、今回例として自分のサブドメインに設置したいとします。

まずサーバーに接続したら、

ドメイン名のフォルダ → public_html → サブドメイン名のフォルダ

となり、このサブドメイン名のフォルダにアップロードします。

そしてサブドメインのURLにアクセスして、以下のような画面が表示されればOKです(長いので画像は小さくしてます)

 

 


テスト送信

 

それでは先ほどのお問い合わせフォームに実際に入力してメールを送信してみましょう。

とりあえず必須項目だけで大丈夫です。

メールアドレスは自動返信を確認するので、ちゃんとメールを確認出来るアドレスを入力しましょう。

そして送信が完了すると、サンクスページが表示されます。

 

 

そして自動返信メールが確認出来ればテスト送信完了です。

 

config.phpを編集

 

それでは今度はファイルを編集していきます。

まずお問い合わせフォームの送信先のアドレスを自分のアドレスにします(先ほどのテスト送信では「aaa@example.co.jp」になっていたはずです)

編集するのはphpフォルダに入っているconfig.phpです。

// 編集前
$rm_send_address[] = 'aaa@example.co.jp';

// 編集後
$rm_send_address[] = '自分のメールアドレス';

 

8行目に上のコードが書いてあるので、自分のメールアドレスに置き換えてください。

またファイル内にも書いてありますが、メールアドレスは何個でも追加可能です。

あとは同じconfig.php内に自動返信メールや自分あてのメールの文章のテンプレートが書いてあるので、その文章を自分用に変更しましょう。

例えば、

//【だいたい必須】 相手に届く自動返信メールの最後に付加される署名 -- EOMからEOM;までの間の文章を自由に変更してください。 --
$rm_thanks_body_signature = <<<EOM

この度はお問い合わせを頂き、重ねてお礼申し上げます。
-----------------------------------------------------------------------------------

  レスポンシブメールフォーム
  〒***-**** ここに住所など
  TEL : ***-***-****
  Web Site URL : https://www.1-firststep.com
  Blog URL : https://www.firstsync.net

-----------------------------------------------------------------------------------

EOM;

 

このようになっているので、住所や電話番号、それ以外の文言なども変更可能です。

もちろん項目を追加したり削除することも可能です。

 

デザインのカスタマイズ

 

あとはデザインをカスタマイズ出来ればOKですね。

この辺はHTMLやCSSの知識がないと難しいです。

このお問い合わせフォームを自分で作ったサイトに組み込むには、index.htmlに書いてある各種ファイルの読み込みコードやformタグなど、必要事項を自分で書いたHTMLにコピペします(サンクスページはthanks.html)

あとは主にcssフォルダに入っている mailform.css thanks.css を編集してデザインをカスタマイズしていきます。

もしHTMLでclass名などを変えたら、cssファイルの方も変えないといけないのでご注意ください。

ちなみに私のポートフォリオも Responsive Mailform をカスタマイズしたものです。

 

その他カスタマイズに関してしては以下の公式ページを参照下さい。

 

以上です。