logo-sm

お問い合わせは Webフォームから

ブログ

Static Formを使ってHTMLだけのサイトにお問い合わせフォームをつくる方法

2022.08.06

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/

1、アクセスキーを発行する

https://www.staticforms.xyz/
こちらのサイトのStep1の箇所にメールアドレスを入れてアクセスキーを発行します。
入力したメールアドレスにメールが飛び、そちらにアクセスキーが発行されています。

 

2、フォームを作成する

フォームを作成する際は
https://www.staticforms.xyz/
のサイトのStep 2を参考に作成していきます。
Step 2の記述例から必要なものだけとって自分のHTMLに適用させていけばいいです。

1、Formタグのaction属性をStatic Formのものに

以下赤字箇所を参考に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>

2、accessKeyをメールから取得して入れ込む

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>

3、inputのname属性をstatic 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”>

このような記述をすることで何個でも追加可能です。

4、リダイレクト先を入れ込む

以下赤字箇所の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>

5、問題点

1、英語で送信される

Static Formは英語のサービスのため、メールなども日本語で飛ばない。迷惑メールと間違えてしまう可能性もありますよね。

2、accessKeyが停止してしていた。

アクセスキー取得1ヶ月後、メールを送信しようとしたらaccessKeyが停止していた。
何かしらの理由で止められてしまったっぽいです。(理由は不明)

無料で便利ですが私が使った際はaccessKeyが停止してしまうという問題点が判明したので使う際はそちらの調査は必要かと思います。

よろしければ使って見てください。

関連記事

  • 自宅に構築!仮想環境 ~BIG-IP VE導入編~
    【導入】 前回は、自宅サーバにProxmoxを導入しました。 今回はその上に仮想マシンとしてBIG-IP VE […]

    2024.09.30

  • 自宅に構築!仮想環境 ~Proxmox導入編~
    【導入】 以前から学習用に自宅仮想環境をつくりたく思っていたところ、BIG-IP(の仮想版)に触れる必要が出て […]

    2024.09.30

  • WindowsのWSL2上のDockerでup時に’ContainerConfig’のエラーが出た。
    当社の開発環境はMacとWindowsが混在したDocker上での開発を行っています。なのでMacでOKだけど […]

    2024.04.08

  • パートナー

  • 人材育成・採用情報