目次
目次
Mailchimpとサイトを連携させる必要がある理由
サイト訪問者のメールアドレスを収集してニュースレターを送信したり、割引コード・コンテンツを提供したりしたいとき、Mailchimp連携は非常に有用です。Framerでは専用コンポーネントを提供しているため、複雑なコードを扱わなくてもすぐに連携できます。
Mailchimp連携方法
1. MailchimpでフォームURLを取得
Mailchimpアカウントにログインした後、Embedded Form Codeセクションに移動してください。セクション内の<form action="">タグ内にMailchimpサブスクリプション処理用URLが含まれています。そのURLをコピーしてください。
例URL: https://framer.us18.list-manage.com/subscribe/post u=01218bcf94e5b95825414d926&id=7899444161&f_id=004555e7f0
2. FramerでMailchimpコンポーネントを追加
Framerプロジェクトを開き、左の
Insertパネルに移動してください。FormsセクションでMailchimpコンポーネントを見つけ、ページにドラッグして配置してください。
Note: デフォルト設定はメール入力フィールドと登録ボタンで構成されています。
3. フォームURLを貼り付けてスタイルをカスタマイズ
キャンバスでMailchimpコンポーネントを選択し、右のプロパティパネルでフォームURL入力欄にコピーしたURLを貼り付けてください。
Note: 同じパネルで入力フィールド、ボタンテキスト、レイアウト、色、フォント、角の丸みなど、さまざまなスタイルを自由に調整できます。
4. プレビューまたは公開後にテスト
設定が終了したら、Previewで確認するか、すぐにPublishを押してサイトを公開してください。公開されたサイトでフォームをテストすると、入力したデータが即座にMailchimpに送信されることを確認できます。
Framerの基本フォーム機能
Mailchimpを使用しなくても、Framerは独自のフォームシステムを提供しています。Framerの独自フォームは次のような機能を提供します。
10種類以上のさまざまなカスタム入力フォームを提供
さまざまなインタラクション向けにフォームデザイン可能
メール、Google Sheets、Webhookなどへのデータ送信が可能
セキュリティを強化するためにスパム防止とレートリミット機能を標準搭載
詳細な設定方法は関連するヘルプドキュメントを参照してください。
Mailchimp連携が役立つ代表的な活用例
割引提供: 製品やサービスに関する割引コードを提供して、ユーザーの購読を促進します。一度きりの購入者をリピーターに変えることができます。
リード獲得: ホワイトペーパーやPDFなどのプレミアムコンテンツを提供し、メールを促します。これによりリードを獲得できます。
購読者のみへのヒント提供: 他では提供されていない情報を提供し、メールリストを増やし、訪問者の参加を促進します。
さらなる問題が発生した場合は、コンタクトページを通じてお問い合わせください。
よくある質問(FAQ)
Q. Mailchimpフォームをプレビューでもテストできますか？
いいえ。Mailchimpサーバーに実際のリクエストを送る方式であるため、公開されたページでのみ正しく送信テストが可能です。
Q. フォームが送信されたとき、ユーザーに送る成功/失敗メッセージをカスタマイズできますか？
いいえ。Mailchimpフォームの成功/失敗メッセージはMailchimpサーバーから返されるHTMLに基づいて処理されるため、Framer内でUIを細かく制御することはできません。
Q. Framerでフォームのスタイル(ボタン、フォント、色)もカスタマイズ可能ですか？
はい。Mailchimp専用コンポーネントはスタイルパネルでテキスト、色、ボタンデザイン、レイアウトなどを自由に修正できるように提供されています。
この記事はFramer公式ブログの‘Disabling user select on a layer’を翻訳・アレンジした内容です。
