いいわけブログ

ガジェット・スニーカー、時々テックな情報お伝えするブログ

とっても簡単!無料でフォームを作れるサービス!JotForm

      2016/02/08

最近ちょっと面白いサービスをみつけたのでメモ

Web制作で、フォーム作成って毎回めんどう

Web制作で、お問い合わせフォームなどのフォーム作成って良くあると思いますが、案外面倒だったりします。
大体の制作の方は、独自でライブラリ化していたり、WordPressだとContact Form 7なんかを使っていたりしますよね。
それだけでも効率的で作業も早いのですが、もっと手軽にフォームを作れるサービスがあるのです。

JotForm

このJotFormというサービスは、びっくりする程簡単にフォームが作れてしまいます。
しかもGoogle DriveやDropboxとも連携出来るので、かなり便利!
無料版だと100件までしか投稿できないようなのですが、それでもあまりある機能と設定ができます。

簡単な説明はこの動画でなされていますので、参考までに。

JotForm in 2 Minutes from JotForm Form Builder on Vimeo.

では簡単にですが、実際にフォームを作ってみたので手順を紹介してみます。
なお、サインアップのフローは簡単なので省きます。

CreatFormでフォームを作成する

・ログインすると画面上部にメニューが表示されるので「MY FORMS」というメニューを押します。
すると以下の様な画面が表示されるはずです。

jotform1

・次に、左上にある「Create Form」を押してみます。
すると、下図のようなフォームタイプを選択するダイアログが表示されます。
jotform2
・用意されたテンプレートからもフォームを作成できますが、今回は「Blank Form」で作成します。
「Blank Form」を選択すると、フォーム作成画面が開きます。

フォームに要素を入れていく

・左側にツールメニューがありますので、自分が作りたいフォームの要素をクリックしましょう。そうすると、編集画面に要素が追加されるのでお好みでラベルを編集したり、要素の順序を変更します。

作成し終わったら、「Save」を押して保存します。

・私が試しに作ったフォームは下図のような感じです。このくらいなら所要時間1分足らずでぱぱっとできちゃいますね。
jotform4

作成したフォームをWordPressに埋め込んでみる

・作成したフォームを実際に使用してみます。
せっかくなのでこのエントリに埋め込んでみましょう。

・フォーム作成画面中段に「Setup & Embed」タブをクリックし、「Embed Form」というボタンを押すと、下図の様なウィンドウが表示されます。

jotform5

・このウィンドウにある「Embed」もしくは「WordPress」を押しましょう。
すると埋め込み用のコードが表示されるので、それをコピーして投稿に貼付けます。

・埋め込んだフォームから実際に投稿してみてください。

投稿した内容を確認する

次に投稿した内容を確認してみましょう。「MY FORMS」ページの一覧で、作成したフォームを選択し下図のように「View Submissions」を選択します。

jotform8

「View Submissions」ページを表示すると、フォームに投稿されたメッセージなどがここで一覧されます。おそらく下図のようになっているはずです。

jotform9

この内容は、ユーザーから投稿された際にメールでお知らせする設定にもできるので、このページで確認する限りではありません。

どうでしょうか?ざっくりとフォーム作成をしていましたが、実際に作ると恐ろしく簡単にできてしまうので、ここで説明するまでも無いかもしれませんね。

また、冒頭で書きましたが、DropBoxとの連携も簡単にできます。自身のDropboxアカウントと連携すると「JotForm」というフォルダが作成され、そこに投稿データが蓄積されていました。詳しくは下記ページの動画を見てください。
http://www.jotform.com/dropbox/

あと、今回作ったフォームはこのエントリーに貼ってみました。↓こんな感じに成ります。

 - 技術 , ,