概要
お問い合わせフォームを設置すると、サイトに問題があったときなどにご連絡いただけます。
個人的に必須だと思うので、なるべく安くできるように実装してみました。
目次
検討
お問い合わせ送信サービスを検討する
Formspree
Formsubmit
- 料金：無制限（実質）
- とにかく簡単・メール転送のみ
今回はFormsubmitを使用します。
手順
1.お問い合わせの固定ページを生成
お問い合わせの固定ページを生成します。
コマンド
2.お問い合わせフォームを記載
当ブログの場合は下記のような感じ
テーマがlightの場合、左に余計な余白が入るためCSSでpaddingを調整してます。
site\source\contact\index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| ---
title: お問い合わせ
date: 2025-11-09 22:43:38
---
<form class="contact-form" action="https://formsubmit.co/[自分のメールアドレス]" method="POST">
<!-- 自動リダイレクト先 -->
<input type="hidden" name="_next" value="https://[自ドメイン]]/thanks/">
<!-- スパム対策（任意） -->
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<!-- 問い合わせフォーム -->
<label for="name">お名前</label>
<input type="text" id="name" name="name" placeholder="山田 太郎" required>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="example@mail.com" required>
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="5" placeholder="ご用件を入力してください" required></textarea>
<button type="submit">送信する</button>
</form>
<style>
.e-content{
margin: 20px 0 20px 0;
}
.contact-form label {
display: block;
margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px 14px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 8px;
transition: border 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #0078d7;
box-shadow: 0 0 0 2px rgba(0,120,215,0.2);
outline: none;
}
.contact-form button {
width: 100%;
padding: 12px;
background: #0078d7;
border: none;
color: #fff;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.contact-form button:hover {
background: #005ea3;
}
.contact-form button:active {
transform: scale(0.98);
}
article .post-content{
padding:20px;
}
article.page{
padding:0;
}
</style>
|
3.Thanksページを生成
お問い合わせ後に表示させるThankページを生成します。
コマンド
4.Thanksページを編集
Thanksページを記載します。
site\source\thanks\index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ---
title: お問い合わせ完了
date: 2025-11-09 22:51:44
---
お問い合わせいただきありがとうございます。
担当者より内容を精査の上ご返信いたします。
[TOPページへ移動](/ "TOPページへ移動")
<style>
article .post-content{
padding:20px;
}
article.page{
padding:0;
}
</style>
|
5.お問い合わせページへのリンクを作成
自分の場合はフッターに設定してます。
やり方は下記にて説明してるのでよければ見てみてください！
【Hexo】プライバシーポリシーの作成（テーマ：light）
※手順3以降で説明してます。
6.初回認証を行う
画面を起動し、一度フォームを使用して初回認証メールを飛ばします。
届いた認証メールに従って認証を完了させてください。
ちなみに問い合わせフォームへの入力内容は英語でないと駄目でした。。。
確認
認証後にもう一度問い合わせフォームを入力すると、下記のように「お問い合わせフォーム」→「thanksページ」といった画面遷移が確認できます。
ちなみにメールアドレスに受信する内容は下記のような感じです。
締め
最初結構面倒だなと思い手を付けてなかったのですが、
会員登録などの面倒なことをせずに登録できて便利ですね！
しかもスパム防止などの基本的な機能もあるので、個人的には困らなそうです。
サイトの評価を上げるためにも早急に導入したいですね！
以上お疲れさまでした。
