Vanilla Form Help

This page covers the basic usage of Vanilla Form. To open the builder itself, 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 flags, visibility, and input types.
  4. Configure completion 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

Get the share URL

  1. Open the Google Form editor.
  2. Click “Publish” in the upper right.
  3. Set respondent access so the form can be opened publicly.
  4. Copy the respondent link.

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

Linking a Google Spreadsheet makes responses easier to review and share, especially when several people handle inquiries together.

4. Builder settings

Field customization

You can adjust labels, placeholders, required flags, visibility, and input types per field. Required fields on the Google Form side cannot be hidden or made optional.

After-submit behavior

Choose inline completion, a dialog, or a thank-you page. Thank-you page URLs should be full `https://...` URLs or root-relative paths such as `/thanks/`.

Styles

The builder can output default classes, no styles, Bootstrap classes, or Tailwind classes. If you choose Bootstrap or Tailwind, make sure the destination page already loads the matching CSS.

Analytics and anti-spam

Successful submissions can trigger GA4 or GTM events. A honeypot field and a minimum wait time are also available as light anti-spam measures, but they are not replacements for stronger bot protection such as Turnstile or reCAPTCHA.

5. Checks before publishing

  • If preview test submission is enabled, the preview sends real data to Google Forms.
  • Configure response notification emails on the Google Forms side.
  • Check access permissions for both the form and the linked spreadsheet when multiple people operate it.
  • Keeping the generated `begin/end generated by vanilla-form-builder` comments helps when reviewing diffs later.

6. How data is handled

  • The service fetches field information from the Google Form URL or embed code when loading.
  • Entered URLs and builder settings are not stored by the service.
  • The generated form submits to Google Forms (`formResponse`), so inquiry contents are managed on Google's side.

7. Troubleshooting

Loading fails

Use a public `forms.gle` link, a `docs.google.com/forms/.../viewform` URL, or an embed `iframe` code. If the form requires login, restricts access to an organization, or includes file-upload questions, Vanilla Form cannot load it.

The thank-you page setting is rejected

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

Submission events are not tracked

Confirm that GA4 or GTM is loaded correctly on the destination page and that the event name has no typo.

The appearance is broken

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

8. Related pages