こんにちは！フォトグラファー&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 をカスタマイズしたものです。
その他カスタマイズに関してしては以下の公式ページを参照下さい。
以上です。
