【Laravel Vue】登録不要の簡単フォーム作成ツールを作った【解説アリ】

Developments PHP Programming

こんにちは。
フリーでプログラマーやってます。

僕はプログラミングで何か作るのが好きで、今回フォーム作成ツールを作ってみました。

まあ言ってしまえばどこにでもあるツールなのですが、プログラミング学習者が理解を深められるものになっているので機能紹介とプログラマーになりたい人向けに重要なポイントを解説したいと思います。

簡単フォーム作成ツール SetForm

僕が今回作ったものはこちらです。
Set Form

誰でも気軽にアンケートだったりお問い合わせフォームが作れるものです。

使える機能と特徴

このツールの機能と特徴はこんな感じです。

  • 自分独自のフォームが作れる
  • 「必須項目」,「100文字以下」のような設定がつけられる
  • スプレッドシートで解答結果を保存できる
  • 登録不要で使える
  • 導入が楽チン
  • 無料で使える
  • いくつでも作れる

独自のフォームが作れる

まず、自分で好きなようにフォームを作ることができます。

例えばこんな感じのお問い合わせフォームを作ることができます。
他にもアンケートも作れます。

また、各項目ごとに設定がつけられて、「必須」だったり「ファイルは画像ファイルのみ」といった条件を付けることができます。

このように入力に間違いがあるとエラーが出るような仕組みもあります。

スプレッドシートで保存可能

また、解答結果はすべてスプレッドシートで保存できます。

管理もしやすく、回答も見やすくなります。

手軽に作成できる

また、手軽にフォームを作成することができます。

ユーザー登録は不要で、作成後に指定のURLを取得するだけです。
そのURLをブログやSNSなどで共有すれば設置完了です。

フォーム作成数に制限はなく、無料です。

デザインや設定も最小限に抑え、シンプルなものを作ることができるので手早く設置できます。

まあ、結局Googleフォームで事足りてしまうのですが、あまりそちらを使いたくないという方はぜひ使ってみてください。

Set Form

ここからはプログラミング学習者向けの解説です。

作った背景

まずこのツールを作った背景なのですが、PHPの勉強に良さそうだったからです。

PHPでお問い合わせフォームを作れるのはよく聞く話で、そんでもって「ただお問い合わせフォームを作るのもつまらないしな」という気持ちもあったので、「PHPの知識がない人でも作れるフォーム作成ツール」を作ろうと思ったわけです。

「プログラミングの知識がない人のために作る」ということ自体がプログラミングの知識を深めることにつながると思ったので今回チャレンジしてみました。

あと、こういうフォーム作成ツールはいくらでも見つかるのですが、どれも「ユーザー登録」が必須で、「問い合わせフォーム作るだけで登録するもの面倒だよなぁ」と思ったので、それらを排除したものを作りたいということで作成しました。

開発言語

  • Laravel (PHP)
  • Vue.js
  • その他HTML, CSS等

こんな人にオススメ

  • Laravel(PHP)で何か作ってみたい方
  • Vue.jsで何かを作ってみたい方
  • SPAアプリを作ってみたい方
  • フォームの仕組みを詳しく知りたい方

では解説に入ります

1つ1つ見ながら、模写でも良いので手を動かして勉強していきましょう。

(随時更新)

スポンサードサーチ

オススメ英語学習用SNS "Our Dictionary"

人気記事英語学習用SNSをLaravelで作ってみた【システム解説あり】