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

Formsparkとは何ですか？

Formsparkは、フォーム送信データを直接メールで受け取ったり、Slack、Zapier、Integromatなどのプラットフォームと連携することができるサービスです。お問い合わせフォーム、リード収集フォーム、サポートチケットなどを簡単に管理できます。

FramerでのFormsparkの主な使用例

Framerでフォームをカスタマイズすることが可能です。Formsparkを使用すれば、サーバーを管理したりAPIを学ぶ必要なく、Framerサイトで訪問者情報を即座に収集できます。

• お問い合わせフォーム: 「お問い合わせ」フォームは潜在顧客や既存顧客が簡単に連絡を取ることができる窓口を提供します。顧客から有用な情報を効果的に収集できるように、具体的なリクエストを誘導する案内文を追加することをお勧めします。

• メール購読フォーム: ブログやホームページに購読フォームを追加してメールリストを増やすことができます。

• カスタマーサポートフォーム: すべてのチケットを一か所で整理できる簡単なシステムを使用して、顧客のサポートリクエストを効率的に処理しましょう。

ステップバイステップの設定方法

1. FormsparkでForm IDをコピーする

まずFormsparkにアクセスして新しいHTMLフォームを作成するか、既存のフォームを開き、フォーム設定でForm ID (例: 7PbPpGN3) をコピーしてください。フォームを新規作成する際には必ずTechnology選択欄でHTMLが選ばれているか確認してください。

2. FramerでFormsparkコンポーネントを追加する

Framerプロジェクトを開いた後、キャンバスの左側のInsertパネルを開きます。Elementsセクションの下にあるFormsparkを見つけてキャンバスにドラッグします。

3. Form IDを貼り付けてフォームをカスタマイズする

右パネルのFormsparkIDフィールドにコピーしたForm IDを入力します。IDフィールドの下に名前/メールアドレス/メッセージフィールドが表示されます。これらのフィールドをオンまたはオフにしたり、レイアウト調整、色の変更、カスタムフォントの追加など、望むままに外観を変更できます。

Framerの基本フォーム機能

Framer自体にもネイティブなフォーム機能が含まれており、以下のような機能を備えています。

• 10種類以上の入力タイプのサポート

• フォームに多様なインタラクションデザインが可能

• メール、Google Sheets、Webhookにデータ送信可

• スパム防止機能と送信速度制限機能内蔵

Framerの基本フォームを追加するにはこのガイドを参照してください。まだ問題が発生する場合は、さらなるサポートを得るために連絡先ページを通してご連絡ください。

この記事は、Framer公式ブログの「Adding Formspark to your site」を翻訳・編集したコンテンツです。