Automatically Fill Google Form Fields from Event Webpage

Other Questions Google docs
1

Hey everyone! I’m working on a project where I need to connect my event webpage with a Google Form. Here’s what I’m trying to do:

I’ve got an event page (let’s say it’s something like mysite.com/events/1234.html) with details like the event name and date. I also have a Google Form set up as a survey.

What I want to do is automatically fill in some fields in the Google Form with info from the event page. So when someone clicks the form link, it would already have the event name and date filled in. This way, we avoid typos and make it easier for people to respond.

The form would look something like this:

Event Name: [auto-filled]
Date of Event: [auto-filled]
Please rate:
[Other questions]
[Submit button]

I know you can manually change the link to pre-fill stuff, but I’m wondering if there’s a way to do this automatically? Any ideas or tips would be super helpful!

Thanks a bunch!

2

I’ve encountered a similar situation and found that dynamically constructing a pre-filled Google Form URL directly on your event page is a practical solution. In my experience, the key is to extract the event details from your page and plug them into the form’s URL as parameters, using the specific entry IDs for each field. By doing this with JavaScript, you can ensure the values are updated automatically whenever the event details change. Remember to use URL encoding for any special characters to maintain the integrity of your data.

3

hey markseeker91, u could try using url parameters to pre-fill the form. basically, add the event info to the form link like this: https://docs.google.com/forms/d/e/.../viewform?entry.12345=EventName&entry.67890=EventDate then use javascript on ur event page to make the link dynamic. it’ll auto-fill when ppl click. hope that helps!

4

As someone who’s dealt with similar challenges, I can share a solution that worked well for me. I used a combination of JavaScript and Google Forms’ pre-fill feature to achieve this seamlessly.

First, I extracted the event details from my webpage using JavaScript. Then, I constructed a dynamic URL for the Google Form, incorporating these details as parameters. The trick is to find the entry IDs for each form field - you can do this by inspecting the form’s HTML.

Here’s a simplified example of how I did it:

let eventName = document.getElementById('event-name').textContent;
let eventDate = document.getElementById('event-date').textContent;

let formUrl = `https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?entry.12345=${encodeURIComponent(eventName)}&entry.67890=${encodeURIComponent(eventDate)}`;

document.getElementById('form-link').href = formUrl;

This approach ensures that when someone clicks the form link on your event page, they’re directed to a pre-filled form. It’s efficient and reduces user error. Just remember to URL encode the parameters to handle special characters correctly.