どうも、まさとらん（@0310lan）です！
今回は、ドキュメントエディタに文章を書くような感覚で簡単に独自フォームを開発できる無料のWebサービスをご紹介します。
単純な問い合わせフォームなどのフィードバックだけでなく、Stripeと連携した決済フォーム、条件に合ったロジックを組み立てる機能、任意の計算処理や即戦力になるテンプレートなどもすべて無料で使えるのが特徴です。
Webのフォーム作成にご興味ある方はぜひ参考にしてみてください！
【 Tally 】
■「Tally」の使い方
それでは、「Tally」をどのように使えばいいのか詳しく見ていきましょう！
まずはサイトの上部にある【Sign up】ボタンをクリックして無料のユーザー登録を済ませておきましょう。
ユーザー名・メールアドレス・パスワードを設定します。
登録したメールアドレス宛に認証コードが送付されるので、コードを入力すれば完了です。
以下のようなダッシュボードが表示できれば準備OK！
この画面からさまざまな独自フォームを作成・管理できるようになります。
また、多数のテンプレートやチュートリアルなども提供されているので、最初に確認しておくといいでしょう。
■「Tally」のエディタについて
フォームを作成する前に、「Tally」が提供する専用のエディタについて見ていきましょう。
まず最初にダッシュボードから【Create form】ボタンをクリックして新規のフォームを作ります。
すると、フォーム作成用のエディタ画面が表示されます。
タイトルを入力してからエンターキーを押すか、その下にあるリンクをクリックするとフォームが作れるようになります。
フォームを作るエディタと言っても、実際には一般的なドキュメントエディタのようになっているのが特徴です。
自由に文章を入力していけるので、作りたいフォームを直感的にレイアウトしていけるわけです。
またフォーム部品も好きな箇所へ挿入できるようになっており、エディタの横や上部にある「＋」アイコンをクリックします。
すると入力ボックス、チェックボックス、ボタン…などのフォーム部品を選択できるようになります。
他にも特殊な機能として、Stripeと連携できる決済機能、ファイルをアップロードできる機能、GoogleスプレッドシートやZapierなど他のサービスと連携できる機能なども簡単に組み込めるようになっています。
ちなみにもっと簡単な挿入方法も用意されており、「/（スラッシュ）」を入力するとフォーム部品のリストが表示されます。
これはドキュメント作成サービス「Notion」とよく似た機能で、「/（スラッシュ）」に続けて2〜3文字入力すれば必要な部品を絞り込んで検索できます。これにより文章を書きながら素早くフォーム部品を配置していけるので、慣れると非常にテンポよくオリジナルのフォームを作成できるようになるわけです。
■簡単なフォームを作成してみよう！
さて、ここまでご紹介した基本機能を知っていれば、「Tally」を使ったフォームの作成はもうできるようになっています！
そこで、以下のように「名前」と「メールアドレス」を収集するだけのシンプルなフォームを作ってみましょう。
新規プロジェクトを作成したら、まず最初にフォーム部品の「Label」を挿入しましょう。
ユーザーの名前を入力するボックスを作りたいので、ラベルには「名前」と設定しておきます。
次に入力用のボックスを挿入したいので「Short answer」を選択しましょう。
プレースホルダーも設定できるので分かりやすい文章を入力しておくといいでしょう。
同じようにメールアドレスのラベルも挿入して、入力ボックスには「Email」を選択しておきます。
送信ボタンについては、横に表示される歯車アイコンをクリックして日本語で「送信」と設定しておくといいですね。
するとこんな感じのフォームが作成できるはずです！
■フォームを公開してみよう！
フォームが作成できたら、さっそくインターネット上に公開してみましょう。
方法は簡単で画面上部にある【Publish】アイコンをクリックすればOKです！
専用のURLが生成されるのでコピーしておきましょう。
あとはこのURLをメールやSNSなどでシェアすれば、誰でもフォームにアクセスできるようになります。
さらに、埋め込み用のコードを生成できる機能も提供されています。
Webサイトやブログに挿入できるコードや、フルページのWebサイトとしてフォームを公開するためのHTMLコードも生成可能です。
埋め込みコードはコピーするだけで、すぐにHTMLへ貼り付けられるので簡単です。
このようにして作成したフォームを誰でもアクセスできるようにしたら、あとは実際にユーザーがフォームを使ってくれるのを待つだけです。
そこで、試しにユーザーとしてフォームへ情報を入力して送信してみましょう！
すると、「Tally」のダッシュボードから【Responses】タブを見てみると送信された情報が閲覧できるようになります。
つまり、「Tally」ではフォームを素早く作成して公開し、収集した情報を管理（データベース）するところまでを完結できるというわけです。
■「Tally」の便利な機能について！
「Tally」は誰でも簡単に高度なフォームが作成できるように多彩な機能が提供されています。なかでも特に便利だと思う機能をいくつかピックアップしてご紹介しておきます。
まず最初は【テンプレート機能】について。
【 Form Templates | Tally 】
「Tally」にはすぐにでも使える実践的で美しいテンプレートが多数提供されています。たとえば以下のようなフォームがすぐに作れるので便利です。
- ユーザーフィードバック
- 商品の注文フォーム
- イベント登録フォーム
- オンラインクイズ
- 問い合わせフォーム
- 求人申し込みフォーム
など
ほとんどのケースに対応可能で、文章や画像などを差し替えるだけで誰でも簡単に作って公開できるのが魅力的です。
次に【ページ作成機能】について紹介しておきます。
これは複数のページで構成されるフォームを手軽に作成できる機能になっており、アンケートやクイズなどのフォームを作成するのに最適でしょう。
作り方も簡単で、エディタ上部にある【Page】アイコンをクリックするだけでページを追加できます。
以下のようにドキュメントエディタの印刷プレビューのような感覚で、ページ番号が付与されるようになります。
複数のページを作成すると、ボタンをクリックするたびに次のページへ画面遷移できるようになります。
1ページで表示すると複雑になりそうなフォームも、ページを分割することで分かりやすくなるかもしれません。
また【パイピング】と呼ばれる機能も提供されており、これはプログラミングで言う変数のような感覚で使えます。
たとえば、以下のように名前を入力するボックスがあるとします。
「＠」を入力すると現在フォームに配置されている部品が表示されるので、「名前」フィールドを選択してみましょう。
すると、ユーザーが名前を入力した瞬間に「＠」の部分が入力された名前に置き換わるのです！
つまり、入力（回答）された値を別の部分に再利用できるようになるわけです。
これは計算ロジックなどの結果を挿入する用途にも使えるので、活用しだいではユニークなフォームを作成できるようになります。
もっと複雑なフォームを作成するために「条件付きロジック機能」も提供されています。これは、ある条件になったらあらかじめ決めておいた処理を自動で実行する用途に最適です。
たとえば、以下のようにユーザーが何らかの評価をできるフォームがあるとします。
フォーム部品のリストから「Conditional logic」を選んで挿入します。
上記の設定では、星が4つ以上であれば「詳細の内容」の入力ボックスを非表示にするという処理にしています。
実際に星4つ以上の評価を付けると、「詳細の内容」の部分が非表示になっているのが分かります。
非表示にするだけでなく、複数のページで構成されているフォームであれば任意のページへ飛ばすように処理したり、何らかの計算処理を自動的に実行したりなども可能です。
他にも、ユーザーがフォームを送信したら任意のWebサイトにリダイレクトさせる機能や、フォームが送信されるたびに自分のメールアドレスに通知が来る機能、設定した日付になるとフォームが送信できないようにする機能なども提供されています。
このように「Tally」は誰でも簡単に高度なフォームが作成できる機能をたくさん搭載しており、フォームに関するほとんどすべての作業を完結できるのが大きな魅力と言えるでしょう。
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回は、ドキュメントを作成するように誰でも簡単に高度なフォームを開発できるサービスをご紹介しました！
「Tally」はシンプルに扱えるように直感的なエディタで分かりやすくフォームを作成できるのですが、豊富な機能を活用することで上級者でも満足できる高度な機能も活用できるのが魅力です。
今後もたくさんの機能を提供する予定があるようなので、ぜひみなさんも今から活用してオリジナルのフォームを開発してみましょう！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
