[WordPress] Contact Form 7 サンプル（基本編）：コピペOK

WordPressのお問い合わせフォームプラグイン「Contact Form 7」の最小限のサンプルです。
お問い合わせフォームのサンプルは、DEMOでご確認いただけます。

DEMO ： Contact Form 7 お問い合わせフォーム

INDEX

コンタクトフォームの編集

コンタクトフォームの編集

フォームの設定

フォームタグとHTML

以下のソースをContact Form 7の「フォーム」タブのソースエリアに貼り付けます。

<div class="form-contact">
  <table>
    <tbody>
      <tr>
        <th><span class="text-required">必須</span>お名前</th>
        <td>[text* your-name]</td>
      </tr>
      <tr>
        <th><span class="text-required">必須</span>メールアドレス</th>
        <td>[email* your-email]</td>
      </tr>
      <tr>
        <th><span class="text-required">必須</span>電話番号</th>
        <td>[tel* your-tel]</td>
      </tr>
      <tr>
        <th>お問い合わせ種別</th>
        <td>
          [checkbox checkbox-inquiry use_label_element "制作のご依頼" "WordPressレッスン"
          "無料相談（制作依頼未定の方もお気軽に）"]
        </td>
      </tr>
      <tr>
        <th>お問い合わせ詳細</th>
        <td>[textarea your-message]</td>
      </tr>
    </tbody>
  </table>
  <div class="form-contact__btn">[submit class:btn "上記内容で送信する"]</div>
</div>

CSS

フォームのCSSは以下になります。

/* --------------------------------
    Form
-------------------------------- */

/* ------ テーブルレイアウト ------- */
.form-contact th,
.form-contact td {
  border-bottom: solid 1px #ccc;
}

.form-contact tr:last-of-type th,
.form-contact tr:last-of-type td {
  border: none;
}

.form-contact th {
  font-weight: normal;
  text-align: left;
  width: 30%;
}

.form-contact td {
  padding: 20px 20px;
  width: 70%;
}

@media screen and (max-width: 599px) {
  .form-contact th,
  .form-contact td {
    border: none;
    display: block;
    padding: 0;
    width: 100%;
  }

  .form-contact tr {
    display: block;
    margin-bottom: 20px;
  }
}

/* ------ フォームスタイル ------- */
.form-contact {
  position: relative;
}

.form-contact input,
.form-contact textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font: 15px/24px sans-serif;
  margin: 8px 0;
  outline: none;
  padding: 10px 20px;
  transition: 0.3s;
}

.form-contact textarea {
  width: 100%;
}

.form-contact input:focus,
.form-contact textarea:focus {
  border: 1px solid #0086d1;
}

.text-required {
  background: #e5004f;
  border-radius: 3px;
  color: #fff;
  display: inline;
  font-size: 1.2rem;
  margin-right: 1rem;
  padding: 2px 7px 4px;
  position: relative;
  top: -2px;
  vertical-align: middle;
}

.form-contact__btn {
  display: flex;
  justify-content: center;
  margin: 50px 0 0 0;
}

.form-contact__btn input[type="submit"] {
  background-color: #0086d1;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  letter-spacing: 0.15rem;
  padding: 20px 25px;
  width: 250px;
}

.form-contact__btn input[type="submit"]:hover {
  opacity: 0.8;
}

@media screen and (max-width: 599px) {
  .form-contact input,
  .form-contact textarea {
    box-sizing: border-box;
    width: 100%;
  }

  .checkbox-inquiry .wpcf7-list-item {
    display: block;
  }

  .form-contact input[type="checkbox"] {
    float: left;
    margin-right: 10px;
    width: auto;
  }

  .wpcf7-checkbox > .wpcf7-list-item {
    display: block;
    margin-left: 0;
  }

  .wpcf7-list-item label {
    display: block;
    line-height: 1.7;
    overflow: hidden;
  }

  .wpcf7-checkbox {
    display: block;
    margin-top: 20px;
  }
}

メールの設定

フォームの送信内容をメールに設定します。

各項目の内容は以下になります。
[]角カッコの中は、フォームに設定している値です。

項目	設定内容
送信先	[_site_admin_email]
送信元	[_site_title]
題名	[_site_title] ：「Contact Form 7」
追加ヘッダー	Reply-To: [your-email]
メッセージ本文	下記の「メッセージ本文（サンプル）」をコピペしてください。

メッセージ本文（サンプル）

差出人: [your-name] <[your-email]>
題名: Webサイト制作のメモ書き：「Contact Form 7」デモ


お問い合わせ内容
---------------------------------------
お名前：[your-name]
おメールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ種別：[checkbox-inquiry]
お問い合わせ詳細:
[your-message]
---------------------------------------

-- 
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

メッセージ、その他設定

今回は、デフォルトのままにしています。