Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

ただし確認画面が有料なので、確認画面も必要な場合は無料で作れるPHP工房がおすすめです。

あわせて読みたい
PHP工房の使い方とカスタマイズ方法【静的サイトのお問い合わせフォーム】
PHP工房の使い方とカスタマイズ方法【静的サイトのお問い合わせフォーム】

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

レスポンシブ対応の無料お問い合わせフォーム『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でデザインを整えていくだけです。

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

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

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

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!
  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。コーディングとWordPressオリジナルテーマ制作が中心。当ブログ490記事以上→月間最高15万PV。コンテンツ販売→累計売上1,200万円&1,500部超え。X(旧Twitter)フォロワー7,200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-Web制作
-