【WordPress】Contact Form 7 お問合せフォームをおしゃれに作る方法（デザインサンプル）

ブログでは、お問合せフォームを設置することが一般的ですね。お問合せフォームを作成する場合は、Contact Form 7 を利用するのが簡単です。

しかしお問合せフォームをそのまま使っただけでは、フォームのデザインがシンプルです。すこしデザインしてみたくなりますね。

ポイント

本記事では、

Contact Form 7 を使ったお問合せデザインサンプルを紹介します。

お問合せページにもデザインを！

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 Contact Form 7 を利用したお問合せページ
2 Contact Form 7 のデザインサンプル
3 まとめ：Contact Form 7 デザインサンプル

Contact Form 7 を利用したお問合せページ

Point.

Contact Form 7
お問合せページ

「Contact Form 7」プラグインを使うと、簡単にお問合せページを作ることができます。

Contact Form 7 の詳しい使い方は、こちら。

: 【WordPress】お問い合わせページと送信後のサンクスページを簡単に作る方法！（Contact Form 7 プラグイン）

「お問い合わせページは、ユーザーがサイト管理者への質問やお仕事の依頼などをするための必要な窓口になり、また、Google AdSense を申請するうえでも必要な機能とも言われています。本記事では、「Contact Form 7」プラグインを利用した「お問い合わせページ」の設置方法を紹介します。

続きを見る

Contact Form 7 では、入力エリアに設定する ”HTML+CSS” で、いろいろなデザインにすることができます。

本記事でサンプルデザインを紹介していますので参考にしてください。

Contact Form 7 のデザインサンプル

Point.

Contact Form 7
デザインサンプル

■ シンプルテーブルパターン

お名前
E-mail
メッセージ本文

コードはこちら

クリックして下さい

<div class="my-container">
  <table class="my-table-contactform7">
    <tr>
      <th><span class="my-title-contactform7">お名前</span></th>
      <td>[text* your-name placeholder"例：○○○○"] </td>
    </tr>
  
    <tr>
      <th><span class="my-title-contactform7">E-mail</span></th>
      <td>[email* your-email placeholder"例：×××@×××.com"]</td>
    </tr>
  
    <tr>
      <th><span class="my-title-contactform7">メッセージ本文</span></th>
      <td>[textarea* your-message placeholder"例：ここにメッセージを入力してください"] </td>
    </tr>
  
    <tr>
      <td class="my-td-sendbutton" colspan="2">[submit class:my-btn-contactform7 "送信する"]</td>
    </tr>
  </table>
</div>

<style>
.my-container {
    width : 80%;
    margin : 0 auto;
}

.my-table-contactform7 th {
    background-color : #ffeeee;
}

.my-table-contactform7 input, .my-table-contactform7 textarea {
    background-color : #fff;
    width : 100%;
}

.my-td-sendbutton{
    text-align : center;
}

.my-btn-contactform7 {
    background-color : #eeeeee !important;
    width: 128px !important;
}
</style>

単純に table タグで整形しています。

■ 「必須」表記

コードはこちら

クリックして下さい

<div class="my-cf7-container">
    <div>
    </div>
    <div class="my-cf7-form-contactform7">
        <div class="my-cf7-title-contactform7">
            <p><span class="my-cf7-required-mark">必須</span><span class="my-cf7-title">Name</span>
            </p>
        </div>
        [text* your-name class:my-cf7-input]
    </div>
    <div class="my-cf7-form-contactform7">
        <div class="my-cf7-title-contactform7">
            <p><span class="my-cf7-required-mark">必須</span><span class="my-cf7-title">E-mail</span>
            </p>
        </div>
        [email* your-email class:my-cf7-input]
    </div>
    <div class="my-cf7-form-contactform7">
        <div class="my-cf7-title-contactform7">
            <p><span class="my-cf7-required-mark">必須</span><span class="my-cf7-title">Title</span>
            </p>
        </div>
        [text* your-subject class:my-cf7-input]
    </div>
    <div class="my-cf7-form-contactform7">
        <div class="my-cf7-title-contactform7">
            <p><span class="my-cf7-required-mark">必須</span><span class="my-cf7-title">Message</span>
            </p>
        </div>
        [textarea* your-message class:my-cf7-input]
    </div>
    <div class="my-cf7-form-contactform7">
        [submit "送信する"]
    </div>
</div>

<style>
.my-cf7-container{
  width : 80%;
  margin : 0 auto;

  .my-cf7-required-mark {
    padding: 5px;
    background: #ffffff;
    color: #303030;
    border-radius: 5px;
    border : 2px solid #ED7D31;
    margin-right: 10px;
    font-size : small;
  }

  .my-cf7-form-contactform7 {
    margin-top : 20px;
    margin-bottom : 20px;
  }

  .my-cf7-title-contactform7 {
    margin-bottom : 10px;
  }

  .my-cf7-input {
      width : 100%;

    &:focus {
        /* ブラウザーの既定のフォーカス表示を削除 */
        outline: none;

       /* フォーカスで背景色を変える */
       background-color: #ffeeee !important;
    }
  }
}
</style>

「my-required-mark」クラスで必須表記をCSSで装飾しています

■ タイトルがくるっと回るパターン

コードはこちら

クリックして下さい

<div class="my-container">
    <div></div>
    <div class="my-area my-x-size-long">
        <!-- お名前 -->
        [text* your-name class:my-input]
        <label class="my-label" for="name">Name</label>
    </div>
    <div class="my-area my-x-size-long">
        <!-- メールアドレス -->
        [email* your-email class:my-input]
        <label class="my-label" for="email">E-mail</label>
    </div>
    <div class="my-area my-x-size-long">
        <!-- タイトル -->
        [text your-subject class:my-input]
        <label class="my-label" for="email">Title</label>
    </div>
    <div class="my-area my-x-size-long">
        <!-- メッセージ（単文） -->
        [text* your-message class:my-input]
        <label class="my-label" for="message">Message</label>
    </div>
    <div class="my-area my-x-size-100 my-center">
        [submit class:my-submit-button "送信する"]
    </div>
</div>

[response]

<style>
.my-container{
    width : 90%;
    margin : 0 auto;

    .my-area {
        position: relative;
        margin-top: 32px;
        margin-left: 5px;
        margin-right: 5px;
    }
   
    .my-input {
        width: 100%;
        height: 36px;
        border-top: 0 !important;
        border-bottom: 2px solid !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-color: #808000 !important;
        font-family: Lusitana, serif;
        font-size: 18px;
        line-height: 26px;
        font-weight: 400;
        background-color: rgba(255, 255, 255, 0.0) !important;
        margin-bottom : 12px;

        &:focus {
            /* ブラウザーの既定のフォーカス表示を削除 */
            outline: none;

            /* フォーカスで背景色を変える */
            background-color: #eeeeff !important;
        }
    }

    .my-label {
        position: absolute;
        top : -24px;
        left: 20px;
        bottom: 11px;
        font-family: Lusitana, serif;
        font-size: 18px;
        line-height: 26px;
        font-weight: 400;
        color: #888;
        cursor: text;
        transition: transform .2s ease-in-out;
    }
   
    .my-submit-button {
        background-color: #808000;
        color: #fff;
        font-family: Raleway, sans-serif;
        font-size: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-right: 16px;
        padding-left: 16px;
        border: none;
    }

    .my-x-size-long {
        width : calc(96% + 10px);
    }

    .my-x-size-100{
        width : 100%;
    }

    .my-center {
        text-align : center;
    }
}

div.wpcf7 .wpcf7-spinner {
    display: none !important;
}

.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    display: none;
}

</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const inputFields = document.querySelectorAll(".my-input");

    inputFields.forEach(function(input) {
        const formField = input.closest(".my-area");
        if (formField) {
            const label = formField.querySelector(".my-label");
            let isRotated = false; // ラベルが回転したかどうかのフラグ

            function animateLabel() {
                if (!isRotated) {
                    // ラベルが回転していない場合、回転アニメーションを設定
                    label.style.transition = "transform 0.3s ease-in-out";
                    label.style.transform = "rotate(360deg)";
                    isRotated = true; // ラベルが回転したことをフラグで記録
                }
            }

            function resetLabel() {
                // フォーカスが外れたとき、ラベルを元の位置に戻す
                label.style.transition = "transform 0.3s ease-in-out";
                label.style.transform = "rotate(0deg)";
                isRotated = false; // フラグをリセット
            }

            input.addEventListener("focus", animateLabel);
            input.addEventListener("blur", resetLabel);
        }
    });
});
</script>

ContactForm7 でフォームを作ると、ラベルを子要素にできないため、CSSだけでは限界があり、JavaScript を使ってクルっと回しています。
「.wpcf7-spinner」があるとセンタリングがずれるので表示しない設定です
フォームの入力エラー表示を行うとレイアウトが崩れるので「.wpcf7-not-valid-tip」を消します

WordPress のお役立ちテクニックはこちら

まとめ：Contact Form 7 デザインサンプル

Point.

デザインサンプル
まとめ

本記事では、Contact Form 7 のデザインサンプルを紹介させていただきました。

お問い合わせページも見目麗しく、きれいなデザインにしたいですね。

素敵な演出で、素敵なサイトを作ってくださいね。

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る