formrun guide

formrun guideでは、ユーザーの皆様に役立つTipsやFAQ、ニュース、ユーザーインタビューなどの情報をまとめてお伝えします

#4 クリエイター機能でフォームをつくってみよう -応用篇

f:id:mixtape-team:20170925162855p:plain

誰でもかんたんにフォームを作成することができるクリエイター機能を使って、リッチなフォームをつくってみましょう。左側のコントロールパネルにある「フォーム」「カバー」「スタイル」「設定」について解説していきます。

※formrunには開発者向け(エンジニア・デザイナー)の「HTMLコード埋め込み型」フォームを作成する機能も用意しています。

※フォームの作成が終了もしくは作成途中の場合には、画面右上の「保存」ボタンを押して、フォームの保存をお願いします

f:id:mixtape-team:20170925163303p:plain


フォームの項目を追加してみよう

【1】「プリセット項目」「カスタム項目」「ブロック」の3種類のカテゴリから自由に追加できます。

f:id:mixtape-team:20170925163512p:plain

【2】任意のプリセット項目を選択するだけで、フォームに追加できます。

f:id:mixtape-team:20170925164111p:plain

【3】プリセット項目を選択すると、詳細設定ができますので必要に応じて編集しましょう。

f:id:mixtape-team:20170925165535p:plain

カスタム項目を追加してみよう

1行〜複数行テキストや選択項目を追加することができます。日付選択はカレンダー形式の選択表示となります。(プレビューボタンでもご確認いただけます)。ファイルアップロードは、フォームを利用するユーザーにファイルをアップロードしてもらう機能です。履歴書や職務経歴書、ポートフォリオなどのファイルアップロードを利用するシーンにご活用いただけます。

f:id:mixtape-team:20170925170547p:plain

guide.form.run

ブロック項目を追加してみよう

画像ファイルやGoogle MapsやYouTube、Viemo、Slide Share、SoundCloud、TwitterなどのSNSなどのURLや埋め込み用URLを設定することでフォームに埋め込み表示できます。(対応サービスについてはこちら)また、フォームのなかで見出しをつけたり、テキストを追加できます。

f:id:mixtape-team:20170925171827p:plain

guide.form.run

カバーを設定してみよう

カバー画像は、あらかじめ用意されたプリセットから選択のほかにご自身で用意された画像をアップロードし、表示できます。

f:id:mixtape-team:20170925172818p:plain

スタイルを設定してみよう

送信ボタンの色やフォント、画面表示のレイアウトの変更ができます。また、アイコン用の画像ファイルをアップロードし、表示することができます。

f:id:mixtape-team:20170925174049p:plain

フォームの詳細設定をしてみよう

「フォームの公開・非公開」や「公開期間のスケジュール設定」「自動返信メールの文章設定・編集」「通知設定」「利用規約・プライバシーポリシーのリンク表示」「Google AnalyticsトラッキングIDによるGoogle Analyticsによるアクセス解析」ができます。「公開期間のスケジュール設定」では、キャンペーンやイベントなどの特定期間だけに公開をしたい際に有効です。公開期間をすぎるとフォームは表示されません。また、「自動返信メール」は、ユーザーが情報を入力後、送信すると自動的にそのユーザーのメールアドレス宛に返信するメッセージです。

f:id:mixtape-team:20170925175102p:plain

guide.form.run

guide.form.run

guide.form.run


formurnへのご意見・ご要望・リクエストはこちらで絶賛受付中です!

■formrun form.run

#3 クリエイター機能でフォームをつくってみよう -基礎篇

f:id:mixtape-team:20170922180150p:plain

formrunでは、誰でもかんたんにフォームを作成することができるクリエイター機能があります。この機能でフォームをつくってみましょう。

※formrunには開発者向け(エンジニア・デザイナー)の「HTMLコード埋め込み型」フォームを作成する機能も用意しています。

※フォームの作成が終了もしくは作成途中の場合には、画面右上の「保存」ボタンを押して、フォームの保存をお願いします


フォームのアドレス設定とテンプレートを選んでみよう

【1】フォームのアドレスとなるURLを設定しましょう。フォーム作成後でもアドレスは変更が可能です。

f:id:mixtape-team:20170922180336p:plain

【2】テンプレートを選択しましょう。作成したいフォームの内容に近いものを選択すると作成時間の短縮につながります。テンプレートは24種類あります。何も設定されていない状況から作成したい場合は、一番左上にあるシンプルを選択してください。

f:id:mixtape-team:20170922180500p:plain

【3】テンプレートを選択すると作成画面に切り替わります。

f:id:mixtape-team:20170922180922p:plain

フォームを作成してみよう

クリエイター機能の画面構成についてご説明します。フォームの「入力画面」と「完了画面」の2画面構成になっています。「入力画面」とは、フォームに情報を入力する画面。「完了画面」とは、フォームに情報を入力後、送信ボタンを押した後に表示される画面のことを指します。

f:id:mixtape-team:20170922181805p:plain

主に、画面中央の「作成画面」と左側の「設定パネル」の2つを使ってフォームを作成していきます。

f:id:mixtape-team:20170922181233p:plain

作成画面の項目にカーソルをあてることで、直接、テキスト入力と編集ができます。なお、URLを入力すると自動的にリンクとして表示することができます。

f:id:mixtape-team:20170922182346p:plain

作成画面でインラインで入力できるほか、同じように左側の設定パネルでも入力することができます。

f:id:mixtape-team:20170922182642p:plain

「必須」「任意」の切り替えも、作成画面のボタンを押すか若しくは左側の設定パネルのスイッチでも切り替えることができます。

f:id:mixtape-team:20170922183152p:plain

送信ボタンの名称変更も可能です。送信ボタンを押すと、左側の設定パネルで名称を変更することができます。

f:id:mixtape-team:20170922183304p:plain

情報取得のために必要な項目を、「設定パネル」から選択してみましょう。選択したものは一番下に追加されていきます。

f:id:mixtape-team:20170922183840p:plain

f:id:mixtape-team:20170922183719p:plain

項目の表示順を並び替えたい時は、移動ボタンを押せば上もしくは下に移動することができます。また項目の削除はゴミ箱ボタンを押してください。

f:id:mixtape-team:20170922184209p:plain

画面中央の「作成画面」と左側の「設定パネル」の2つを主に使うことで、よりリッチなフォームを作成することができます。

完了画面を作成してみよう

完了画面とは、フォームにユーザーが情報を入力・送信後に表示される画面のことです。formrunではこの画面に任意のテキスト表示のほか、指定URLのリンク表示やフォーム送信したユーザー向けに資料ファイルやホワイトポーパーといったファイルダウンロードの機会を提供できます。

f:id:mixtape-team:20170927123849p:plain

プレビューで作成したフォームの確認、テスト検証をしましょう

画面右上にあるプレビューボタンを押すことで作成中のフォームを「スマートフォン」「タブレット・PC」ビューの2種類でご確認いただけます。スマートフォンでの閲覧が多いケースでは、スマートフォンで最適化されたテキスト量や配置になっているかを確認し、調整に役立てましょう。

またプレビューでは、実際にデータ入力と送信ボタンを押してデータ送信できます。データ送信したものは、データ管理画面の「ボード」と「リスト」に表示されます。テスト検証を通じて、フォームの最適化を行いましょう。

f:id:mixtape-team:20170927125519p:plain

フォームを公開しよう

フォームが完成したら、いよいよ公開です。画面右上の「保存」ボタンを押すと、フォームアドレスが表示されると同時にURLのページが公開されます。フォームをTwitterやFacebook、LINEなどのSNSやメッセージングアプリでシェアできます。

f:id:mixtape-team:20170927232618p:plain


続けて「応用編」をご参照ください。

guide.form.run

formurnへのご意見・ご要望・リクエストはこちらで絶賛受付中です!

■formrun form.run

クリエイター機能で作成したフォームのOGPにタイトルとサムネイル画像が表示されるようになりました

f:id:mixtape-team:20170922132044p:plain

クリエイター機能で作成したフォームのURLをFacebookやTwitterなどのSNSでシェアする時に、OGP(Open Graph protocol)としてそのフォームのタイトルと概要、サムネイル画像を表示できるようになりました。キャンペーンやイベント、リクルーティング目的で作成した共有可能なフォームの場合、積極的にSNSで拡散することでフォームへの誘導を効果的に行うことができますので、是非ご活用ください。

ご利用方法

まずは、クリエイター機能でフォームを作りましょう。OGPは自動的に生成されますが、サムネイル画像とタイトル・概要は下記の場所から引用されます。

f:id:mixtape-team:20170922132342p:plain

【レイアウト】サイドの場合

f:id:mixtape-team:20170922132727p:plain

【レイアウト】トップの場合

f:id:mixtape-team:20170922133041p:plain

【レイアウト】フルスクリーンの場合


作成したフォームを保存すると、フォームURLの共有画面が表示されます。URLのコピーをとって、SNSでシェアしてみましょう。 f:id:mixtape-team:20170922133333p:plain

OGPとしてTwitterとfacebookの場合は、ご覧のように表示されます。 f:id:mixtape-team:20170922134246p:plain


使いこなしていますか?こんなクリエイター機能

クリエイター機能「Google MapsやYouTubeなどの埋め込み表示が可能に」 guide.form.run

クリエイター機能「画像ファイルを表示できるようになりました」 guide.form.run

クリエイター機能「カバー画像の推奨サイズについて」 guide.form.run

クリエイター機能「Google Analyticsでアクセス解析できるようになりました」 guide.form.run

クリエイター機能「フォームの公開期間の設定」 guide.form.run

クリエイター機能「自動返信メールに表示」 guide.form.run