ワードプレスお問合せフォームのカスタマイズ【Contact Form 7】
完成形
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/21.09.11_スクリーンショット-2021-09-11-140220.jpg?resize=1024%2C803&ssl=1)
お問合せフォーム【Contact Form 7】のカスタマイズ
このプラグインのカスタマイズ
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-10-6.14.45.jpg?resize=612%2C323&ssl=1)
デフォルトのページ
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-10-7.44.56.jpg?resize=626%2C693&ssl=1)
もう少し分かりやすくカスタマイズ
場所
お問い合わせ>コンタクトフォーム
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-10-6.15.06.jpg?resize=512%2C258&ssl=1)
新規作成
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/21.09.11_スクリーンショット-2021-09-11-140809.jpg?resize=957%2C1024&ssl=1)
<table class="cf7_table">
<tr>
<th>お名前</th>
<td>[text* your-name placeholder "例:ぴよ山 ぴよ太"]</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>[email* your-email placeholder "例:××@××.com"]</td>
</tr>
<tr>
<th>【確認用】メールアドレス</th>
<td>[email* your-email placeholder "例:上記と同じアドレスを確認のため記入××@××.com"]</td>
</tr>
<tr>
<th>題名</th>
<td> [text your-subject placeholder "例:お仕事の依頼について"]</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td class="message-100">[textarea* your-message placeholder "例:ほげほげほげほげ、ほげほげほげほげ。"]</td>
</tr>
</table>
<p class="cf7_btn">[submit "送信する ▶"]</p>
そのまま右側にある「保存」ボタンをクリックする
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-10-6.29.36.jpg?resize=377%2C206&ssl=1)
タイトルの下に出るショートコードをコピーする
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/21.09.11_スクリーンショット-2021-09-11-140943.jpg?resize=1024%2C269&ssl=1)
固定ページ>新規作成>タイトル記入(お問い合わせ)>ショートコード>コピペしたショートコードを入れる>公開
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-10-6.48.34.jpg?resize=1024%2C330&ssl=1)
完成
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/09/21.09.11_スクリーンショット-2021-09-11-140220.jpg?resize=1024%2C803&ssl=1)
送信ボタンの変更は後日するよ!
ディスカッション
コメント一覧
まだ、コメントがありません