Framer
Automating design workflows in Framer.
The Latenode platform allows interaction with websites created using the Framer service. For interaction, only the Trigger on Webhook node is needed.
Let's create a scenario that records the email address entered in a website form into a Google Sheet. First, use the Framer service to create the registration form with a field for entering the email address and a confirmation button.
Creating a Framer Form
1. In the Framer workspace, choose the method to add a Code element. In the Create Code File window, enter any name and select the New component option.

2. Click the Create button.

3. On the opened page, add the code below and save the changes by pressing Ctrl + S. The form with an email input field and a Signup button will appear on the right side of the interface.
import React, { useState } from "react" import Example from "https://framer.com/m/framer/Example.js@^1.0.0" export default function AuthorizationForm(props) { // Update this with your Trigger on Webhook URL const formUrl = "You_URL" // MAYBE: If you are adding more fields to your form in addition to email update here const [email, setEmail] = useState("") const [formStatus, setFormStatus] = useState("unsubmitted") const onSubmit = async (event) => { event.preventDefault() try { const response = await fetch(formUrl, { method: "POST", body: JSON.stringify({ email }), // Construct your form data: comma seperated list headers: { "Content-type": "application/json", }, }) if (!response.ok) { throw new Error("Network response was not ok") } setFormStatus("submitted") // Update state to indicate successful submission } catch (error) { console.error("Error during form submission: ", error) setFormStatus("error") // Update state to indicate an error } } // Function to update email state // MAYBE: If you are adding more fields to your form in addition to email update here const handleEmailChange = (event) => { setEmail(event.target.value) } if (formStatus === "submitted") { return ( <div style={responseText}> Thank you! You have successfully registered. </div> ) } if (formStatus === "error") { return <div>Something went wrong. Please refresh and try again!</div> } return ( <> {/* Label for the form */} <div style={labelStyle}>Please provide your email address.</div> {/* Form */} <form onSubmit={onSubmit} style={containerStyle}> <input type="email" value={email} onChange={handleEmailChange} placeholder="Your email" required style={inputStyle} /> <input type="submit" value="Signup" style={submitButtonStyle} /> </form> </> ) } /// Updated Form Styles to match the provided image // Assuming a dark theme similar to the one in the image const containerStyle = { display: "flex", // Changed from flexDirection to display for correct CSS justifyContent: "space-between", // Align items side-by-side alignItems: "center", //background: "#18181B", // Dark background padding: "0.5rem", // Reduced padding borderRadius: "4px", // Smaller border radius for a subtler curve // boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", // A subtle shadow maxWidth: "500px", // Max width for the form margin: "auto", // Center the form in the page } const inputStyle = { flex: "1", // Take up the remaining space fontSize: "16px", // Smaller font size padding: "0.75rem", // Comfortable padding margin: "0", // No margin for the input backgroundColor: "#18181B", // Background to match the container border: "1px solid #333", // Subtle border borderRadius: "12px", // Matching the container's border radius color: "#FFF", // Text color marginRight: "0.5rem", // Space between input and button } const submitButtonStyle = { fontSize: "16px", // Matching font size with the input padding: "0.75rem 1.5rem", // Padding similar to the input backgroundColor: "#2C91ED", // Bright accent color for the button color: "#FFF", // Text color border: "none", // No border borderRadius: "12px", // Matching the container's border radius cursor: "pointer", // Cursor for button fontWeight: "bold", // Bold font weight for the button text } const responseText = { textAlign: "center", // Center the response text color: "#5FCEAE", // Color for the response message fontSize: "16px", // Consistent font size marginTop: "1rem", // Space above the response text } const labelStyle = { textAlign: "center", // Center align text color: "#FFF", // Text color fontSize: "16px", // Font size marginBottom: "1rem", // Space below the label }

Setting Up the Latenode Scenario and Sending Email
1. In the scenario created on the platform, add a Trigger on Webhook node. After adding, copy the URL address. You can run the node once to view the output data.


2. Replace You_URL
in the Framer form code with the URL address of the Trigger on Webhook node.
3. After adding the URL address, fill in the field with a test email address and click the Signup button.

4. Once you click the Signup button, the Trigger on Webhook node will execute, and the output data will include the provided email address.

5. To record the received email address in a Google Sheet, add an Add Single Row node and configure it:
- Create or select an existing authorization.
- Choose the desired Google Sheet and sheet tab.
- Select the parameter from the previous node for the Values field in the auxiliary window.

The result of the scenario execution is that the email address entered in the Framer form is recorded in a cell of the Google Sheet.

