【超簡単】fromrunで問い合わせフォームを作ってみた

皆さん こんにちは。シュンです。
今回は手軽にフォームが作れるサービス「formrun」についての紹介です!

formrun(フォームラン)とは?

formrunはこの上記ツイートの通り、サイトにある問い合わせフォームを作れるサービスです。
HTML/CSSのみでフォームを作ることができ、サーバーサイドの記述が不要です。

また、コードが書けない人でも作ることができます。
formrun(フォームラン)https://form.run/ja

実際に作ってみた

会員登録

まずはサイトに行きましょう。(上記にリンクがあります)
青いボタン「formrunを無料でスタート」を押せば作れます。

会員登録が済んでない人は登録をしてください。

Image from Gyazo

チーム名登録

登録後、メールアドレスの認証があるので済ませた後「チーム名」の登録があります。
個人で作るのであればわかりやすければなんでもいいかと思います。

新規フォーム作成

チーム名登録後「新規フォーム作成」をクリック。
下記のような画面に行きます。

HTML・CSSが使える人は右の「オリジナルで作成」
コードが書けない人は「簡単作成」をクリック。
今回はコードを使ったオリジナルで作成をします。

Image from Gyazo

フォーム名登録

次にフォーム名を決めましょう。これも同様にわかりやすい名前で記入。
そして「登録する」を押してください。

Image from Gyazo

HTMLコード生成

HTMLタグのコードが生成されていると思います。(ある意味コード書けなくても作れなくもないですね)
こちらをコピーしてエディターに貼り付けてください。

Image from Gyazo

 スクリプトの設置

HTMLのコードにあるheadに貼り付けます。
Image from Gyazo

URL設定

埋め込みたいサイトのURLを貼りましょう。
最初に書いてあるフォームランのURLは消して大丈夫です。

リダイレクトURLはフォームからメッセージ送信後に表示されるURLです。

指定してあげたら「更新するを押してください」

Image from Gyazo

設定完了

formrunの設定は以上です。
ここからはご自分のエディターから設定していきましょう。

Image from Gyazo

 

完成したフォーム

Image from Gyazo
実際に完成したフォームがこちら。
htmlタグはCSSがないのでクラスをつけてCSSの記述をして見やすくしてあげましょう。

テスト送信

完成したフォームから自分のアドレスにメッセージが送れました。
特につまずくところもなくこれにて無事完成。
Image from Gyazo

まとめ

いかがでしたでしょうか?

今回は無料プランでのご紹介でしたが有料のプランもあり、フォームの下書き保存などもできるようになるみたいです。
フォームラン以外にも運営しているformLab」ではWebフォームを作れるサービスがたくさんあるので興味のある方は確認してみてください。

最後まで見ていただきありがとうございました。是非このブログの拡散をお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA