ブログ
Static Formを使ってHTMLだけのサイトにお問い合わせフォームをつくる方法
HTML、CSSのみでは、お問い合わせフォームは作れません。
PHPなど別の言語を使えばお問い合わせフォームを作れますが、勉強などが大変です。
お問い合わせフォームをHTML内に作るサービスは調べればいろいろ出てきますが、無料のサービスはなかなかないです。
Static Formを使えば無料で実装できるのでそちらの使い方を今回は解説しようと思います。
※海外のサービスなので、日本語には対応できません。
自分で作ったFormに実装する方法を解説したいので、今回は簡単なお問い合わせフォームのHTMLを用意しました。
<form action="" method="post"> <div> <label for="name">名前</label> <input type="text" id="name" name="name"> </div> <div> <label for="email">メールアドレス</label> <input type="email" id="email" name="email"> </div> <div> <label for="message">内容</label> <textarea id="message" name="message"></textarea> </div> <input type="submit" value="送信する"> </form>
Static Formはこちら(使い方はこちらに書いてありますが、英語だし少しわかりづらいです)
https://www.staticforms.xyz/
https://www.staticforms.xyz/
こちらのサイトのStep1の箇所にメールアドレスを入れてアクセスキーを発行します。
入力したメールアドレスにメールが飛び、そちらにアクセスキーが発行されています。
フォームを作成する際は
https://www.staticforms.xyz/
のサイトのStep 2を参考に作成していきます。
Step 2の記述例から必要なものだけとって自分のHTMLに適用させていけばいいです。
以下赤字箇所を参考にformタグのaction属性の値を設定します。https://api.staticforms.xyz/submitのURLを入れてあげればいいです。
<form action="https://api.staticforms.xyz/submit" method="post">
<div>
<label for="name">名前</label>
<input type="text" id="name" name="name1">
</div>
<div>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email1">
</div>
<div>
<label for="message">内容</label>
<textarea id="message" name="message1"></textarea>
</div>
<input type="submit" value="送信する">
</form>
accessKeyを入れ込むために赤字の記述箇所を入れ込みます。valueのところにはstep 1で取得したaccessKeyが入ります。
<form action="https://api.staticforms.xyz/submit" method="post">
<input type="hidden" name="accessKey" value="xxxxxxxxxxxxxxxxxxxxxxxxxx">
<div>
<label for="name">名前</label>
<input type="text" id="name" name="name1">
</div>
<div>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email1">
</div>
<div>
<label for="message">内容</label>
<textarea id="message" name="message1"></textarea>
</div>
<input type="submit" value="送信する">
</form>
static formはstatic formに対応したname属性の値が使えます。
使えるのは「step 2」の例に上がっている
name=”name” name=”subject” name=”email” name=”phone” name=”message”
です。
name属性の値を合わせてあげてください。
<form action="https://api.staticforms.xyz/submit" method="post"> <input type="hidden" name="accessKey" value="xxxxxxxxxxxxxxxxxxxxxxxxxx"> <div> <label for="name">名前</label> <input type="text" id="name" name="name"> </div> <div> <label for="email">メールアドレス</label> <input type="email" id="email" name="email"> </div> <div> <label for="message">内容</label> <textarea id="message" name="message"></textarea> </div> <input type="submit" value="送信する"> </form>
また独自にnameに値を使いたい場合は「$」をnameの値の前に入れてあげる必要があります。
<input type=”text” name=”$company”>
このような記述をすることで何個でも追加可能です。
以下赤字箇所のinputタグのvalue値に送信後のリダイレクト先を指定する。「お問い合わせありがとうございました」というページを作って遷移させることができるということですね。
ちなみに、value値は絶対パスでなければいけません。
<form action="https://api.staticforms.xyz/submit" method="post"> <input type="hidden" name="accessKey" value="xxxxxxxxxxxxxxxxxxxxxxxxxx"> <div> <label for="name">名前</label> <input type="text" id="name" name="name"> </div> <div> <label for="email">メールアドレス</label> <input type="email" id="email" name="email"> </div> <div> <label for="message">内容</label> <textarea id="message" name="message"></textarea> </div> <input type="hidden" name="redirectTo" value="https://example.com/contact/success"> <input type="submit" value="送信する"> </form>
Static Formは英語のサービスのため、メールなども日本語で飛ばない。迷惑メールと間違えてしまう可能性もありますよね。
アクセスキー取得1ヶ月後、メールを送信しようとしたらaccessKeyが停止していた。
何かしらの理由で止められてしまったっぽいです。(理由は不明)
無料で便利ですが私が使った際はaccessKeyが停止してしまうという問題点が判明したので使う際はそちらの調査は必要かと思います。
よろしければ使って見てください。
関連記事
2024.09.30
2024.09.30
2024.04.08