これは簡単で便利すぎる！ すぐに使えるさまざまなフォームを数回のクリックで実装できるAIツール -Formcn

フォームの実装ってなかなか面倒ですよね。
数回クリックするだけで、すぐに使えるさまざまなフォームを実装できる無料のAIツールを紹介します。

お問い合わせやログインのフォームをはじめ、サインアップ、アンケード、イベント登録、商品注文、カスタマーサポートなど、さまざまなタイプのフォームが用意されており、日本語のプロンプトでオリジナルのフォームを実装することもできます。

Formcn
Formcn -GitHub

Formcnは、さまざまなフォームを本番環境ですぐに使えるコードで生成してくれるオンラインツールです。ライセンスはMITライセンスで、商用プロジェクトでも無料で利用できます。

Formcn

主な特徴は、下記の通り。

• 本番環境ですぐに使えるコード

  AIで生成するコードに矛盾はなく、常に一貫性があり、実績のあるコードでメンテナンスも容易です。

• シングルステップ・マルチステップフォーム

  ニーズに合わせて、シングルステップとマルチステップフォームを簡単に選択できます。

• クライアント側とサーバー側の検証

  Zodとnext-safe-actionを使用したクライアント側とサーバー側で検証済みです。

• 使いやすい

  shadcn registry CLIを活用し、生成されたコードと依存関係を1つのコマンドでプロジェクトに取り込むことができます。

• Formcn AI

  フォームフィールドを個別に手動で作成することなく、フォームコンポーネントを即座に構築できます。

Formcnでさっそくフォームを作成してみました。
トップページの「Get Started」をクリックすると、フォーム生成ページにアクセスできます。登録など、面倒なことは一切不要です。

Sign Up -フォーム生成ページ

デフォルトでさまざまなフォームが用意されています。

• サインアップのフォーム
• ログインのフォーム
• フィードバックのフォーム
• ウェイトリストのフォーム
• お問い合わせのフォーム
• アンケートのフォーム
• 求人応募のフォーム
• イベント登録のフォーム
• 商品注文のフォーム
• カスタマーサポートのフォーム

通常必要となるフォームは揃っていますね。
これらのフォームと全くことなるフォームを作成したいときは「Blank Form」で、一からフォームの要素を作成できます。また、「Formcn AI」からプロンプトで簡単にフォームを作成することもできます（後述）。

フォームをカスタマイズするときは、下部の「Edit form」をクリックします。
ラベルを変更したり、項目を増減したり、配置を変更したり、完成品を見ながらカスタマイズできます。

フォームのカスタマイズ

「Code」をクリックすると、フォームを実装するコードが表示されます。

フォームのコード

AIで日本語のプロンプトからフォームを生成することもできます。
「Formcn AI」をクリックし、プロンプトに「サインアップのフォーム、日本語で」と入力してみました。

AIでフォームを生成

AIで生成したフォームも同様にカスタマイズできます。

フォームのカスタマイズ

フォームは、ライトモードとダークモードもサポートしています。

ダークモードもサポート