感想・レビュー

Contact Form 7で送信ボタンが表示されない!原因と解決方法を徹底解説(Affinger6対応)

スポンサードリンク

「WordPressでお問い合わせフォームを作ったのに、送信ボタンが表示されない…?」 そんなトラブルに悩んでいませんか? 実は私も、Affinger6でサイト運営中に同じ壁にぶつかりました。

原因は「フォームの項目にsubmitを選んでいなかったこと」。 Contact Form 7はカスタム必須なんです! 今回は、送信ボタンが表示されない原因とその解決方法を、わかりやすく解説します。


Contents

Contact Form 7の設定を確認

WordPressでは、Contact Form 7というプラグインを使ってフォームを作成することが一般的ですが、 フォーム作成画面で「送信ボタン(submit)」を追加し忘れると、ショートコードを貼っても送信ボタンが出ません。

たとえば、こんなコードになっていたらNG:

[text* your-name placeholder "お名前"]

[email* your-email placeholder "メールアドレス"]

➡ 送信ボタンがないので、入力できても送信できません!


【解決手順】送信ボタンを追加しよう!

以下の手順で、正常にフォームを表示・送信できるようになります。

✅ステップ1:プラグインの確認

まず「Contact Form 7」がインストール&有効化されているか確認。 「プラグイン」>「インストール済みプラグイン」で確認できます。

✅ステップ2:フォームに必要な項目追加

「お問い合わせ」>「コンタクトフォーム」から、対象フォームを開き、 以下のように[submit "送信"]を最後に追加します。

[text* your-name placeholder "お名前"]

[email* your-email placeholder "メールアドレス"]

[textarea your-message placeholder "お問い合わせ内容"]

[submit "送信"]

✅ステップ3:ショートコードを固定ページに貼る

作成したフォームのショートコードをコピーして、 固定ページ内の「ショートコードブロック」または「カスタムHTML」に貼ります。 例:

[contact-form-7 id="123" title="お問い合わせ"]

✅ステップ4:表示&送信テスト

  • ページを更新し、送信ボタンが表示されているか確認
  • テスト送信して、確認メールが届くかチェック

【Affinger6との相性に注意】

Affinger6ではテーマによって、エディタや出力制御の影響でショートコードが表示されないことも。 その場合は:

  • 「AFFINGER管理」>「デザイン」や「投稿ページ設定」を確認
  • Gutenberg(ブロックエディタ)では「ショートコードブロック」を明示的に使う

【まとめ】 Contact Form 7の「送信ボタンが出ない問題」は、

  • フォームに[submit]を選択してない
  • 表示設定ミス
  • ID不一致 などが主な原因です。

今回のように、送信ボタンを追加し忘れていただけでも、フォームは全く機能しません。 カスタマイズが必要とはいえ、正しく設定すればAffinger6でも問題なく動作します。

ぜひこの手順で、あなたのフォームも正常に稼働させてください!

スポンサードリンク

  • この記事を書いた人

スガワラ

-感想・レビュー