ミギムキ

メールフォームプロを一つのページに複数設置したい

一つのページに複数のメールフォームプロを設置

動作イメージ

「MultiConfig」機能について

<form id="mailformpro" action="/mailformpro/mailformpro.cgi" method="POST"> 〜 <script type="text/javascript" id="mfpjs" src="/mailformpro/mailformpro.cgi" charset="UTF-8"></script> </form>
スポンサー広告
<form id="mailformpro" action="/mailformpro/mailformpro.cgi?type=xxx" method="POST"> 〜 <script type="text/javascript" id="mfpjs" src="/mailformpro/mailformpro.cgi?type=xxx" charset="UTF-8"></script> </form>

設置手順

configファイルの作成

  • まずは通常の設置時と同じようにconfigファイルを作成します。
  • 設置者用メールのアドレスを設定する箇所に、以下のような配列の初期化文を入れてください
@mailto = (); push @mailto,'xxx@test.com'; push @mailto,'yyy@test.com'; push @mailto,'zzz@test.com';
  • これは、設置者用メールが二重で送られてこないようにするための記述です
  • configの切り替え時、各設定は切り替えたconfigの内容で上書きされるのですが、設置者用メールアドレスは配列に追加するような書き方になるため、初期化文がないと切り替えたconfigに書いてあるアドレスがそのまま追加されてしまいます
push @Modules,'MultiConfig'; ## 複数の設定ファイルを分岐させる
  • あとは、オプション機能の一覧にある「MultiConfig」を有効にするため、行頭の「#」を外してください

configファイルの複製

  • 作成したconfigファイルを、必要なフォームの数だけコピーしてください
  • コピーしたconfigファイルは、ファイル名を「config.xxx.cgi」という形式にします
  • コピーしたファイルは元のconfigファイルと同じフォルダに置いておきます
  • 今回のケースでは「config.cgi」「config.aaa.cgi」「config.bbb.cgi」の3つのconfigファイルを切り替えていきます
  • 複製したconfigファイルについて以下の内容を変更すれば、configファイルの準備は完了です
    • 設置者メールの送信先
    • サンクスページのURL
    • 自動返信メールの内容 など
複製したconfigファイル

htmlの実装

<button class="open_inline_form" data-type="">メールフォーム①</button> <button class="open_inline_form" data-type="aaa">メールフォーム②</button> <button class="open_inline_form" data-type="bbb">メールフォーム③</button> <div id="bg_inline_form" class="bg_inline_form"> <div id="inline_form" class="inline_form"> <button id="close_inline_form" class="close_inline_form"></button> <div class="inline_form_content"> <form id="mailformpro" action="/mailformpro/mailformpro.cgi" method="POST"> <dl class="mailform"> <dt class="mfp"><span class="must">必須</span>お名前</dt> <dd class="mfp"> <input type="text" name="お名前" size="40" required="required" placeholder="山田太郎"> </dd> <dt class="mfp"><span class="must">必須</span>メールアドレス</dt> <dd class="mfp"> <input type="email" data-type="email" data-parent="mailfield" name="email" size="40" required="required" placeholder="xxx@test.com"> </dd> <dt class="mfp"><span class="must">必須</span>電話番号</dt> <dd class="mfp"> <input type="tel" data-type="tel" name="電話番号" size="20" required="required" placeholder="0123-45-6789"> </dd> </dl> <div class="mfp_buttons"> <button type="submit">送信する</button> </div> <script type="text/javascript" id="mfpjs" src="/mailformpro/mailformpro.cgi" charset="UTF-8"></script> </form> </div> </div> </div>
スポンサー広告
  • htmlのコードです
  • ポイントは、各フォームを呼び出す3つのボタンに設定された「data-type」です
  • この内容が、先に作成したconfigファイル名と対応しています。configファイル「config.aaa.cgi」のフォームを呼び出す場合、「data-type」は「aaa」となります
  • メールフォーム①はデフォルトのconfigファイルを参照するため、「data-type」は空の「""」としておきます
  • 呼び出されるフォームは「inline_form_content」クラスの要素で囲んでいます。フォームの中身は特に手を入れる必要はありません

CSSの実装

.open_inline_form { display: block; width: 18em; padding: 1em; margin: 30px auto 0px; border: none; border-radius: 15px; background-color: #3388dd; outline: none; color: #fff; font-size: 18px; font-weight: bold; text-align: center; cursor: pointer; } .open_inline_form:hover { opacity: 0.8; } .bg_inline_form { display: block; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; pointer-events: none; transition: 0.5s; } .bg_inline_form.js_active { visibility: visible; opacity: 1; pointer-events: auto; } .inline_form { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); padding: 30px; max-height: 90%; background-color: #fff; overflow-y: auto; } @media screen and (max-width: 767px) { .inline_form { width: calc(100% - 20px); } } @media print, (min-width: 768px) { .inline_form { width: 90%; max-width: 900px; } } .close_inline_form { position: absolute; top: 10px; right: 10px; transform: rotate(45deg); border: none; background: none; outline: none; width: 30px; height: 30px; } .close_inline_form::before, .close_inline_form::after { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background-color: #3388dd; content: ""; } .close_inline_form::before { width: 60%; height: 3px; } .close_inline_form::after { width: 3px; height: 60%; } .close_inline_form:hover { cursor: pointer; } .inline_form_content { display: table; margin: 0px auto; }
  • CSSのコードです
  • フォームと背景のオーバーレイを含む全体要素「bg_inline_form」は、「visibility: hidden;」と「opacity: 0;」で非表示にされています
  • ボタンが押下されたときに「.js_active」が付与され、「visibility: visible;」と「opacity: 1;」となることで表示されます

Javascriptの実装

window.addEventListener('load', function() { const bgForm = document.getElementById('bg_inline_form'); if(bgForm) { const form = document.getElementById('mailformpro'); const formPath = form.getAttribute('action'); const openFormButtons = document.getElementsByClassName('open_inline_form'); for(let i = 0; i < openFormButtons.length; i++) { openFormButtons[i].addEventListener('click', function(event) { const dataType = this.getAttribute('data-type'); let formPathWithParam = formPath; if(dataType) { formPathWithParam = formPathWithParam + '?type=' + dataType; } form.setAttribute('action', formPathWithParam); document.getElementById('mfpjs').setAttribute('src', formPathWithParam); bgForm.classList.add('js_active'); }, false); } // オーバーレイエリアと×アイコンがクリックされたら、オーバーレイとウインドウをクローズ function closeForm(event) { bgForm.classList.remove('js_active'); } bgForm.addEventListener('click', closeForm, false); document.getElementById('close_inline_form').addEventListener('click', closeForm, false); // ウインドウ内の要素をクリックしたときにクローズされないようバブリングを停止 document.getElementById('inline_form').addEventListener('click', function(event) { event.stopPropagation(); }, false); } }, false);
  • Javascriptのコードです
  • ボタンをクリックしたとき、フォームの背景と×ボタンをクリックしたときのイベント処理を設定しています
const openFormButtons = document.getElementsByClassName('open_inline_form'); for(let i = 0; i < openFormButtons.length; i++) { openFormButtons[i].addEventListener('click', function(event) { const dataType = this.getAttribute('data-type'); let formPathWithParam = formPath; if(dataType) { formPathWithParam = formPathWithParam + '?type=' + dataType; } form.setAttribute('action', formPathWithParam); document.getElementById('mfpjs').setAttribute('src', formPathWithParam); bgForm.classList.add('js_active'); }, false); }
  • 配列に格納したボタン要素をループで回して、クリック時のイベント処理を設定しています
  • ボタンの「data-type」属性の内容を取得し、フォームのパスの末尾に「?type=xxx」の形式で結合します
  • 「data-type」が空(=1つ目のボタン)の場合は、結合は行わず、デフォルトのパスのままにします
  • 結合したパス名でformの「action」属性とscriptの「src」属性を上書きします
  • 最後に、フォームと背景のオーバーレイを含む全体要素「bg_inline_form」に対して「js_active」クラスを設定します
  • 以上の処理で、ボタンを押下する度にフォームが表示され、メールフォームプロのパスが書き換わるようになります
// オーバーレイエリアと×アイコンがクリックされたら、オーバーレイとウインドウをクローズ function closeForm(event) { bgForm.classList.remove('js_active'); } bgForm.addEventListener('click', closeForm, false); document.getElementById('close_inline_form').addEventListener('click', closeForm, false); // ウインドウ内の要素をクリックしたときにクローズされないようバブリングを停止 document.getElementById('inline_form').addEventListener('click', function(event) { event.stopPropagation(); }, false);
スポンサー広告
  • 背景のオーバレイと、ウインドウの×ボタンをクリックしたときのイベント処理です
  • 「bg_inline_form」にボタンクリックで付与された「js_active」を削除します。これでフォームと背景が非表示になります
  • これだけですと、ウインドウ内の要素をクリックしたときにも、背景がイベントを受理(バブリング)してしまい、ウインドウがクローズされてしまいます
  • これを防止するため、ウインドウである「inline_form」にて「event.stopPropagation();」を行い、イベントが背景に伝達されないようにします

フォームの種類を区別してログに残したい

html

<form id="mailformpro" action="/mailformpro/mailformpro.cgi" method="POST"> <input type="hidden" name="お問い合わせ種別" id="form_type" value=""> <dl class="mailform"> <dt class="mfp"><span class="must">必須</span>お名前</dt> <dd class="mfp"> <input type="text" name="お名前" size="40" required="required" placeholder="山田太郎"> </dd> <dt class="mfp"><span class="must">必須</span>メールアドレス</dt> <dd class="mfp"> <input type="email" data-type="email" data-parent="mailfield" name="email" size="40" required="required" placeholder="xxx@test.com"> </dd> <dt class="mfp"><span class="must">必須</span>電話番号</dt> <dd class="mfp"> <input type="tel" data-type="tel" name="電話番号" size="20" required="required" placeholder="0123-45-6789"> </dd> </dl> <div class="mfp_buttons"> <button type="submit">送信する</button> </div> <script type="text/javascript" id="mfpjs" src="/mailformpro/mailformpro.cgi" charset="UTF-8"></script> </form>
  • 変更点は一箇所だけ。「お問い合わせ種別」という名前の「hidden」形式のinputタグが追加されています
  • この「value」属性をボタンクリックの度に書き換えることで、フォーム送信時にフォームの種別情報も一緒に送信されるようになります

Javascript

window.addEventListener('load', function() { const bgForm = document.getElementById('bg_inline_form'); if(bgForm) { const form_type = [ ['', 'メールフォーム①'], ['aaa', 'メールフォーム②'], ['bbb', 'メールフォーム③'] ]; const form = document.getElementById('mailformpro'); const formPath = form.getAttribute('action'); const openFormButtons = document.getElementsByClassName('open_inline_form'); for(let i = 0; i < openFormButtons.length; i++) { openFormButtons[i].addEventListener('click', function(event) { const dataType = this.getAttribute('data-type'); let formPathWithParam = formPath; if(dataType) { formPathWithParam = formPathWithParam + '?type=' + dataType; } form.setAttribute('action', formPathWithParam); document.getElementById('mfpjs').setAttribute('src', formPathWithParam); for(let j = 0; j < form_type.length; j++) { if(dataType === form_type[j][0]) { document.getElementById('form_type').setAttribute('value', form_type[j][1]); } } bgForm.classList.add('js_active'); }, false); } // オーバーレイエリアと×アイコンがクリックされたら、オーバーレイとウインドウをクローズ function closeForm(event) { bgForm.classList.remove('js_active'); } bgForm.addEventListener('click', closeForm, false); document.getElementById('close_inline_form').addEventListener('click', closeForm, false); // ウインドウ内の要素をクリックしたときにクローズされないようバブリングを停止 document.getElementById('inline_form').addEventListener('click', function(event) { event.stopPropagation(); }, false); } }, false);
  • Javascript側の変更点は2つです
const form_type = [ ['', 'お問い合わせフォーム'], ['aaa', '資料ダウンロード申し込みフォーム''], ['bbb', 'セミナー参加申し込みフォーム'] ];
  • フォームの種別名を定義する二次元配列を用意します
  • 一次元目には「data-type」属性の内容を、二次元目にはそれに紐づくフォームの種別名を格納します
for(let j = 0; j < form_type.length; j++) { if(dataType === form_type[j][0]) { document.getElementById('form_type').setAttribute('value', form_type[j][1]); } }
スポンサー広告
  • ボタンクリック時のイベント処理にて、用意した配列の内容を参照します
  • クリックしたボタンの「data-type」属性の内容と一致するものを探してフォームの種別名を取得。フォームに追加した「hidden」形式のinputタグ「form_type」のvalue属性に設定します
  • このように「data-type」属性を使えば、フォームごとの細かい挙動を制御できます
  • 呼び出したフォームによって入力項目を変えるといった制御も可能です

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

スポンサー広告