Web制作

レスポンシブ対応の無料お問い合わせフォーム『Responsive Mailform』の使い方

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


レスポンシブ対応の無料お問い合わせフォーム『Responsive Mailform』の使い方

『Responsive Mailform』でお問い合わせフォームを設置する手順は以下になります。

  1. ファイルをダウンロード
  2. ファイルをサーバーにアップロード
  3. テスト送信
  4. config.phpを編集
  5. デザインをカスタマイズ

最後は必要に応じてになりますが、順番に解説していきます。

 

ファイルをダウンロード

まずは公式サイトにアクセスします。

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

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

Responsive Mailform公式サイト:レスポンシブ メールフォームのダウンロード

Responsive Mailform公式サイト:レスポンシブ メールフォームのダウンロード

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

レスポンシブ メールフォーム:ファイル構成

レスポンシブ メールフォーム:ファイル構成

 

サーバーにアップロード

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

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

参考記事
無料で使えるFTPソフト『FileZilla』の使い方を解説【WindowsとMac両方OK】
無料で使えるFTPソフト『FileZilla』の使い方を解説【WindowsとMac両方OK】

続きを見る

まずサーバーに接続したら設置したいサイトのフォルダを作り、一旦そこにまるごとアップロードしましょう。

今回は初期ドメインの中に『portfolio』というフォルダを作り、その中に今回のファイルをまるごとアップロードします。

ファイルのアップロード先

・エックスサーバーの場合
→『○○.xsrv.jp(初期ドメイン)』→『public_html』→『portfolio』
・Conoha WINGの場合
→『public_html』→『○○.conohawing.com(初期ドメイン)』→『portfolio』
レスポンシブ メールフォーム:ファイルをまるごとアップロード

レスポンシブ メールフォーム:ファイルをまるごとアップロード

URLは上記の場合であれば以下のようになります。

  • エックスサーバー:http://○○.xsrv.jp/portfolio/
  • Conoha WING:http://○○.conohawing.com/portfolio/

このURLにアクセスして以下のような画面が表示されればOKです。

レスポンシブ メールフォーム:デフォルト画面

レスポンシブ メールフォーム:デフォルト画面

 

テスト送信(サンクスページと自動返信メールの確認)

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

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

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

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

レスポンシブ メールフォーム:サンクスページ

レスポンシブ メールフォーム:サンクスページ

そして以下のように入力したメールアドレスに自動返信メールが届けばテスト送信完了です。

レスポンシブ メールフォーム:自動返信メール

レスポンシブ メールフォーム:自動返信メール

 

自分のメールアドレスを設定

先ほどのテスト送信では差出人が『aaa@example.co.jp』になっているので、送信先のアドレスを自分のアドレスにします。

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

レスポンシブ メールフォーム:config.php

レスポンシブ メールフォーム:config.php

編集するのは以下になります(8行目)

レスポンシブ メールフォーム:8行目に自分のメールアドレスを入力

レスポンシブ メールフォーム:8行目に自分のメールアドレスを入力

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

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

8行目の'aaa@example.co.jp'を自分のメールアドレスに置き換えてください。

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

 

自動返信のテキストを編集

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

例えばこちらがデフォルトの状態です。

/* -- 以下、自分に届くメールの設定 ------------------------------------------------------------------------------------------------------------------------------------- */

//【任意】 自分に届くメールの題名
$rm_send_subject = 'メールフォームからお問い合わせがありました。';

//【任意】 自分に届くメールの本文 -- EOMからEOM;までの間の文章を自由に変更してください。 --
$rm_send_body = <<<EOM

メールフォームからお問い合わせがありました。
お問い合わせの内容は以下の通りです。

EOM;

/* -- 以下、相手への自動返信メールの設定 ------------------------------------------------------------------------------------------------------------------------------- */

//【任意】 相手に自動返信メールを送るかどうか -- 送らない場合は0、送る場合は1にしてください。 --
$rm_reply_mail = 1;

//【だいたい必須】 メールの差出人名に表示される自分の名前 -- 相手への自動返信メールに使用されます --
$rm_send_name = 'レスポンシブメールフォーム 差出人';

//【任意】 相手に届く自動返信メールの題名
$rm_thanks_subject = 'お問い合わせありがとうございました。';

//【任意】 相手に届く自動返信メールの本文 -- EOMからEOM;までの間の文章を自由に変更してください。 --
$rm_thanks_body = <<<EOM

この度はお問い合わせをいただき、ありがとうございました。
折り返し担当者から返信が行きますので、しばらくお待ちください。
以下の内容でお問い合わせをお受けいたしました。

EOM;

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

この度はお問い合わせを頂き、重ねてお礼申し上げます。
-----------------------------------------------------------------------------------
  レスポンシブメールフォーム
  〒100-0001 ここに住所など
  090-111-2222
  https://www.1-firststep.com
-----------------------------------------------------------------------------------

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

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


『Responsive Mailform』のデザインのカスタマイズ

あとはデザインをデザインカンプ通りに再現出来ればOKですね。

基本的には『index.html』のコードを書き写して、CSSやjsを読み込み、CSSでデザインを整えていくだけです。

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

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

また、確認画面を表示させるには有料のアドオンが必要なので、公式サイトの『追加アドオン(追加機能)について』を参照下さい。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作
-