formrun guide

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

「時間がない、リソースがないなかでも、妥協なくキャンペーンを展開できる力強い味方」BASE株式会社 山村兼司

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

「価値の交換をよりシンプルにし、世界中の人々が最適な経済活動を行えるようにする」を企業ミッションに、モノづくりをする個人・法人、地域活性を支援する自治体等の行政など40万店舗が利用している国内最大級のネットショップ作成サービス「BASE」と、WebサービスやEコマースにクレジットカード決済を無料で簡単に導入できる開発者向けのオンライン決済サービス「PAY.JP」、オンライン・オフライン問わずID決済可能なお支払アプリ「PAY ID」を展開するBASE株式会社。

今回は、同社 COO 山村兼司さまにformrun導入についてのお話をお伺いしてきました。


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

--formrun導入の背景について教えてください

山村 formrunは「QRコード決済App」というBASEのショップさん向けの機能提供に伴い、キャンペーンの申し込みフォームとユーザーアンケートを実施するために利用しました。
代表の鶴岡が8月に、中国のEC事情の現地視察をしてきたんですが、中国では多くの人たちが現金をもたずに、「アリペイ」や「ウィーチャットペイ」などのサービスを普段使いしていて、街のいたるところでQRコード決済を展開しているのを目の当たりにしたんですね。

すでにBASE事業部では「QRコード決済App」の提供に向けて動いていたのですが、鶴岡が中国に行ったことで、ECと決済サービスの両方を持っている自分たちが最初にQRコード決済をはじめなければという機運が高まり、帰国した瞬間すぐに「最速でQRコード決済Appをリリースしよう」と。そして、「やるからには数千人規模が集うキャンペーンもやりたい」と。このような背景のなか「QRコード決済応援キャンペーン」の企画は、瞬間的に立ち上がったプロジェクトだったんです。

f:id:mixtape-team:20171004011321p:plain △Eコマースの運営に必要な機能やサービスを各店舗のニーズに合わせて導入できるプラグインプラットフォーム「BASE Apps」にて、実店舗や催事等の対面販売でQRコード決済が提供できる「QRコード決済App」向けのキャンペーン

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


しかし、期中ということもあり、多くの社員がすでにさまざまな業務を背負って走っているなかで、開発側のエンジニアさんもデザイナーさんの工数も多くは使えない、そのプロジェクトを推進できるメンバーも限られている環境下で、鶴岡に「いつからはじめますか?」と質問したら、「来週からいけますか?」みたいな(笑)


そこで、なるべくエンジニアさんやデザイナーさんの工数を使わずに、キャンペーンの作成や受付、応募したショップさんを管理するためのデータベースの構築と管理の仕組みを作ろうとした際に、鶴岡から「このサービス使ってみてください」と紹介してもらったのがformrunでした。

--鶴岡代表からご推薦いただけたのはとても嬉しいですね。formrunのセットアップについてはいかがでしたか?

山村 
とてもかんたんでした。実際に、アカウントを作成したその日に、ビジネス側のメンバーだけでキャンペーン用のフォーム作成が出来ました。フォームを作るだけであれば10分もかからなかったと思います。また、デザイン的にもUI的にも当社のサービスやコーポレートサイトのトーンとフィットし、他サービスの比較検討も迷うこともなく、これでいこう!と。

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

--フォーム作成と顧客管理の点で、他のフォームサービスを選択しなかったのは何故でしょう?

山村 他のフォームサービスって機械的といいますか、ひと目見て、”ああ、これあの会社のフォーム使ってるな”という印象をユーザーさんに与えてしまうんですよね。formrunなら、デザイナーさんの工数を使わずに、ビジネス側のメンバーだけで、「入力フォームのウインドウを右にしてみよう」といったレイアウトの変更や、画像を自由にインサートしたり、カスタマイズを自由にフォームを用意できました。

BASEはデザインをとても大切にしている会社。そのため、”直感的にわかりやすい”ということが大切な共通のコンセプトとしてあるので、デザイン性や自由度、ユーザーインターフェイスも優れていformrunは、BASEのさまざまなLP(ランディングページ)とのフィット感がありました。

f:id:mixtape-team:20171004010538p:plain △formrunのクリエイター機能で作成された「QRコード決済応援キャンペーン」フォーム(現在はキャンペーン終了)

--キャンペーン応募管理におけるformrunのご感想を教えてください

山村 フォームに入力していただいたキャンペーンの応募情報が綺麗にデータベース化されて、かんたんにデータの抽出や管理ができる使い勝手が良かったですね。一覧化されたリスト画面とステータスで管理できるボード画面がありますが、ボード画面が特に良いですね。キャンペーンの応募受付から配送作業など細かくステータスを分けて対応していたのですが、カードを移動させるだけでステータス変更できるのが便利でした。

また、入力してもらったアンケート内容も視覚的に見やすいですね。こういったリアルタイムに入力されて溜まっていくデータベースの管理は従来、エンジニアさん側にあるので、必要な時に都度このようなデータを出してくださいと依頼をして、何回かのコミュニケーションを通じてデータを共有してもらうという手間をかけてしまう。それをビジネス側のメンバーでも、キャンペーン状況の把握やステータス管理、データの抽出まで全てひとりで完結できるというのが、たいへん効率的でした。個人的には、キャンペーンの概要やアンケート結果がデータとして画像表示されると嬉しいですね。

—BASEさんのこのたびのキャンペーンではformrunとSlackを連携して利用されたと伺いましたが、どのように使われていたのでしょうか?

山村 BASEにおける全社コミュニケーションの中心となっているのがチャットツールのSlackとドキュメント共有ツールのDocBaseなんですが、
Slackで話題になると、会社全体が盛り上げるといいますか、みんなの意識が集まるため、必然的にプライオリティも上がっていくので、要素として非常に大きかったりするんですね。

そんな、社員全員がオープンに見えるSlackの空間で、formrunと連携したキャンペーンの通知がチャネルにぽこぽこと「応募がありました」「応募がありました」と流れてくる。80人近くのBASEメンバーが、キャンペーンの回答状況をリアルタイム共有できて社内が盛り上がりました。この高揚感を共有できた点が良かったですね。

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

また、リアルタイムにSlack内でメンバーとコミュニケーションを行い、キャンペーン対応の準備を先んじて行えた点も大きいですね。キャンペーンに応募してくださったショップの皆さんが記入してくださったアンケートの内容も、カードを開くと把握できますし、そのメッセージをメンバー全員が認識することで、どんどんテンションがあがる。次々に届くキャンペーン応募を見ながら、自分自身、世の中が変わる気がしました。

もし、Slack連携によるリアルタイムな通知がなければ、ある程度時間がたった時点で「今、何件くらい応募があるだろう」という受け身的にデータを抽出していると思うのですが、
これだと対応が後手後手になってしまったのではないでしょうか。

guide.form.run

--formrunはどのような方にご推薦できますか?

山村 僕らのケースのように、キャンペーンの募集管理におすすめです。HTMLができなくても使えるので、エンジニアさんやデザイナーさんのリソースに頼らず、営業側のスタッフサイドで完結できる。それにデータ数が数千の規模でもストレスなく管理、運用できるという点も幅広いキャンペーンで利用できます。

時間がない、リソースがないなかでも、妥協なくキャンペーンを展開できるというのは力強い味方だなと思います。営業やエンジニアなど部署をまたがって運用するプロジェクトを実施しているチームにもお薦めしたいですね。


【プロフィール】

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

山村 兼司

BASE株式会社 COO

1978年生まれ 京都府出身。サントリー清涼飲料部門の営業を経て、2004年株式会社リクルートへ。学び事業にて、営業、商品企画を経験し、2009年ケイコとマナブ.net編集長、その後、共同購入サービスのポンパレ事業立ち上げに参画、ゼネラルマネジャーとして全国拡販を推進、CS推進部、ECビジネス推進室にてゼネラルマネジャー、関連企業での経営企画部長や、O2O、デジタルマーケティング、CRM、決済領域での新規事業企画等を経て、2017年より、BASE株式会社にジョイン。ビジネス部門全般とEコマースプラットフォーム「BASE」の店舗売上向上支援などカスタマーサクセスを推進し、同年7月にCOOに就任。

binc.jp


formrunではじめてみましょう、あたらしいお客さまとの関係

formrunってどんなサービス? guide.form.run

クリエイター機能でフォームをつくってみよう・基礎編 guide.form.run

クリエイター機能でフォームをつくってみよう・応用編 guide.form.run

HTMLコード埋込み型フォームをつくってみよう guide.form.run

2017年10月4日 午前6時44分発生 システム障害のお詫びとお知らせ(復旧済)

mixtape LLCが運営する、サポートチームのためのコンタクト管理ツール「formrun(フォームラン)」がシステム障害により、サービスをご利用いただけない事象が発生いたしました。お客様ならびに、お取引先の皆様、関係者の皆様には、多大なるご不便、ご迷惑をお掛けしましたことを、心より深くお詫び申し上げます。


【発生日時】2017年10月4日(水)午前6時44分

【復旧日時】2017年10月4日(水)午後12時18分頃(復旧済)

【ユーザーの皆様への影響】

・リスト画面およびボード画面、一部検索機能が利用出来ない状態

・一部ユーザーのログインが出来ない状態が発生

【その他】

システム障害発生期間におけるフォームならびにメール送受信のデータに問題はございません

【今後の再発防止策】

あらゆる障害を想定し、対応できる仕組みの検討および対策・導入を進めてまいります。


過去のシステム障害一覧

2017年2月14日 6:00-9:50(復旧時刻)

2016年11月29日 10:00-11:15(復旧時刻)

#5 HTMLコード埋め込み型フォームをつくってみよう

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

formrunでは、エンジニア・デザイナーといった開発者向けの「HTMLコード埋め込み型」のフォームを作成する事ができます。この機能でフォームをつくってみましょう。

「HTMLコード埋め込み型」のフォームは、WordPressやCMSといった、既にお持ちのWEBページに直接埋め込む事ができるので、デザイン性や操作性を損なうこと無くフォームを設置することが出来ます。


フォームを作成しよう

フォーム一覧ページからフォームの作成画面に移動してください。

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

「コード型で作成」をクリックしてください。

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

フォームの名前を入力して「登録する」を押してください。 この名前は、後ほど設定する通知メールなど、フォームの管理のために利用されます。 フォーム名は後から変更することが出来ます。

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

HTMLを記述しよう

「HTMLタグ作成」を参考に通常のフォームを作成するように、 <form> タグを記述してください。

その際に、通常のフォームと異なる点として、以下の2点に注意してください。

  • <form> タグに付与されるクラス名として formrun を追加してください
  • <form> タグの action 属性を「コード設置方法」のページで指定される https://form.run/api/v1/r/{{フォーム毎に決まる文字列}} としてください

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

HTMLを貼り付けよう

記述したHTMLとスクリプトタグ(formrun.jsと呼びます)を、ご自身のWEBページに設定してください。

formrun.js はHTMLのheadタグ内に設定してください。 それ以外の場所に設定した場合やスクリプトタグを改変して設置した場合、フォームの送信が正常に行われないことや、画面表示の際にフォームがチラつく可能性がございます。

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

フォーム設置URLを設定しよう

formrunでは、不正なフォーム送信を防ぐために、フォームを設置するページのURLを事前に登録しておく必要がございます。

フォームのURLは複数設定することが出来ますので、テスト送信のためのURLなどを設定すると便利です。

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

テスト送信しよう

HTML貼り付けとフォーム設置URLを設定できましたら、実際にフォームを送信してみましょう。

フォームの設定が正常に行われている場合、即座に「リスト画面」や「ボード画面」にフォームのデータが追加されます。

フォームを送信できなかった場合や、送信したのに「リスト画面」や「ボード画面」に表示されない場合は、「HTMLを記述しよう」以降の設定にお間違いがないかいま一度ご確認ください。

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

自動メール返信の設定をしよう

フォームを送信した時に、フォーム送信者に自動でメールを返信する機能があります。

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

「自動メール返信」の設定ページに移動して、「自動返信 ON」にチェックを入れてください。

メールアドレス項目名

「メールアドレス項目名」には、フォームから受け付けるメールアドレスの項目を設定してください。

例えば、

<input name="メールアドレス" type="email">

としてメールアドレスを入力できるフォームの場合、「メールアドレス項目名」に「メールアドレス」を指定してください。

返信先アドレス (Reply-To)

自動返信されたメールに対して返信を受け付けるためのメールアドレスを指定してください.

件名・本文

自動メール返信に利用される件名と本文を設定してください。

自動メール返信にデータを表示する

自動メール返信の中に、フォームで送信されたデータを表示することが出来ます。

フォームを受け付けた時の通知を設定しよう

フォームからデータを受け付けた際に、他のメールアドレスやSlack、Chatworkに受け付けたデータを通知・転送することが出来ます。

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

メール通知

転送したいメールアドレスを設定してください。

Professionalプランでは、転送先メールアドレスを複数設定することが出来ます。

Slack通知

転送したいSlackのチャンネルの Webhook URL を設定してください。

Chatwork

転送したいChatworkの API トークンと、room ID を指定してください。

より高度な設定について

formrun.js にはここで紹介した以外にも、豊富なバリデーション機能や確認画面機能などがございます。 非常に自由度の高いフォーム活用ができますので、ご参照ください。

guide.form.run

guide.form.run

guide.form.run

guide.form.run