WordPressでお問い合わせフォームの作り方！簡単ステップ

「Google reCAPTCHA」にアクセスします。
「v3 Admin Console」ボタンをクリックして、Googleアカウントログインをしていない場合、Googleアカウントでログインします。
新しいサイトを登録するためのフォームに必要な情報（ラベル、reCAPTCHAのタイプ（v3を選択）、ドメイン名）を入力し「送信」をクリックします。

「サイトキー」と「シークレットキー」が生成されます。これらは後のステップで使用しますので、メモしておきましょう。

WordPressの管理画面にログインします。「Contact Form 7」プラグインがインストールされていることを確認し、設定ページにアクセスします。「お問い合わせ」セクションの「インテグレーション」タブをクリックします。ここで「reCAPTCHA」セクションを見つけ、「インテグレーションのセットアップ」をクリックします。

先ほどメモした「サイトキー」と「シークレットキー」を入力し、設定を保存します。

右下にreCAPTCHAバッジが表示されている場合、reCAPTCHAの設定は完了しております。ただし常に表示されていることで場合によっては記事ページが見にくくなる可能性もあるため、非表示にしましょう。

非表示にする手順は『reCAPTCHA バッジを非表示にします。どうすればよいですか？』に則って実施する必要があります。

コンタクトフォームの編集から一番下に以下のコードを追加します。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

カスタマイズをクリック

追加CSSをクリック

追加CSSに以下のコードを張り付けて「公開」をクリックで非表示になります。

『フォーム』項目に以下を貼り付けます。

<div id="cf7-tbl">
<table>
<tbody>
<tr>
<th><span class="required">必須</span>氏名</th>
<td> [text* your-name] </td>
</tr>
<tr>
<th><span class="required">必須</span>メールアドレス</th>
<td>[email* your-email]</td>
</tr>
<tr>
<th><span class="required">必須</span>電話番号</th>
<td>[tel* your-tel] </td>
</tr>
<tr>
<th><span class="required">必須</span>題名</th>
<td>[text* your-subject]</td>
</tr>
<tr>
<th><span class="required">必須</span>メッセージ本文</th>
<td>  [textarea* your-message] </td>
</tr>
<tr>
<th><span class="optional">任意</span>備考 (任意)</th>
<td>  [textarea your-remarks] </td>
</tr>
</table>
</tbody>
</div>
[submit "上記の内容で送信する"]

このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a>が適用されます。

『メッセージ本文』項目に以下を貼り付けます。

[_site_title] 『[_site_url]』 のコンタクトフォームに以下お問い合わせがありました。

【氏名】
[your-name] 

【メールアドレス】
[your-email]

【電話番号】
[your-tel]

【題名】
[your-subject]

【本文】
[your-message]

【備考】
[your-remarks]

メール（２）の『メッセージ本文』項目に以下を貼り付けます。

この度はお問い合わせいただきありがとうございます。
以下のお問い合わせを送信いたしました。
確認次第ご連絡いたしますので、お手数おかけしますが今しばらくお待ちください。

【氏名】
[your-name] 

【メールアドレス】
[your-email]

【電話番号】
[your-tel]

【題名】
[your-subject]

【本文】
[your-message]

【備考】
[your-remarks]

-- 
あなたのメールアドレスを使用して、私たちのウェブサイト ([_site_title] 『[_site_url]』) のコンタクトフォームに送信がありましたので、その控えとして本メールを送ります。もしもその送信について心当たりのない場合は、どうぞこのメッセージを無視してください。

メール（２）の『メッセージ本文』項目に以下を貼り付けます。

追加CSSに以下を貼り付けます。

/************************************
** お問い合わせフォームデザイン
************************************/
#cf7-tbl{
width: 800px;
}

#cf7-tbl table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
color: #444;
}
#cf7-tbl table tr th,
#cf7-tbl table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
vertical-align: middle;
}
#cf7-tbl table tr th{
width: 35%;
background: #eee;
}
@media screen and (max-width:768px){
#cf7-tbl{
width: 100%;
}

#cf7-tbl table,
#cf7-tbl table tbody,
#cf7-tbl table tr,
#cf7-tbl table tr th,
#cf7-tbl table tr td{
display: block;
}

#cf7-tbl table{
width: 100%;
border-width: 0 0 1px 0;
}

#cf7-tbl table tr th,
#cf7-tbl table tr td{
width: 100%;
padding: 3% 5%;
}

#cf7-tbl table tr td{
border-width: 0px 1px 0px 1px;
}
}
/*＜必須＞文字デザイン*/
.required{
font-size:.8em;
padding: 5px;
background: #F57500;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*＜任意＞文字デザイン*/
.optional{
font-size:.8em;
padding: 5px;
background: #000080;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/* 入力項目デザイン */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
	background-color: #eff1f5;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* ＜送信する＞ボタンデザイン */
input.wpcf7-submit {
    display: block;
    padding: 15px;
    width: 400px;
    background: #ffaa56;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 2px;
    margin: 15px auto 0
}
@media screen and (max-width:768px){
input.wpcf7-submit {
width: 250px;
}
}

input.wpcf7-submit:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
	transform: translateY(-4px);
	opacity:0.7;
}
/* エラーメッセージデザイン */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}