Google Pre-filled Forms

Google forms is a great product from Google which has solved a major problem web had - collecting user-submitted data.

Google forms not only solves that, but also provides a way to get the data as a spreadsheet which in turn can be used to generate graphs and other visual aids for analysis.

I have already written about it in one of my blogs on how to use it in a website without embedding it. In that way, you can use your input fields, buttons, and so on and on submission, the form is submitted to Google form.

This is a nice idea but you might get a lot of spam since you are kind of bypassing the Google form page altogether.

Why use Google Custom Forms

• It is free.
• It handles spam.
• It generates a spreadsheet with form entries in it.
• Easy to generate graphs and other visual aids.
• It is free(did I mention that already?).

Google Pre-filled Form Link

The method I’m discussing here is using Google Form pre-filled link which looks like this.

<a
  href="https://docs.google.com/forms/d/e/1FAIpQLSfmsdfEdsgfLnMKc35fVDJ9SoHDkmMUhr-_0fvVZBH4TKyw/formResponse?usp=pp_url&amp;entry.191643444399=Sharath Kumar&amp;entry.1454645621435=sharath@email.com&amp;entry.8275655478=Hi, I would like to...&amp;submit=Submit"
  target="_blank"
  class="s-NMyTiX1zi6rz"
  >Submit</a
>

A closer look at the link will show you entry fields.

entry.191643444399=Sharath Kumar&entry.1454645621435=sharath@email.com&entry.8275655478=Hi, I would like to..&submit=Submit

How to get the pre-filed link

In a google form edit page, you can click on the three dots and click on the Get pre-filed link.

You just redirect users to this link where they see the form all filled up(if you pass values with it)

We have to make some changes to the link though.

1. /viewform? to /formResponse?
2. add &submit=Submit to the end of the URL

How to pass values

This is easy using vanilla JS but becomes a cakewalk using Svelte.

<script>
  let name = "";
  let email = "";
  let message = "";

  $: prefilledLink = `https://docs.google.com/forms/d/e/1FAIpQLSfmSZif4GDstMLnMKc35fVDJ9SoHDkmMUhr-_0fvVZBH4TKyw/formResponse?usp=pp_url&entry.1916444399=${name}&entry.1454621435=${email}&entry.827655478=${message}&submit=Submit`;
</script>

<label
  >Name
  <input type="name" placeholder="Ashok Patel" bind:value="{name}" />
</label>
<label
  >Email
  <input type="email" placeholder="name@email.com" bind:value="{email}" />
</label>
<label
  >Message
  <textarea placeholder="Hi, I'm..." bind:value="{message}" />
</label>
<a href="{prefilledLink}" target="_blank"><button>Submit</button></a>

This is it. I don’t think you can do this with this ease in any other JS framework(yet).

Here is a REPL

You can see it in action here Sveltekit Google Form

Here is an updated version of it where it can be used with Sveltekit and with auto-submission!

I hope this helped. Let me know if you were able to figure this out.

Find related articles