【お問い合わせフォーム】未入力の項目を確認画面で非表示にしたい

やりたいこと
お問い合わせフォームは「必須項目」と「任意項目」があるかと思います。
この中で任意項目をユーザーが入力しなかった場合、その項目を確認画面で非表示にしたいです。
添付画像のようなイメージです。(お名前やメールアドレスは本来必須項目ですが、まだその設定をしておりませんので本来は右に名前等のテキストが反映されます。)

このような条件分岐的なことは可能でしょうか。
もし可能でしたらご教授お願いしたいです。
よろしくお願いいたします。

仕様として
WordPressプラグインの「MW WP FORM」を使用しています。

プラグイン内で定義しているフォームの形式のコード

  <div class="FormWrapper">

    <div class="FormItem">
      <div class="FormTitle">
        <div class="FormRequired">必須</div>
        <p>お名前</p>
      </div>

      [mwform_text name="download-name" class="FormInput"]
    </div>
    
    <div class="FormItem">
      <div class="FormTitle">
        <div class="FormRequired">必須</div>
        <p>メールアドレス</p>
      </div>
      
      [mwform_email name="download-email" class="FormInput"]
    </div>
    
    <div class="FormItemRemarks">
      <div class="FormTitle">
        <div class="FormAny">任意</div>
        <p>備考</p>
      </div>
    
      <div class="RemarksWrapper">
        <p class="RemarksText">ご質問、お問い合わせをご記入ください。</p>     
        [mwform_textarea name="mwform_textarea-610" class="FormRemarkInput" cols="50" rows="5"]
      </div>
    </div>

    <div class="FormItem">
      <div class="FormTitle">
        <div class="FormRequired">必須</div>
        <p>個人情報取扱について</p>
      </div>
    
      <div class="CheckBoxWrapper">
        [mwform_checkbox name="download-documentcheckbox" class="FormInputCheckBox" id="target" children="個人情報の取扱について同意します。" separator=","]
        <p class="privacyMessage">個人情報の取扱方針については<a href="<?php echo home_url('/privacy'); ?>" class="tokushohoLink">こちら</a>をご確認ください</p>
      </div>
    </div>
    
    <div class="FormItem">
      <div class="FormTitle FormAddressTitle">
        <div class="FormAny FormAnyAddress">任意</div>
        <p>パンフレット送付希望<br><span>※1週間以内に発送をします。</span></p>
      </div>

      <div class="CheckBoxWrapper">
        [mwform_checkbox name="adress-documentcheckbox" id="addressActive" class="FormInputCheckBox" children="神言学のパンフレットの送付を希望します。" separator=","]
      </div>
    </div>
    
    <div class="slideToggleItem">
      <div class="FormItem">
        <div class="FormTitle">
          <div class="FormRequired">必須</div>
          <p>ご住所</p>
        </div>

        [mwform_text name="download-address" class="FormInput" size="60"]
      </div>
    </div>
    
        [mwform_bback class="FormButton" class="FormButton" value="back"]前の画面に戻る[/mwform_bback]
        [mwform_submitButton name="mwform_submitButton-879" class="FormButton FormButtonConfirm" confirm_value="確認画面へ" submit_value="上記の内容で送信する"]
  </div>

上記のコードで実際に吐き出されるHTMLはこちらです。

<div id="mw_wp_form_mw-wp-form-17" class="mw_wp_form mw_wp_form_input  ">
  <form method="post" action="" enctype="multipart/form-data">  <div class="FormWrapper">

<div class="FormItem">
  <div class="FormTitle">
    <div class="FormRequired">必須</div>
    <p>お名前</p>
  </div>

  <input type="text" name="form-name" class="FormInput" size="60" value="">
</div>

<div class="FormItem">
  <div class="FormTitle">
    <div class="FormRequired">必須</div>
    <p>メールアドレス</p>
  </div>

  <input type="email" name="form-email" class="FormInput" size="60" value="" data-conv-half-alphanumeric="true">
</div>

<div class="FormItemRemarks">
  <div class="FormTitle">
    <div class="FormAny">任意</div>
    <p>備考</p>
  </div>

  <div class="RemarksWrapper">
    <p class="RemarksText">ご質問、お問い合わせをご記入ください。</p>     
    <textarea name="form-textarea" class="FormRemarkInput" cols="50" rows="5"></textarea>
  </div>
</div>

<div class="FormItem">
  <div class="FormTitle">
    <div class="FormRequired">必須</div>
    <p>個人情報取扱について</p>
  </div>

  <div class="CheckBoxWrapper">
    <span class="mwform-checkbox-field horizontal-item">
    <label for="formtarget-1">
    <input type="checkbox" name="form-documentcheckbox[data][]" value="個人情報の取扱について同意します。" id="formtarget-1" class="FormInputCheckBox">
    <span class="mwform-checkbox-field-text"><a href="https://test.site/privacy/" target="_blank" rel="noopener noreferrer" class="tokushohoLink">個人情報の取扱について</a>同意します</span>
    </label>
    </span>
    <input type="hidden" name="form-documentcheckbox[separator]" value=",">
    <input type="hidden" name="__children[form-documentcheckbox][]" value="{&quot;\u500b\u4eba\u60c5\u5831\u306e\u53d6\u6271\u306b\u3064\u3044\u3066\u540c\u610f\u3057\u307e\u3059\u3002&quot;:&quot;\u500b\u4eba\u60c5\u5831\u306e\u53d6\u6271\u306b\u3064\u3044\u3066\u540c\u610f\u3057\u307e\u3059\u3002&quot;}">
    <p class="privacyMessage">個人情報の取扱方針については<a href="<?php echo home_url('/privacy'); ?>" class="tokushohoLink">こちら</a>をご確認ください</p>
  </div>
</div>

<div class="FormItem">
  <div class="FormTitle FormAddressTitle">
    <div class="FormAny FormAnyAddress">任意</div>
    <p>パンフレット送付希望<br><span>※1週間以内に発送をします。</span></p>
  </div>

<div class="CheckBoxWrapper">
  <span class="mwform-checkbox-field horizontal-item">
  <label for="addressActive-1">
  <input type="checkbox" name="formaddress-documentcheckbox[data][]" value="パンフレットの送付を希望します。" id="addressActive-1" class="FormInputCheckBox">
  <span class="mwform-checkbox-field-text">パンフレットの送付を希望します。</span>
  </label>
  </span>
  <input type="hidden" name="formaddress-documentcheckbox[separator]" value=",">
  <input type="hidden" name="__children[formaddress-documentcheckbox][]" value="{&quot;\u795e\u8a00\u5b66\u306e\u30d1\u30f3\u30d5\u30ec\u30c3\u30c8\u306e\u9001\u4ed8\u3092\u5e0c\u671b\u3057\u307e\u3059\u3002&quot;:&quot;\u795e\u8a00\u5b66\u306e\u30d1\u30f3\u30d5\u30ec\u30c3\u30c8\u306e\u9001\u4ed8\u3092\u5e0c\u671b\u3057\u307e\u3059\u3002&quot;}">
</div>
</div>

<div class="slideToggleItem">
  <div class="FormItem">
  <div class="FormTitle">
    <div class="FormRequired">必須</div>
    <p>ご住所</p>
  </div>

  <input type="text" name="form-address" class="FormInput" size="60" value="">
  </div>
</div>

<input type="submit" name="submitConfirm" value="確認画面へ" class="FormButton FormButtonConfirm">

</div><input type="hidden" id="mw_wp_form_token" name="mw_wp_form_token" value="278a14e2b8"><input type="hidden" name="_wp_http_referer" value="/contact/"><input type="hidden" name="mw-wp-form-form-id" value="17"><input type="hidden" name="mw-wp-form-form-verify-token" value="3ab03294e37aca0c64713ba68f8148cb9820997f"></form>
<!-- end .mw_wp_form --></div>
コード

m.ts10806

2021/11/16 09:49

＞このような条件分岐的なことは可能でしょうか。プラグインを自力で改修するしかないと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

結論
小手先感あって、あまり綺麗じゃないですが、手元で試した所、以下1,2,3で実現出来てそうでした。

【1】プラグイン内で定義しているフォームの形式のコード(html) をちょっと修正
[パンフレット送付希望]をラップしているdiv.FormItemに.FormItemPamphを追加。

【2】 css追加
以下を</head>閉じタグ手前に追加。

css
1<style>
2.FormItemRemarks.nini_null {
3    display: none;
4}
5.mw_wp_form_confirm .FormItemPamph {
6	display: none;
7}
8.mw_wp_form_confirm .FormItemPamph.nini_ari {
9    display: block;
10}
11</style>

【3】 js追加
以下を</body>閉じタグ手前に追加。

jquery
1<script>
2jQuery(document).ready(function(){
3	jQuery('.FormItemRemarks:has(input[value=""])').addClass("nini_null");
4	jQuery('.FormItemPamph:has(input[value="神言学のパンフレットの送付を希望します。"])').addClass("nini_ari");
5});
6</script>

説明

[備考]は、valueが空のinputを子要素に持ってる親divがあったら、それにnini_nullクラスをjsで付与して、cssで非表示する
[パンフ希望]は、確認画面では基本非表示にしておいて、valueが[神言学〜]のinputを子要素に持ってる親divがあったら、それにnini_ariクラスをjsで付与して、cssで表示する

投稿2021/11/17 15:40

編集2021/11/17 16:10