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

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

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

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

効率よくコーディングしたい人はこちら

Responsive Mailformをダウンロード

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

簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード

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

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

サーバーにアップロード

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

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

WindowsとMac両方使えるFTPソフト「FileZilla」のインストールと接続方法

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

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

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

ドメイン名のフォルダ → 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ファイルの方も変えないといけないのでご注意ください。

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

レスポンシブ メールフォームのカスタマイズ方法についての解説

以上です。

コーディング案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック