Webflow sync, pageviews & more.
NEW
Answers

How can I embed a Google Form into a website created with Webflow for sending different form data to different email addresses?

To embed a Google Form into a website created with Webflow, and send form data to different email addresses based on user selections, you can follow these steps:

Step 1: Set up your Google Form
1. Go to Google Forms (https://www.google.com/forms) and create a new form or select an existing form.
2. Add the necessary fields to your form, such as name, email, and any other custom fields you need.
3. Go to the "Responses" tab in Google Forms and click on the Google Sheets icon to create a new spreadsheet or link an existing one. This will store the form responses.

Step 2: Customize the form URL parameters
1. After creating the form, click on the "Send" button in Google Forms' toolbar.
2. In the pop-up window, click on the "Embed" tab.
3. Customize the embed options as per your requirements, such as form width, height, and the theme you prefer.
4. Copy the embed code provided by Google Forms.

Step 3: Add the Google Form to your Webflow project
1. In your Webflow project, navigate to the page where you want to embed the form.
2. Add an Embed component to your Webflow page. You can find it in the element panel on the left.
3. Paste the Google Forms embed code into the Embed component.
4. Adjust the size and positioning of the Embed component to fit properly within your page's design.

Step 4: Dynamically send form data to different email addresses
1. Go back to Google Forms and click on the "View Responses" button in the toolbar.
2. In the Google Sheets where form responses are stored, add a new column for email addresses. For example, you can name it "Recipient Email".
3. In each row, enter the respective email address to which you want to send the form data for that specific response.
4. Close the Google Sheets.

Step 5: Set up email notifications in Google Forms
1. Open the Google Form and click on the "Responses" tab.
2. Click on the three-dot menu button and select "Script editor".
3. In the script editor, replace the default code with the following script:

```javascript
function sendFormByEmail(e) {
var recipientEmail = e.namedValues["Recipient Email"];
var subject = "New form submission";
var message = "";

for (var field in e.namedValues) {
message += field + ": " + e.namedValues[field].toString() + "\n";
}

MailApp.sendEmail(recipientEmail, subject, message);
}
```

4. Save the script.
5. Close the script editor.

Now, when a user submits the Google Form embedded in your Webflow website, the form data will be sent to the specific email address you designated for that response.

Remember to publish your Webflow project for the changes to take effect and test the form to ensure it is functioning correctly. Additionally, be mindful of any styling adjustments you need to make to the embedded form to match your website's design.

Rate this answer

Other Webflow Questions