👍🏼WordPressで欠かせないお問い合わせページを、たったの数ステップで簡単に作成する方法をご紹介します。
特に、ブログを始めたばかりの🔰初心者の方へおすすめです。
ステップ1：プラグインのインストールと有効化
お問い合わせフォーム機能を実現するプラグイン「StickEasy Protected Contact Form (SPCF)」をインストールします。
- WordPress管理画面の左メニューから、「プラグイン」→「プラグインを追加」をクリックします。
- 検索窓に「stickeasy protected contact form」と入力します。
- 表示されたプラグインの「今すぐインストール」ボタンをクリックします。
- インストール完了後、「有効化」ボタンが現れるので、それをクリックします。
これで、フォームを作成するための準備が整いました。
ステップ2：固定ページにお問い合わせフォームを設置
次に、フォームを表示するお問い合わせページを作成します。
- 管理画面から「投稿」または「固定ページ」を選択し、「新規追加」をクリックします。（お問い合わせページは、一度作成すれば更新頻度が低い固定ページでの作成が一般的です。）
- ページタイトルを「お問い合わせ」などと設定します。
- 本文のブロックエディタ（またはテキストエディタ）に、次のショートコードを入力します。
[spcf_form]
- 入力後、「公開」（または「下書き保存」）をクリックします。
ステップ3：フォームの確認と完了
公開したページを確認すれば、フォームが完成しているはずです。
これだけで、安全なスパム対策機能付きのお問い合わせページが完成です！
⚙️ StickEasy Protected Contact Formの設定
「StickEasy Protected Contact Form（SPCF）」プラグインでは、設定画面にてお問い合わせフォームの各項目やスパム対策機能を細かく設定できます。
各設定項目と機能
入力項目のラベルと表示・必須設定
フォームに表示される各入力欄のラベルや、その表示・必須設定を調整できます。
- 【名前欄のラベル】： フォームの最初の入力欄のタイトルに表示されるテキストです。（例: 「お名前」「氏名」）
- 【使用する】： チェックを外すと、この入力欄はフォームに表示されなくなります。
- 【必須にする】： チェックを入れると、この入力欄への入力が必須になります。未入力の場合、フォームは送信できません。
- 【メールアドレス欄のラベル】： メールアドレス入力欄のタイトルに表示されるテキストです。（例: 「メールアドレス」「連絡先メール」）
- 【メッセージ欄のラベル】： 問い合わせ内容を入力するテキストエリアのタイトルに表示されるテキストです。（例: 「メッセージ」「お問い合わせ内容」）
送信完了メッセージ
- 【送信完了メッセージ】： ユーザーがフォームを正常に送信した後に表示されるメッセージです。（例: 「お問い合わせありがとうございます。」）
受信者のメールアドレス
- 【受信者のメールアドレス】： フォームから送信された内容が届くメールアドレスを指定します。デフォルト設定として、WordPressサイトの管理者メールアドレスが指定されます。
スパム対策設定
SPCFビルドインのスパム対策機能で、不要なスパムメールからサイトを守ります。
- 【スパム対策を有効化】： このチェックボックスにチェックを入れると、スパム対策機能が有効になります。
- 【最小送信時間（秒）】： フォームを開いてから送信されるまでの時間が、この設定値以内である場合、ボットによる自動送信（スパム攻撃）と判断してブロックします。通常、人間がフォームを真面目に入力して5秒以内に送信することは稀なため、初期設定は5秒程度としています。必要に応じて時間を長くします。
- 【禁止語リスト】： 送信内容にこのリストに含まれる単語やフレーズがあった場合、スパムとしてブロックします。このリストは自由に編集でき、サイトに合わせたスパムワードを追加・削除できます。
また、メールアドレスやIPアドレスもブロック対象でリストに追加できます。
例：
viagra
bit.ly
visitor@email.com
123.45.67.89
設定の保存
- 【設定を保存】： 設定画面で行った変更を適用するために、必ずこのボタンをクリックしてください。保存しないと、変更は反映されません。
スパムログ
- スパムログ： ブロックされたスパムの内容に関する情報がログファイルに記録され、ここに表示されます。ログの表示は最大5MBまで残り、この容量を超えると自動的にクリアされます。
- 【ログをクリア】： ログファイルを完全に削除し、表示されているスパムログを消去します。
応用編
フォームのスタイルをより個性的に変更したい場合は、以下の方法で実現できます。
ラベルにHTMLタグを使う
各ラベルのテキストには基本的なHTMLタグを使用できます。例えば、次のように設定できます。
この設定では、以下のように表示されます。
CSSを編集する
フォームにはスタイル調整用のIDとクラスが設定されています。CSSを編集することで、さまざまなデザインのフォームを実現できます。
これらのIDやクラスのCSSを調整することで、お好みのデザインに合わせてフォームの外観を自由にカスタマイズできます。
これらは、ショートコードの後にカスタムHTMLブロックなどで追記することで適用されます。
以下はAIが作ってくれたサンプルです。
<style>
/* ラベル（控えめでクラシックな強調） */
.spcf-label {
display: inline-block;
font-size: 1.05em;
font-weight: 600;
color: #444;
padding: 3px 6px;
border-left: 4px solid #888;
background-color: #f9f9f4;
border-radius: 2px;
margin-bottom: 6px;
}
/* テキスト入力欄 */
.spcf-input {
width: 100%;
padding: 10px 12px;
font-size: 15px;
border: 1.5px solid #bbb;
border-radius: 4px;
background: #fff;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* フォーカス時（落ち着いた強調） */
.spcf-input:focus {
border-color: #666;
box-shadow: 0 0 4px rgba(0,0,0,0.15);
}
/* テキストエリア（同じ雰囲気） */
.spcf-textarea {
width: 100%;
padding: 12px;
font-size: 15px;
border: 1.5px solid #bbb;
border-radius: 6px;
background: #fff;
outline: none;
resize: vertical;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.spcf-textarea:focus {
border-color: #666;
box-shadow: 0 0 4px rgba(0,0,0,0.15);
}
/* ボタン（クラシックな質感） */
.spcf-button {
display: inline-block;
padding: 10px 26px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: #555;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
/* ホバーで控えめな反応 */
.spcf-button:hover {
background: #333;
transform: scale(1.02);
}
/* クリック時 */
.spcf-button:active {
transform: scale(0.97);
}
/* 成功メッセージ（淡く・優しい） */
.spcf-success-message {
background-color: #e9f6ea;
color: #2c5e2e;
padding: 14px 18px;
border: 1.5px solid #79b37d;
border-radius: 4px;
font-size: 1em;
}
/* エラーメッセージ（赤だが控えめ） */
.spcf-error-message {
background-color: #fbeaea;
color: #7a1e1e;
padding: 14px 18px;
border: 1.5px solid #d47a7a;
border-radius: 4px;
font-size: 1em;
}
</style>
<style>
/* ===================================================
01. フォーム本体 — 脈打つホログラム光フォーム
=================================================== */
#spcf-contact-form {
padding: 24px;
border-radius: 22px;
background: rgba(255,255,255,0.85);
border: 4px solid transparent;
background-image:
linear-gradient(#ffffffee, #ffffffee),
linear-gradient(120deg, #ff00c8, #ff8800, #00dbff, #9d00ff);
background-clip: padding-box, border-box;
background-size: 100% 100%, 300% 300%;
position: relative;
overflow: hidden;
animation: formBreath 6s infinite ease-in-out;
}
@keyframes formBreath {
0% { box-shadow: 0 0 18px rgba(255,0,180,0.35); background-position: 0% 50%; }
50% { box-shadow: 0 0 45px rgba(0,220,255,0.55); background-position: 100% 50%; transform: scale(1.01); }
100% { box-shadow: 0 0 18px rgba(255,0,180,0.35); background-position: 0% 50%; }
}
/* 02. フォーム背景 — 浮遊光エフェクト */
#spcf-contact-form::before {
content: "";
position: absolute;
width: 220%;
height: 220%;
top: -60%;
left: -60%;
background: repeating-radial-gradient(circle,
rgba(255,255,255,0.25) 0px,
transparent 15px,
rgba(255,255,255,0.35) 30px);
animation: sparkleFloat 12s linear infinite;
pointer-events: none;
}
@keyframes sparkleFloat {
0% { transform: rotate(0deg) scale(1); opacity: 0.6; }
50% { transform: rotate(180deg) scale(1.2); opacity: 1; }
100% { transform: rotate(360deg) scale(1); opacity: 0.6; }
}
/* 03. 入力欄 — ホログラム枠＋反応アニメ */
.spcf-input,
.spcf-textarea {
width: 100%;
padding: 14px;
border-radius: 12px;
font-size: 16px;
border: 3px solid transparent;
outline: none;
background-image:
linear-gradient(#fff,#fff),
linear-gradient(45deg,#ff00b3,#ff8800,#00c8ff);
background-origin: border-box;
background-clip: padding-box, border-box;
background-size: 100% 100%, 250% 250%;
animation: inputLight 5s infinite ease-in-out;
transition: all .35s ease;
}
@keyframes inputLight {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.spcf-input:focus,
.spcf-textarea:focus {
transform: scale(1.05);
box-shadow: 0 0 25px rgba(255,0,180,0.6),
0 0 45px rgba(0,220,255,0.6);
}
/* 04. ラベル — ホログラム発光＋入力連動アニメ */
.spcf-label {
display: inline-block;
font-size: 1.1em;
font-weight: bold;
color: #d47a7a;
background: linear-gradient(90deg, #ffe4e6, #fff9fc);
padding: 4px 8px;
border-left: 4px solid #ffb6c1;
border-radius: 6px;
margin-bottom: 6px;
animation: labelFloat 3s ease-in-out infinite;
}
@keyframes labelFloat {
0% { transform: translateY(0) rotate(0deg); opacity:1; }
25% { transform: translateY(-3px) rotate(-1deg); }
50% { transform: translateY(0) rotate(1deg); opacity:1; }
75% { transform: translateY(-2px) rotate(-1deg); }
100% { transform: translateY(0) rotate(0deg); opacity:1; }
}
/* 05. ボタン（ぽよん跳ね＋グラデーション流れ） */
.spcf-button {
display: inline-block;
padding: 12px 28px;
font-size: 16px;
font-weight: bold;
color: #fff;
border: none;
border-radius: 50px;
cursor: pointer;
background: linear-gradient(45deg, #ffd1dc, #cfc9ff, #a2e4f5);
background-size: 300% 300%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: gradientFlow 5s ease infinite;
}
.spcf-button:hover {
transform: scale(1.05);
animation: gradientFlow 5s ease infinite, buttonBounce 0.6s ease infinite;
box-shadow: 0 0 15px rgba(255,182,193,0.5),
0 0 20px rgba(175,238,238,0.5);
}
.spcf-button:active {
transform: scale(0.97);
}
@keyframes gradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes buttonBounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* 06. 成功メッセージ（上下膨らみ＋ゆっくり弾む＋回転＋色付きグロー） */
.spcf-success-message {
background-color: #d0f0c0;
color: #2b7a0b;
padding: 40px 20px;
border: 2px solid #90ee90;
border-radius: 10px;
font-size: 1.15em;
text-align: center;
box-shadow: 0 6px 12px rgba(0,0,0,0.12);
transform-origin: center top;
animation: successPop 1.2s ease-out forwards,
successBounceRotate 2s ease-in-out 1.2s infinite,
glowPulseColor 3s ease-in-out infinite;
}
@keyframes successPop {
0% { transform: scale(1,1); }
50% { transform: scale(1.2,1.5); }
100% { transform: scale(1.1,1.2); }
}
@keyframes successBounceRotate {
0% { transform: scale(1.1,1.2) rotate(0deg); }
20% { transform: scale(1.15,1.25) rotate(-2deg); }
40% { transform: scale(1.08,1.15) rotate(1deg); }
60% { transform: scale(1.12,1.22) rotate(-1deg); }
80% { transform: scale(1.1,1.18) rotate(0.5deg); }
100% { transform: scale(1.1,1.2) rotate(0deg); }
}
@keyframes glowPulseColor {
0% { box-shadow: 0 0 0 rgba(144,238,144,0); }
25% { box-shadow: 0 0 15px rgba(144,238,144,0.5); }
50% { box-shadow: 0 0 18px rgba(255,182,193,0.5); }
75% { box-shadow: 0 0 15px rgba(173,216,230,0.5); }
100% { box-shadow: 0 0 0 rgba(144,238,144,0); }
}
/* 07. エラーメッセージ（横揺れ＋傾き） */
.spcf-error-message {
background-color: #ffd1dc;
color: #a70036;
padding: 15px 20px;
border: 2px solid #ffb6c1;
border-radius: 8px;
font-size: 1.1em;
animation: errorShake 0.5s ease-in-out, errorShakeFun 0.5s ease-in-out;
}
@keyframes errorShake {
0% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
100% { transform: translateX(0); }
}
@keyframes errorShakeFun {
0% { transform: rotate(0deg); }
20% { transform: rotate(-5deg); }
40% { transform: rotate(5deg); }
60% { transform: rotate(-3deg); }
80% { transform: rotate(3deg); }
100% { transform: rotate(0deg); }
}
</style>おわりに
私もブログを始めた当初、お問い合わせページを作るために外観メニューやテーマの機能をあれこれ探しましたが、見つかりませんでした。
まさか、お問い合わせ機能が標準装備されていないとは思わず、とても驚いたことを覚えています。
仕方がないので、しばらくは標準のコメント機能を代用していました。
初心者にとって、お問い合わせページを用意するのは意外と簡単ではありません。できればWordPressの標準機能になってくれたら良いのに、と今でも思います。
今回紹介したプラグインは、初心者でもとても簡単に利用できるものです。
さすがに「3分で完成」とまではいかないかもしれませんが、固定ページにショートコードを記述するだけでお問い合わせページが作れるのは大きなメリットだと思います。
さらにこのフォームはスパム対策にも対応しているため、お問い合わせ用に別途スパム対策を用意する必要もありません。
これは初心者にとって非常に心強いはずです。
また、記事コメントへのスパム対策としては、別途ご紹介している「Tiny Comment Spam Blocker」も用意しています。
両方を併用していただければ、すさまじい量のスパム攻撃を受けるようなブログに成長するまでは十分に対応できると思います。ぜひご活用ください。
コメント