このドキュメントは、Framerを学ぶ日本のユーザーが、日本語資料の不足で感じる困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆さんに少しでもお役に立てれば幸いです。

フォームはなぜ必要ですか？

ウェブサイトを運営していると、訪問者からの問い合わせ、予約、メールマガジン登録など、様々なデータを受け取る必要が生じます。Framerで基本的に提供されるフォームコンポーネントを使用すれば、コーディングなしで多様な種類のフォームを簡単に追加し、外部サービスと連携してデータを収集することができます。

Framerフォームコンポーネントの機能

• テキスト、メール、セレクトボックス、チェックボックスなど10種類以上の入力タイプをサポート

• 送信完了、エラーメッセージなど、フォームの様々な状態を直接デザイン可能

• 収集したデータをメール、Google Sheets、Webhookなどに送信可能

• スパムフィルタリングおよびリクエスト速度制限機能を標準搭載

フォーム追加方法

1. Framerエディター左側のInsertメニューをクリック

2. Formsセクションから必要なフォームを選択し、ドラッグしてページに追加

3. デザインおよびデータ接続設定

Framerの基本提供フォームを使用する

Framerは多様な使用目的に合わせたフォーム機能をサポートします。

また、Inputコンポーネントを使用してメール収集が可能です。この機能はLoops.so、Mailchimp、Formspark、GetWaitlistサービスをサポートします。

その他の外部フォームサービスを接続する

BeehiivやTallyなどの外部フォームサービスを挿入するには

1. 該当サービスが提供するHTMLスクリプトをコピー

2. FramerのEmbedコンポーネントに貼り付け

別の方法としては、Code Componentsを使ってフォームを完全にカスタマイズして直接作成することがあります。

関連資料

• Intercomをウェブサイトに追加する方法

• Mailchimpをウェブサイトに追加する方法

• Typeformをウェブサイトに追加する方法

• Formsparkをウェブサイトに追加する方法

• Hubspot Formsをウェブサイトに追加する方法

この文章はFramer公式ドキュメント「How can I add a contact form to my Framer website」を翻訳・脚色したコンテンツです。