Shifterで問い合わせフォームを作る（FormSpree連携）

こんばんわ、hisayukiです。

昨日の今日ですがやってみました。
丁度今作成しているサイトが1サイト内に複数の問い合わせを用意することになったので、BasinではなくFormSpreeを採用しました。

結論
アカウント登録
スニペット生成
導入方法
よくわかってないこと
まとめ

結論

Basin以上に簡単。

Contact Form 7もWP Serverless Formsも要らなくなります。
Formの中身ぐらい自分でさくっと作れる人からすれば、formタグのaction要素にURL突っ込んだら終わります。
個人でサイトやブログ立てて、とりあえずお問い合わせフォーム立てようかなって感じならFormSpreeで決まりですね。

というわけで、やり方書いていきます。

アカウント登録

Free Planはいらないです。

いろいろ探ってはみたのですが、どうも有料プランからしかアカウント登録が出来ない感じ。
つまりアカウント管理をされません。

スニペット生成

そもそもスニペット埋め込むだけなのですが、そのスニペット生成とテストまで出来る仕組みがあります。

あとはYOUREMAILHEREのところに転送先メールアドレスを入れたら出来上がりです。

このスニペットそのまま使えますｗ

右側に出ているのはこのスニペットを実際に表示したもの。
なので、このまま試しに使ってみます。

YOUREMAILHEREにメールアドレスをセットして、フォームを埋めてSEND TESTを押します。

reCAPTCHAがあるので、チェックを入れます。
そのまま自動で次の画面に進みます。

これで送信完了、メール見てみます。

こんな感じでメールが飛んできます！

導入はさっきのスニペットを埋め込むだけですｗ

導入方法

まぁ、あれだけでも別に出来なくはないのですが実運用ではもう少し必要ですね。
というわけで、今回本運用で作ったスニペットです。

<form method="POST" class="request-form" accept-charset="UTF-8" lpchecked="1" action="https://formspree.io/xxxxxxxxxxxxx@gmail.com">
<label> お名前 (必須)</label>
<p class="form-input">
  <span class="questioner-name"><input type="text" name="questioner-name" value="" size="40" class="form-attribute" aria-required="true" aria-invalid="false" required="required"></span>
</p>
<label> メールアドレス (必須)</label>
<p class="form-input">
    <span class="questioner-email"><input type="email" name="questioner-email" value="" size="40" class="form-attribute" aria-required="true" aria-invalid="false" required="required"></span>
</p>
<label> お問い合わせ内容 (必須)</label>
<p class="form-input">
    <span class="contact-message"><textarea name="contact-message" cols="40" rows="10" class="form-attribute attribute-full-width" aria-invalid="false" required="required"></textarea></span> 
</p>
<p><input type="submit" value="送信" class="request-submit"></p>
</form>

このスニペットを先程の生成ページに貼り付けるとこうなります。