Webサイトにお問い合わせフォームを作りたいけど、設定が面倒だったり、デザインが合わなかったりして困っていませんか？
通常、お問い合わせフォームにはデータ送信の処理が必要ですが、HTMLとCSSだけでは入力欄のデザインしか作れずフォームとしての機能はないです。
本記事で紹介するタリーフォーム（Tally Form）を使えば、PHPやバックエンドの知識がなくても、無料で簡単にフォームを設置できます！
今回は、タリーフォームを使って、お問い合わせフォームをHTMLコピペで導入する方法をご紹介します。
タリーフォームシンプルな操作で導入できますが、英語表記でわかりづらいなという方にも導入いただけるようタリーフォームの登録から設置方法まで解説していきます。
タリーフォームとは？
Tally Form（タリーフォーム）は、ノーコードで簡単にお問い合わせフォームを作れるサービスです。
HTMLとCSS、PHPなどの知識がなくても、直感的な操作でフォームを作成し、コードをコピペするだけでサイトにフォームが埋め込めます。
- PHPやサーバー設定不要でフォームを動作させられる
- スタイリッシュなフォームを作れる
- 無料プランでも送信回数が無制限なので、何件でも問い合わせを受けられる
- Notionなど外部アプリとも連携可能
以下のような感じで、見た目もスタイリッシュです。
タリーフォームの使い方
Tally（タリー）では「ログインなし」で一時的にフォームを作成できますが、作成したフォームは保存できません。
登録はGoogleアカウントとの連携で簡単にできますので、ぜひ登録して実際の機能を試してみてください。
ログインなしで出来ること
- Tallyのサイトにアクセスして、そのままフォームを作り始める
- プレビューや基本的な編集は可能
ログインなしで出来ないこと
- 作ったフォームを保存できない
- フォームの共有や埋め込みができない
- フォームの回答を受け取ることができない
タリーフォーム登録方法
Sign upをクリック。
グーグルアカウントやEmail登録でもOK！
私は使いやすいGoogleアカウントにしました。
ログインしたいアカウント選択をすると以下の画面になります。
次へをクリック。
英語でなんて書いてあるのかわからないので、右クリック→「日本語に翻訳」を選択します。
登録時に以下の3項目を聞かれるので選択して、次へいきます。
以下では、英語と日本語が混在してますが、選択する際は日本語で表示されます。
これで登録は完了です。
フォーム作成手順は次のステップで紹介します。
お問い合わせフォームを作成する手順
ここでは実際にTallyフォームの作成方法と使い方の手順を説明していきます。
右上➕新しいフォームをクリック。
日本語に翻訳してましたが、ここからは英語に戻ってしまいます。
フォームのタイトルを入力します。
例：「問い合わせフォーム」など
半角の/ を入力すると、ラベルの項目が一覧で表示されます。
はじめに「お名前」入力欄を作成していきます。
Short answerをクリック。
「Type a question」に項目名を入力します。
例：「お名前」など
デフォルトで*マークがついてます。こちらは「必須」項目となり、入力されないと送信できない仕組みです。
必須項目を解除したい場合は、*マークをクリックして解除しましょう。
クリックで必須を消してしまい、再度適用させる場合は、左の6つの点（メニュー）から、「Required」クリックでオンにします。
これで、必須項目が適用されます。
お名前で作った項目の左側「＋」ボタンクリックで項目を追加します。
「＋」を押すと以下のような項目が一覧で表示されるので、「@Email」をクリック。
Insertをクリック。
「Email」や「メールアドレス」など任意の項目名を入力します。
お問い合わせ種別を作成していきます。
ここは任意で、「Dropdown（ドロップボックス）」や「Checkboxes（チェックボックス）」など選択します。
私は、「Multiple choice」というチェックボックスでサイズはミディアムを選びました。
お問い合わせ種別の項目名を入力します。
「Long answer（ロングアンサー）」 を選択して、Insertをクリック。
これで、お問い合わせ内容の項目が追加できます。
以下のような感じで簡単にフォームが作成できちゃいます。
日本向けのサイトを想定しているので、「Submit」を変えます。
Submitをクリックすると、ボタンラベルが表示されるので「送信する」へ変更します。
送信するのみでOKなら、この操作は不要です。
ユーザーが送信したあとに、表示されるサンキューページがほしい方向けです。
送信するボタンより下任意の箇所を適当にクリックします。
適当にクリックでブロックが作られるので、/thaなど頭文字打ちます。
'Thank you' pageをクリック。
送信時、「〇〇様 お問い合わせありがとうございます。」と表示させたいので、名前を追加していきます。
＠マークを打ちます。
@で項目一覧表示→「お名前」選択。
以下のようになります。サンキューページに表示させる内容は任意で変更してください。
すべての項目が作成できたら、Publishをクリック。
上の「Shara」タブでURLが表示されます。
CopyでURLコピーができるので、このまま使いたい場合も、このURLで問い合わせ受付可能です。
上のURLをコピーして、実際にアクセスしてみましょう。
URL例：”https://tally.so/r/xxxxxx”
以下のように自分で作ったフォームが作成されているので、テスト送信してみます。
サンキューページを設定した場合、送信後にサンキューページが表示されているか確認しましょう。
送信された内容は、「Submissions」に保存されます。
Download CSVでお問い合わせデータをダウンロードできます。
HTMLコピペで完成したフォームをサイトに埋め込む
設置したいサイトのHTMLファイル<body></body>内に埋め込みしていきます。
以下のように「height=”1000px」（高さ1000px）と設定してますが、項目量によって高さが異なるので微調整してください。
<iframe src="https://tally.so/r/xxxxxx" width="100%" height="1000px" frameborder="0"></iframe>実際にサイトに表示させてみました。とっても簡単！
Tallyはフォームテンプレートも豊富！
タリーフォームにはたくさんのテンプレートも用意されています。
Tallyのログインページ左側サイドメニューに表示されているTemplateを押すとたくさんのテンプレートが見れます。
以下のように数多くのテンプレが揃っています。
気になるテンプレートを開いて、右上Use this templateをクリック。
自分用に編集できる画面になります。
ここで日本語に変更して、テンプレートの編集ができます。
タリーフォーム無料版の注意点
タリーフォームは基本的には無料で使えますが、以下の制限があるので注意してください。
- 右下にTallyのロゴが表示される（有料プランでは非表示可能）
- メール転送機能は標準搭載されていない（有料プランでは転送可能）
※Googleスプレッドシート連携でカスタム可能 - iframe 内のスタイルを自由にカスタマイズすることはできない（CSS適用が制限される）
メール通知が必要な場合は、Googleスプレッドシート + Google Apps ScriptでGmailに転送する方法もあります。
まとめ
- HTMLコピペだけで簡単にお問い合わせフォームを設置できる
- PHP不要・サーバー設定なしで動作するので初心者でも安心
- 無料プランではTallyのロゴが表示され、メール転送機能がない（カスタムで対応可能）
- レスポンシブ（スマホやタブレットサイズ）にも対応
無料版では少し制限がありますが特に気にならず、すぐにフォームを入れたい場合には役立ちます。
「サクッとサイトにフォームを作りたい！」という方は、ぜひタリーフォームを活用してみてください！
コメント