2019-08-22この記事は約6分で読めます。こんばんわ、hisayukiです。この度、業務でのコーポレートサイト作成にShifterを使うこととなりました。僕自身はWPでサイト作成はずっと避けて通ってきたのですが・・・やはりスピード感を求められると、WPでのサイト作成は早いです。コーポレートサイト作成してると高確率で必要となる問い合わせフォーム今回はこれの作り方を書いていきたいと思います。Formsこれは生成した静的Webサイト内のFormの入力値をエンドポイントに飛ばすPluginです。7こちらの使い方については検索すればすぐ出るくらいには有名なので、今回の説明からは省きます。Formsの設定画面を開くとこんな感じに、エンドポイント入力画面が表示されます。外部サービスを利用するのでどれを使うかを考える必要があります。Formspreeの3種類になります。Basin他に比べて機能は少ないですが、非常にシンプル。デフォルトではFormから飛んできた情報の保管と、設定されたメールアドレスへ情報を送るのみ。フリープランで1エンドポイントと100submissions/1ヶ月まで利用可能。スタートしたばかりのサイトで、最初は1ヶ月100通も問い合わせは無いと思われる場合はおすすめです。フリープランでもこれだけの機能がサポートされています。有料版の価格は以下の通りStandardにするだけでもエンドポイントの作成制限がなくなるので、アカウント一つで複数サイト用のエンドポイントが作成できます。submissionsも1000/1ヶ月まで増えます。このあとの説明はBasinでの導入で書いていきます。FormKeepこのあと出てくるFormspreeもですが、Basinはあくまで送られてくる情報保管用バックエンドに対してFormKeepはForm用HTMLのスニペットまで作ってくれます。7が要らなくなります。他のSaaS連携でメール以外の通知手段も可能。残念なのが、無料トライアル5日間はありますがフリープランがないです。お試しは出来るけど、本運用で使うには必ず課金が必須。最安値プランでもエンドポイントは1つで50submissions/1ヶ月まで。個人的にはそこまで多機能である必要がなかったので、この段階で選択肢から外しました。コーポレートサイトのお問い合わせフォームなので、メールまたはSlack通知で十分なので・・・FormspreeこちらもFormKeep同様にHTMLのスニペットまで作ってくれます。7が要らなくなります。FormKeepとは違い、こちらは無料プランがあります。無料でも作成可能なフォーム数は無制限これで複数サイトのお問い合わせをまとめたり、1つのサイトに複数種類の問い合わせがある場合等は1アカウントでいいですね。転送先メールアドレスが2つ設定出来るのも魅力です。Basinと比べてもどっちでもいいレベル。言うなら、複数フォーム対応してても上限が50submissions/1ヶ月ということ。あとは有料プランが最安値で$10ってところくらいでしょうか。状況に応じてBasinでもFormspreeでもどちらでもいいと思います。WPとBasinの連携バックエンドは3種類ありますが今回はBasinで書きます。startedを選んでエンドポイント作成をしていきます。endpointで次に行きます。エンドポイントが作成されるので、上のナビゲーションメニューからSetupを選択エンドポイントのURLを控えておきます。Formsの設定で先程控えたEndpointを設定するだけです。設定は以上になります。手順だけはこれだけなので、簡単に問い合わせフォームを作成することが出来ます。実際に飛ばしてみる設定後の画面動作をサンプルでやってみます。送信するとこちらの画面。最後まとめに書きますが、これはBasinの用意した完了画面です。見せられないところは白塗りしてます。こんな感じでフォームから飛ばされてきたデータをBasin側で保管してます。同時にBasinアカウントのメールアドレスにも内容が飛んでいきます。全体の挙動としてはこんな感じです!SaaS連携FormKeepの紹介で他のSaaS連携がデフォルトで備わってると書きましたが、BasinもZapier連携をサポートしてるので、Zapierを噛ませることでSaaS連携も可能です。まとめ現在はShifterが公式でPluginを出してくれたおかげでかなり簡単になりました!今回はBasinでやり方を書きましたが、おそらく簡単さだけならFormspreeのが簡単だと思います。Formsもいらないんじゃない?って書きながら思いました。一連の挙動の中で途中あった送信完了画面。BasinもFormspreeもですが、Formの内容を送信完了後の画面が各バックエンドサービスの用意した画面にデフォルトではなってます。FormsはEndpointの設定だけであればAWSのLambdaとかにForm内容飛ばすこともできるのかな?試してないのでどこまで出来るかはわからないですが、そうするとバックエンドサービスを使わなくても自作出来る場合は自作という手もありますね。Festaで堀内さんの発表に感銘をうけて、起ち上げたWordpress。些細なところかもしれないですが、ハマったので残しておこうと思います。行きましたが、会場めっちゃ綺麗でした🌟やっぱオフィス綺麗なのは...技術ネタShifterで問い合わせフォームを作る(FormSpree連携)こんばんわ、hisayukiです。昨日の今日ですがやってみました。今作成しているサイトが1サイト内に複数の問い合わせを用意することになったので、BasinではなくFormSpreeを採用しました。Basin...技術ネタそろそろShifterに移行していく最近界隈で話題になりつつあるShifterとりあえずお試しでサイト移行をやってみようと思います。動的サイトのWordPressをCloud上で構築して、公開するときには静的WebサイトにしてくれるステキS...技術ネタGoogleSearchConsoleをドメインで設定しましたこんばんわ、hisayukiです。ブログを書くのに時間がかかりすぎる。Wordpressを初めたのが最近で、Gutenbergがお試しに入ってスグでした。不評も多いのですが、Gutenbergって...Neovimというエディタを触ってみた。コメントをキャンセルメールアドレスが公開されることはありません。