WordPressでフォームが機能しない!ログインできない!時にまず確認してほしいこと

WordPress関連記事
目次

【コトの発端】MW WP Formが機能しない!

フォームを「MW WP Form」で実装していたのですが、
実機チェックをしていた時、Edgeでフォームの「確認画面へ」ボタンをポチッと押しても、
画面はそのまんまの状態、エラーメッセージも出ない問題が起きました!

先方様へテストアップのご報告をすぐしないといけなかったので、めっちゃ焦りました 😥

フォームだけじゃない、ログインもできない!

トラブルシューティングで、いろいろ試しました。

問題のEdgeでWordPressにログインしようとIDとパスワードを入れても、
「エラー: 入力内容をご確認の上、もう一度送信してください。」と出るだけで、一向にログインできません。

原因はフォームではないようです。
さらに謎なのは、WindowsでもEdgeだけフォームが起動しない、ログインできない現象が起こっていること。

以前、Basic認証もこのEdgeだけIDパスワードを入れてもダメだったことを思い出し、
やっと原因を突き止めました。

【解決方法】ブラウザのCookieを有効にするだけ!

これだけで、全て問題が解決しました!
ブラウザのCookieを無効にすると、Edge以外のブラウザでも同じ問題が発生しました。
とはいえ、
何も知らない訪問者がこの問題に出くわした時、
「何このサイト、フォームの送信ができない!!!」とクレームの原因になってしまいます。
なので、「ブラウザのCookieが無効になっているよ!」と知らせる仕掛けを入れることにしました。

ブラウザのCookieが無効になっていることを知らせる

こちらの記事(https://blog.w0s.jp/511)を参考に自分でアレンジしています。
重要なことなので、
ページを開いた時、Cookieが無効になっているか判別し、有効でないならポップアップで知らせるようにしました。

  • 今回は、フォーム送信時にCookieを使用。
  • ブラウザのCookie設定を変えてほしい。

ので、技術者ではない人にもわかる文章を変更しております。

出来上がりはこんな感じ。

出来上がりイメージ

ポップアップのHTML,PHP

<!--ブラウザのCookieが無効な時にポップアップを出現させる-->
<dialog id="js_cookie_dialog" hidden="">
<div class="inner">
<p>フォーム送信のために、ブラウザの Cookie を使用しています。<br>
誠に恐縮ですが、「
<?php echo $_SERVER['HTTP_HOST']; ?>」ドメインに対して <br>
Cookie を有効にしてください。</p>
<p><button type="button" class="js_dialog_close">閉じる</button></p>
</div>
</dialog>

これを、該当するテンプレートのPHPに記入します。

すると、<?php echo $_SERVER['HTTP_HOST']; ?>

が、ドメインを抽出してくれます。
開発と本番でドメインが変わる時、修正要らずで楽ちんです!

ダイアログとは、

WindowsのようなGUI(Graphical User Interface)において、ユーザーに入力を求めたり、何らかの通知を行うために表示される小さなウィンドウダイアログボックス(dialog box)」の略称

https://kotobank.jp/word/%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0-12188#:~:text=Windows%E3%81%AE%E3%82%88%E3%81%86%E3%81%AAGUI,%E3%82%92%E6%84%8F%E5%91%B3%E3%81%99%E3%82%8B%E3%80%8Cdialogue%E3%80%8D%E3%80%82

だそうです。ポップアップとほぼ同一ですね。

HTMLにはdialogタグがあり、以下の効果があります。

この dialog 要素をページロード時に JavaScript で showModal() することで、「閉じる」ボタンを押さない限り他の操作はできないようになります。

https://blog.w0s.jp/511

しかし、dialogタグには注意点が。

なお、2017年4月時点では dialog 要素は Chrome しか対応していないため、未対応ブラウザのために hidden 属性を指定し、また内側にスタイル付けのための div 要素を挿入します。

https://blog.w0s.jp/511

dialogタグのhidden属性と、内側にdivタグを入れるのがポイントです。

CSS

フォントサイズと、「閉じる」ボタンの色変更とカーソルが変化するようにCSSを追記しました。

  dialog#js_cookie_dialog {
    /* ↓リセット */
    margin: 0;
    padding: 0;
    border: none;
    color: inherit;
    /* ↑リセット */
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .1); /* <dialog> 未対応ブラウザ用 */
    z-index: 2147483647; /* <dialog> 未対応ブラウザ用 */
    overflow-y: auto;
  }

  dialog#js_cookie_dialog:not([hidden]) {
    display: flex;
  }

  dialog#js_cookie_dialog::backdrop {
    background: rgba(0, 0, 0, .1);
  }

  dialog#js_cookie_dialog > .inner {
    padding: 1em;
    border: 2px solid #000;
    max-width: 36em;
    background: #fff;
  }

  dialog#js_cookie_dialog > .inner {
    padding: 1em;
    border: 2px solid #000;
    max-width: 36em;
    background: #fff;
    font-size: 14px;
  }
  dialog#js_cookie_dialog button{
    margin-top: 0.5em;
    cursor: pointer;
    background-color: #cacaca;
  }

他のCSSと混ぜて入れると汎用性がないので、
私の場合は、headタグ内に以下のように入れました。

<?php if(is_page('contact')): //フォームのページだけ Cookieが無い時だけ表示 ?>
<style>
/*この中に上のCSSを入れる*/
</style>
<?php endif; ?>

JavaScript

参考サイトと違うのは、ie11がサポート終了したので、
その記述を消しました。

/**
 * Cookie が有効か調べる
 *
 * @return 有効ならtrue、無効ならfalse
 */
var cookieEnabled = function() {
  if (!navigator.cookieEnabled) {
    return false;
  }

  var nowCookie = document.cookie;
  document.cookie = TEMP_COOKIE; // 仮 Cookie 設定
  if (nowCookie === document.cookie) {
    return false;
  }

  document.cookie = TEMP_COOKIE + ';expires=' + (new Date(0)).toUTCString(); // 仮 Cookie 削除(有効期限に過去日を指定)
  return true;
};

if (!cookieEnabled()) {
  /* Cookie が無効な場合 */
  var supportDialog = window.HTMLDialogElement !== undefined; // <dialog> をサポートしているか

  /* ダイアログの初期処理 */
  var cookieDialogElement = document.getElementById('js_cookie_dialog');
  if (cookieDialogElement !== null) {
    cookieDialogElement.hidden = false; // <dialog> 非対応環境向け

    if (supportDialog) {
      cookieDialogElement.showModal();
    } else {
      cookieDialogElement.tabIndex = -1;
      cookieDialogElement.focus();
    }
  }

  /* 閉じるボタンを押したときの処理 */
  var closeButtonElements = cookieDialogElement.querySelectorAll('.js_dialog_close');
  for (var i = 0, leni = closeButtonElements.length; i < leni; i++) {
    closeButtonElements[i].addEventListener('click', function() {
      cookieDialogElement.hidden = true; // <dialog> 非対応環境向け

      if (supportDialog) {
        cookieDialogElement.close();
      }
    });
  }
}

[余談]ブラウザのデフォルト設定では、Cookieは有効になっている

このような問題が起こるのは、稀のようです。

こちらの参考サイト様では、以下のように記載されていました。

どのブラウザでも、デフォルト設定では Cookie は有効です。つまり、 Cookie が無効なユーザーというのは、何らかの理由で意図的に無効にしているものと想定できます。そういうユーザーに対し、設定を再度変更させて Cookie を有効にしてもらうには下記2点の情報を提示すべきかと思います。

https://blog.w0s.jp/511

こちらの記事では、
Cookieのシステムのことから細かく説明してくださっています。
文言やコードもこの記事を参考に改造しました。
詳しく知りたい方は、ぜひご参照ください!

WordPress関連記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次