WordPressのプラグインお問合せフォーム

目的

プラグインの導入と設置
WordPressのブロックエディタとFSE（フルサイト編集）操作に慣れる

プラグインの追加

左メニューのプラグイン＞プラグインを追加から「Contact Form 7」を追加します。インストール・有効化を行っておきましょう。

Contact Form 7とは？

Contact Form 7 は、WordPressでお問い合わせフォームを簡単に設置できる無料のプラグインです。
HTMLタグ感覚で項目を追加・調整でき、シンプルかつ柔軟にカスタマイズできるのが特長です。

プラグインを有効化すると…　クリックすると、既存のフォーム一覧が表示されます。

WordPressダッシュボードの左メニューに「お問い合わせ」という項目が追加されます。「お問い合わせ」メニュー内にある「コンタクトフォーム 1」をクリックしましょう。

タイトルをスタッフ募集中　とし、以下のように変更し、保存しておきます。

固定ページ「STAFF」に追加

電話番号の下に「Contact Form７」のブロックを追加します。

Contact Form 7 のスタイリング

基本構造（Contact Form 7 の HTML）

Contact Form 7 の出力は通常以下のような構造になります

<div class="wpcf7">
  <form> … </form>
</div>

各フォームパーツにはデフォルトで以下のようなクラスが付きます

要素	CSSクラス
テキスト入力	`.wpcf7-text`
メール入力	`.wpcf7-email`
テキストエリア	`.wpcf7-textarea`
送信ボタン	`.wpcf7-submit`
フォーム全体	`.wpcf7-form`

CSSコード例

.wpcf7 {
    max-width: 800px;
    margin: 0 auto;
    padding: 2em;
    background: #FFF;
    border: 1px solid #ddd;
    box-shadow: 3px 3px 4px #ddd;
    border-radius: 4px;
}

.wpcf7-form label {
    display: block;
    margin-bottom: 0.2em;
    font-weight: 600;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 1em;
    font-size: 1rem;
}

.wpcf7 textarea {
    min-height: 120px;
    resize: vertical;
}
.wpcf7-submit {
    background-color: #570B0B;
    color: #fff;
    padding: 12px 30px;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: auto;
    display: block;
}

.wpcf7-submit:hover {
    background-color: #F11E1E;
}

このCSSは 固定ページ下部の「カスタムCSS」 に貼ることで、そのページのみに反映されます。
複数ページに共通化したい場合は「外観 > カスタマイズ > 追加CSS」へ移動するのが便利です。