MW WP FORMを使用していると、稀に投稿詳細ページにフォームを埋め込むことがあります。

いろいろな場合が考えられますが、例えば「物件情報」もそのうちの一つです。

そういった場合、サイト管理者はどの投稿詳細ページから送信されたものかを判断できる必要があります。

今回は、投稿詳細ページに埋め込んだフォームに「投稿タイトル」や「その他の情報」などを自動入力し送信する方法をご紹介します。

# この記事で解決すること

  • 投稿詳細に埋め込んだフォームに投稿の情報を自動入力できる
  • 自動入力したinputをreadOnlyにできる

前提

今回はinputに自動入力する方法をご紹介します。

また、どのinputに入力するかはnameを元に判断しますので、MW WP FORM側で事前にご準備ください。

尚、今回はfunctions.phpに入力することにしますが、必要であればcustom_function.phpなど、ご自身で調整してください。

処理の順序

  1. 管理画面
    • inputの確認
    • formIDの確認
  2. phpの処理
    • functions.phpへの追記
  3. おまけ
    • readOnlyにする

管理画面

inputの確認

今回はtest_inputというname属性をもったテキストフィールドを使用します。

MW WP FORM edita内

[mwform_text name="test_input" size="60"]

また、「自動返信メール」や「管理者宛メール」に{test_input}を記入していることも確認しておいてください。

formIDの確認

フォームIDは、MW WP FORMのフォーム識別子（ショートコード）にある番号になります。

下記の例でいうと、1649の部分になります。

［mwform_formkey key="1649"］

phpの処理

今回はfunctions.phpに追記しますが、custom_functions.phpなどご自身でファイル選定してください。

functions.phpへの追記

MW WP FORMには、フォーム内の特定のname属性に対して値を入力するhookが用意されていますので、それを使用します。

function set_mwform_values($value, $name){
  if($name === 'test_input'){
    return get_the_title();
  }
  return $value;
}
add_filter('mwform_value_mw-wp-form-1649', 'set_mwform_values', 10, 2);

2～4行目

name属性がtest_inputの場合に投稿タイトルを返す

お気付きの通り、singleページで使用できる関数であれば、様々な情報の処理・取得が可能です。

7行目

mwform_value_mw-wp-form-xxxに対してhookをかけることで値を入力することができます。（xxxはformID）

 

ここまでで、自動入力は完了します。

ですが、せっかく自動入力したものをユーザーの人為的ミスで別のものに書き換えられると、管理面に損傷が出ます。

そのため、inputにreadOnlyを付けて変更できないようにしていきます。

inputをreadOnlyにする

調べたところ、readOnlyにする何かしは用意されていなさそうなので、Jsで実装します。

window.addEventListener('load', () => {
  if (document.querySelector('#mw_wp_form_mw-wp-form-1649')) {
    const testInput = document.getElementsByName('test_input')[0]
    if(testInput) testInput.readOnly = true;
  }
})

2行目

フォームがないときまで発火すると、エラーが出てうるさいので条件分岐してあげましょう。

3, 4行目

name="test_input"を取得して、readOnlyをtrueにします。

 

間違いがなければ、これで問題なく動作します。

表示上、readOnlyのinputの背景だけ色を変更したい場合は、下記のセレクタを使用すると実現できます。

input[readOnly] {
  background-color: #eee;
}

最後に

「functionでname属性に対して値をreturnする」という、やり方さえわかればものの数分で完了する作業です。

上記のMW WP FORMには、開発に役立つhookが多数設けられています。

MW WP FORMはvalidationがしやすく、細かい設定もできるのでかなり重宝しています。

みんさんも、困ったときはリファレンスなどで色々hookを調べてみると良いでしょう。

それでは、よいWPライフを！