STUDIO Tachimachi MENU
  • ホーム
    home
  • プロフィール
    profile
  • 実績紹介
    achievements
  • サービス料金
    price
    • 定期・トラブル対処・作業代行
    • 農業法人専用ホームページ
    • MEO対策・運用アドバイス
    • 個別レクチャー
    • 勉強会
  • お問い合わせ
    contact
秦野堅市丨東広島WordPressフリーランス・ホームページ制作・リニューアル
東広島フリーランス・WordPressウェブサイト制作・リニューアル
  • ホーム
    home
  • プロフィール
    profile
  • 実績紹介
    achievements
  • サービス料金
    price
    • 定期・トラブル対処・作業代行
    • 農業法人専用ホームページ
    • MEO対策・運用アドバイス
    • 個別レクチャー
    • 勉強会
  • お問い合わせ
    contact
お問合せ
秦野堅市丨東広島WordPressフリーランス・ホームページ制作・リニューアル
  • ホーム
    home
  • プロフィール
    profile
  • 実績紹介
    achievements
  • サービス料金
    price
    • 定期・トラブル対処・作業代行
    • 農業法人専用ホームページ
    • MEO対策・運用アドバイス
    • 個別レクチャー
    • 勉強会
  • お問い合わせ
    contact
  1. ホーム
  2. コラム
  3. 【悩み解決】WordPressテーマSWELLでWPFormsを使おうとした時にJavaScriptを正しくロードしていないと表示されたときの解決策

【悩み解決】WordPressテーマSWELLでWPFormsを使おうとした時にJavaScriptを正しくロードしていないと表示されたときの解決策

2024 4/29
コラム
2024年4月29日2024年5月8日

以下のエラーが出てきたときの対処方法のお話です。

このページは JavaScript を正しくロードしておらず、フォームを送信できません。 この問題の解決の詳細については、トラブルシューティングガイドを確認してください。

WordPressのテーマをSWELLに変更し、お問合せフォームをContact Form7からWPFormsに変更したときのトラブル解消のお話。「お問合せができません!」と別媒体からお客様よりご連絡を頂きました。

なぬ?まさか・・・

と思い、自分で試しにフォーム入力、送信をしてみると冒頭の様に表示が現れ送信できない状況では有りませんか…。これはまずいと言うことで色々とやった結果なんとか解決した方法です。

TOPIK

結論、子テーマのfunctions.phpにコードを追加、子テーマにディレクトリ(フォルダー)を作成し、JavaScriptのコードを入れると解決しました。

解決した…とは言え、この方法を実施する際は自己責任の範囲でお願いします。

まず解決のために行ったことは以下のことになります

STEP
ブラウザの開発者ツールでHTMLコードにwpforms_settingsとwpforms.min.jsがあることを確認する

Command+Fで検索確認できます

STEP
wpforms_settingsがwpforms.min.jsよりも前に来ているかどうかを確認する

読み込む順番が大切と言うお話。wpforms.min.jsが先に来ている場合は本ページの方法では解決しない。

STEP
子テーマディレクトリに“js”フォルダを作成、その中に以下のコードを書いたcustom-wpforms-settings.js ファイルを作成

FTPを使用してサーバー内のデータにアクセスする必要があります

custom-wpforms-settings.js には以下のコードを書き込みます(一例)

var wpforms_settings = {
    val_required: "この欄の入力は必須です。",
    val_email: "有効なメールアドレスを入力してください。",
    val_email_suggestion: "{suggestion} のことでしたか?",
    val_email_suggestion_title: "クリックしてこの提案を受け入れます。",
    val_email_restricted: "そのメールアドレスでは登録できません。",
    val_number: "有効な値を入力してください。",
    val_number_positive: "有効な正数を入力してください。",
    val_minimum_price: "入力された金額は必要最低額に達していません。",
    val_confirm: "フィールドの値が一致しません。",
    val_checklimit: "選択可能な数を超えました: {#}。",
    val_limit_characters: "最大{limit}文字の{count}。",
    val_limit_words: "最大{limit}の単語のうち{count}。",
    val_recaptcha_fail_msg: "Google reCAPTCHA の確認に失敗しました。しばらくしてからもう一度お試しください。",
    val_turnstile_fail_msg: "Cloudflare Turnstile の検証に失敗しました。しばらくしてからもう一度お試しください。",
    val_inputmask_incomplete: "適切な形式でフィールドに入力してください。",
    uuid_cookie: "",
    locale: "ja",
    wpforms_plugin_url: "https://yourwebsite.com/wp-content/plugins/wpforms-lite/",
    gdpr: "",
    ajaxurl: "https://yourwebsite.com/wp-admin/admin-ajax.php",
    mailcheck_enabled: "1",
    mailcheck_domains: [],
    mailcheck_toplevel_domains: ["dev"],
    is_ssl: "1",
    page_title: "会員募集",
    page_id: "23",
    currency_code: "USD",
    currency_thousands: ",",
    currency_decimals: "2",
    currency_decimal: ".",
    currency_symbol: "$",
    currency_symbol_pos: "left",
    val_requiredpayment: "支払いが必要です。",
    val_creditcard: "有効なクレジットカード番号を入力してください。",
    css_vars: ["field-border-radius", "field-background-color", "field-border-color", "field-text-color", "label-color", "label-sublabel-color", "label-error-color", "button-border-radius", "button-background-color", "button-text-color", "page-break-color", "field-size-input-height", "field-size-input-spacing", "field-size-font-size", "field-size-line-height", "field-size-padding-h", "field-size-checkbox-size", "field-size-sublabel-spacing", "field-size-icon-size", "label-size-font-size", "label-size-line-height", "label-size-sublabel-font-size", "label-size-sublabel-line-height", "button-size-font-size", "button-size-height", "button-size-padding-h", "button-size-margin-top"],
    isModernMarkupEnabled: "1",
    formErrorMessagePrefix: "フォームエラーメッセージ",
    errorMessagePrefix: "エラーメッセージ",
    submitBtnDisabled: "フォーム送信中は「送信」ボタンが無効化されます。"
};

内容は必要に応じて変更・修正してください。

STEP
子テーマの functions.php に必要なコードを記載、親テーマのアップデートに影響を受けずに問題を解決

SWELLの子テーマにあるfunctions.phpへ以下のコードを書き加えます

add_action('wp_enqueue_scripts', function() {
    // 子テーマのスタイルシートを読み込み
    $timestamp = date('Ymdgis', filemtime(get_stylesheet_directory() . '/style.css'));
    wp_enqueue_style('child_style', get_stylesheet_directory_uri() . '/style.css', [], $timestamp);

    // カスタム wpforms 設定スクリプトを読み込み
    wp_enqueue_script('custom-wpforms-settings', get_stylesheet_directory_uri() . '/js/custom-wpforms-settings.js', array('jquery'), null, true);

    // WPForms のメインスクリプトファイルを読み込み
    // ここでのパスは、WPForms プラグインディレクトリ内の実際のパスに置き換えてください。
    wp_enqueue_script('wpforms-js', plugins_url('wpforms-lite/assets/js/wpforms.min.js'), array('custom-wpforms-settings'), null, true);

}, 11);
この設定で、custom-wpforms-settings.js が最初に読み込まれ、次に wpforms.min.js が読み込まれるようになります。これにより、wpforms_settings 変数が未定義のエラーを防ぐことができます。
STEP
最後にキャッシュをクリアして動作確認

変更を加えた後はブラウザのキャッシュをクリアして、ページが正しく動作するか確認してみてください。念の為この変更が他のスクリプトやスタイルに影響していないかを確認してください。

一言でいうと「読み込まれるべき正しい順番に修正すると直る」

このエラーはテーマやプラグインを何度か変更した際に発生することが多いようです。WPFormsが正しく動くためのコードがなぜかあべこべになってしまっていて、読み込む順番を誤っている状態になって正しく動かなかった…と言うことが原因でした。

純粋にWordPress立ち上げ時にSWELLを使用していたウェブサイトではWPFormsを使用していても問題はありませんでした。SWELLは便利で良いのですが、複雑すぎて問題も色々と発生しそうですね。

コラム
SWELL WordPress WPForms プラグイン 解決
この記事が良いと思ったらシェアよろしくお願いします
  • URLをコピーしました!
  • 法律事務所様のウェブサイト更新と写真撮影、トップページ画像の作成
  • 広島のイベント・商品撮影カメラマン様ホームページ制作

お問合せはこちらから

このフォームに入力するには、ブラウザーで JavaScript を有効にしてください。
読み込み中

関連記事

  • プチ自己紹介物語…『はだのワールド』──自由人の冒険録
    2025年2月22日
  • 【2025年最新】管理者のためのホームページセキュリティ対策
    2025年2月22日
  • black laptop computer turned on showing computer codes
    【悩み解決】PHP7.4以降のバージョンアップしたらブラウザでエラーがでて表示されなくなった
    2025年2月22日
  • person using macbook air
    旧Google Analytics(ユニバーサルアナリティクス)からグーグルアナリティクス4(GA4)へ
    2024年8月23日
  • インターネット検索で自分のホームページをみてもらうためにするべき事とは
    2024年4月30日
  • ホームページを作り直す場合に大切なこと【ウェブサイトリニューアル】
    2023年11月8日
  • HPを活かすには掛け合わせが必要
    ホームページを活かした事業にするためには掛け合わせが重要
    2023年9月2日
  • 写真が良いとHPが綺麗に見える
    見た目の良いホームページは写真が9割
    2023年8月30日
人気記事
  • 【悩み解決】WordPressテーマSWELLでWPFormsを使おうとした時にJavaScriptを正しくロードしていないと表示されたときの解決策
    コラム
  • ホームページを作り直す場合に大切なこと【ウェブサイトリニューアル】
    コラム
  • black laptop computer turned on showing computer codes
    【悩み解決】PHP7.4以降のバージョンアップしたらブラウザでエラーがでて表示されなくなった
    コラム
  • 制作事例
    政治家・市議会議員様紹介用のホームページ制作、写真撮影、ポスター作成(選挙)
    ホームページ新規
  • イベント用LP(ランディングページ)の作成、写真撮影
    LP
新着記事
  • 移住支援と空き家活用をつなぐWEBサイト
    ホームページ新規
  • 地域活性化をサポート!農業法人のホームページ制作
    ホームページ新規
  • プチ自己紹介物語…『はだのワールド』──自由人の冒険録
    コラム
  • 【2025年最新】管理者のためのホームページセキュリティ対策
    コラム
  • black laptop computer turned on showing computer codes
    【悩み解決】PHP7.4以降のバージョンアップしたらブラウザでエラーがでて表示されなくなった
    コラム
記事カテゴリ
  • LP
  • WordPress
  • イベントページ作成
  • オンラインショップ
  • カメラ・写真
  • コラム
  • ホームページ新規
  • リニューアル
  • 写真撮影
  • 副業
  • 勉強会・セミナー
  • 実績紹介
秦野堅市
HADANO KENICHI
はじめまして。ウェブサイト制作と写真撮影の活動をしている秦野堅市です。WordPressを使ったホームページ、LP作成、修正等ができます。
ホームページの作り直しを検討していませんか?ぜひ一度ご相談下さい。
プロフィールを詳しく見る
お問合せ
このフォームに入力するには、ブラウザーで JavaScript を有効にしてください。
読み込み中

日本全国対応可能
ホームページ新規制作・作り直し・リニューアル
写真撮影(出張、スタジオ)・カメラ勉強会

カテゴリー
よく読まれている記事
  • 【悩み解決】WordPressテーマSWELLでWPFormsを使おうとした時にJavaScriptを正しくロードしていないと表示されたときの解決策
  • ホームページを作り直す場合に大切なこと【ウェブサイトリニューアル】
  • black laptop computer turned on showing computer codes
    【悩み解決】PHP7.4以降のバージョンアップしたらブラウザでエラーがでて表示されなくなった
新着記事
  • 移住支援と空き家活用をつなぐWEBサイト
    ホームページ新規
  • 地域活性化をサポート!農業法人のホームページ制作
    ホームページ新規
  • プチ自己紹介物語…『はだのワールド』──自由人の冒険録
    コラム
  • プロフィール
  • お問い合わせ
  • プライバシーポリシー

© STUDIO Tachimachi 2025

TOPIK