Vanilla Form Help

This page covers the basic workflow, builder settings, and checks before publishing. To open the builder, use/vanilla-form/app/.

1. What you need

  • A Google account to create and manage the Google Form
  • A web page where you can paste and publish the generated HTML
  • A share URL (`forms.gle` or `docs.google.com/forms/...`) or an `iframe` embed code for the Google Form

2. Basic workflow

  1. Create a Google Form and copy its URL or embed code.
  2. Load it into Vanilla Form Builder.
  3. Adjust labels, required fields, visibility, and input types.
  4. Configure the post-submit behavior and analytics if needed.
  5. Review the preview and copy the generated code.
  6. Paste it into your HTML and run a submission test.

3. Google Form setup

If you do not have a Google Form yet

You can start from thecontact-form template (Japanese). Make a copy in your own Google Drive, customize it, publish it, then load the respondent URL into Vanilla Form Builder.

Get the share URL

  1. Open the Google Form editor.
  2. Click “Publish” in the upper right.
  3. Set respondent access so anyone with the link can answer.
  4. Copy the respondent link.

Supported respondent access

Vanilla Form supports Google Forms that anyone with the link can answer. Settings that require Google sign-in are not supported.

  • Limit to one response
  • Collect verified email addresses
  • Restrict respondents to an organization, Google Group, or selected users
  • Include a file-upload question

If you need these settings or file uploads, use the original Google Form instead of Vanilla Form.

Get the embed code

  1. Open the publish dialog in Google Forms.
  2. Select the embed option.
  3. Copy the generated `iframe` code.

Link a response spreadsheet

Link a Google Spreadsheet if you want responses and notifications in one place, especially when several people handle inquiries.

4. Builder settings

Field customization

Adjust labels, placeholders, required fields, visibility, and input types for each field. Fields required by the original Google Form cannot be hidden or made optional.

Post-submit behavior

Choose an inline message, a dialog, or a thank-you page. For a thank-you page, use a full `https://...` URL or a root-relative path such as `/thanks/`.

Styles

Choose the default style, no styles, Bootstrap classes, or Tailwind classes. Bootstrap and Tailwind output require the matching CSS on the destination page.

Analytics and anti-spam

Successful submissions can trigger GA4 or GTM events. You can also add a honeypot field and minimum wait time as lightweight spam measures. These do not replace stronger bot protection such as Turnstile or reCAPTCHA.

5. Checks before publishing

  • Pressing the submit button in the preview sends real data to Google Forms.
  • Configure response notification emails in Google Forms.
  • When several people manage the form, check access to both the form and its response spreadsheet.
  • Keep the generated `begin/end generated by vanilla-form-builder` comments if you want to review code changes later.

6. How data is handled

  • When loading a form, the service reads field information from its URL or embed code.
  • The service does not store entered URLs or builder settings.
  • Generated forms submit to Google Forms (`formResponse`), where the submitted data is managed.

7. Troubleshooting

Loading fails

Use a public `forms.gle` link, a `docs.google.com/forms/.../viewform` URL, or an embed `iframe` code. Vanilla Form cannot load forms that require sign-in, are limited to an organization, or contain file-upload questions.

The thank-you page setting is rejected

Enter a full `https://...` URL or a root-relative path such as `/thanks/`.

Submission events are not tracked

Check that GA4 or GTM is loaded on the destination page and that the event name is correct.

The form looks broken

Check that the selected output style matches the CSS loaded on the page where you pasted the form.

8. Related pages