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

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

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

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

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

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

  .my-input {
    &: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」を消します