FramerからGoogle Sheetsへのフォームデータ入力の自動化Latenode

FramerからGoogle Sheetsへのフォームデータ入力の自動化Latenode

Latenode プラットフォームは、Framer サービスを使って作成されたウェブサイトとのシームレスなインタラクションを可能にします。このガイドでは、サイトのフォームに入力されたメールアドレスが、自動的にGoogle Sheetsのセルに書き込まれるシナリオの作成について説明します。これにより、手作業によるデータ入力がなくなり、データ収集プロセスが合理化されます。

Framerでフォームを作成する

まず、Framerワークスペースでフォームを作成します。新しいプロジェクトを開始し、そのプロジェクト内でカスタムコードを入力して要素を追加します。Create Code File」ウィンドウを使用して、「New Component」オプションをチェックしたまま、コンポーネントに名前を付けます。デフォルトのコードを削除し、カスタマイズしたスクリプトを追加します。

インターフェイスの右側に、テキスト指示、電子メール入力フィールド、確認ボタンを含むフォームが表示されます。コードの主要部分には、フォームのURL定数が含まれ、'trigger on webhook'ノードのアドレスが含まれていなければなりません。

シナリオの設定Latenode

次に、Latenode プラットフォームに切り替えて、シナリオを設定します。新しいシナリオを作成するボタンをクリックし、最初のトリガーノードを追加します。このノードは、URLアドレスにリクエストが送信されると、シナリオを開始します。このアドレスは必要に応じて変更することができます。このURLアドレスをコピーし、Framerコードに貼り付けます。

これで、フォームのボタンがクリックされると、入力されたEメール値のリクエストが、指定されたURLを使用して「trigger on webhook」ノードに送信されます。

相互作用のテスト

Latenode のシナリオに戻り、ノードを一度実行してインタラクションをテストします。フォームに戻り、テスト用のEメールを入力し、確認ボタンをクリックします。登録が成功したことを確認するメッセージが表示されます。

Latenode に戻ると、「trigger on webhook」ノードが正常に実行されているはずです。出力パラメータの1つは、フォームに入力されたメールアドレスです。

Googleシートへの書き込み

指定したEメールの値をGoogle Sheetsのセルに書き込むには、Latenode 、Googleグループから別のノードを追加します。行を追加するノードは完璧に機能します。新規認証」ボタンをクリックし、Googleアカウントで認証を行います。Googleシートと、値を記録したい特定のシートタブを選択し、トリガーノードからemailパラメータを記録する値として定義します。変更を保存します。

シナリオの実行

シナリオ全体を一度実行してテストします。フォームに新しいテスト用メールアドレスを入力し、ボタンをクリックします。シナリオが正常に実行され、指定したGoogle Sheetsのセルにメールアドレスが書き込まれるはずです。Googleシートを更新し、データ入力を確認する。毎回手動で操作することなくプロセスを自動化するには、シナリオをアクティブにします。以降、'trigger on webhook' ノードのURLにリクエストが送信される度に、シナリオは自動的に実行されます。

以上のステップで、Framerフォームに入力されたメールアドレスをGoogle Sheetsドキュメントに記録するシナリオの作成に成功しました。Latenode で、シームレスで効率的な自動化をお楽しみください。

お付き合いいただきありがとうございました！