使い方！

「Formspree」の利用方法は非常にシンプルで、HTML内の「form要素」の「action属性」に以下のアドレスを設定します！

https://formspree.io/【自分のメールアドレス】

【自分のメールアドレス】の部分には、ユーザーからの問い合わせを受け付けたいメルアドを記載しておきましょう。

試しに、簡単なメールフォームを作ってみましょう！

名前とメールアドレス、問い合わせ内容だけを送信するフォームがコチラ！

<form action="https://formspree.io/****@***.com" method="POST">

    <p>名前：　<input type="text" name="name"></p>
    <p>メール：<input type="email" name="address"></p>
    <p>内容</p>
    <p><textarea name="content" rows="4" cols="30"></textarea></p>
    <p><input type="submit" value="送信"></p>

</form>

「form要素」の「action属性」には、先ほどの専用アドレスを記載するのを忘れないようにしましょう。

これをブラウザで開き、初回だけ何も入力せずにそのまま「送信ボタン」をクリックしてください。

すると、formの「action属性」に設定したメールアドレス宛に、確認用のメールが配信されます。

そこで、メールを確認して本文中にあるリンクをクリックすれば設定完了です！

それでは、実際にフォームへ文章を入力して「送信」ボタンをクリックしてみましょう。

すると、設定したメールアドレス宛に、フォームの内容を記載したメッセージが配信されたのが分かります！

注意点として、フォームの内容はそれぞれ「name属性」で設定したキーワード毎に表示されるため、「form要素」内で受け取りたい項目には「name属性」を忘れないように設定しておきましょう！

簡単なカスタマイズをしてみよう！

「Formspree」では、「form要素」内の属性を少し変えるだけでカスタマイズも出来るように設計されています。

例えば、メールフォームの内容を1つのアドレスで受信するのではなく、複数のメールアドレスで受信したければ以下の要素を追記します。

<input type="hidden" name="_cc" value="another@email.com,yetanother@email.com" />

「name属性」に「_cc」と記入し、「value属性」に受信させたいメールアドレスを記載すればOK！

さらに、「送信」ボタンをクリックしたあとに、「問い合わせありがとうございました！」みたいなメッセージが表示されるページに自動遷移することも可能です。

これも、フォーム内に以下のような要素を追記するだけで実現できます！

<input type="hidden" name="_next" value="http//***.***/***.html" />

「name属性」に「_next」と記入し、「value属性」に遷移したいページのアドレスを設定するだけです。

他にも、気の利いたオプションが多数用意されており、公式ページ上で分かりやすく使い方を公開してくれています。

とにかく、手っ取り早くメールフォームを作りたい方はオススメなので、ぜひ一度トライしてみてください！

・「Formspree」公式サイト