formrun guide

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

#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