Insert a form

This tutorial teaches you how to create a custom form with Google Forms and insert it into a page of your website. It's useful for collecting visitor information: appraisal requests, specific inquiries, surveys, newsletter subscriptions, etc.

This tutorial uses Google Forms because it's free, easy to use, and automatically saves responses to a spreadsheet. The same procedure works with other services (Typeform, Jotform, Microsoft Forms): all you need is an <iframe> embed code from the service.

What you'll achieve

A page on your website with a functional form where visitors can fill in fields and send you the information. Each submission arrives in a Google spreadsheet (and optionally to your email).


Part 1 — Create the form in Google Forms

Step 1.1 — Access Google Drive

  1. Open drive.google.com in your browser.
  2. Sign in with your Google account (if you don't have one, create one for free).

Step 1.2 — Create a new form

  1. Press the + New button (top left).
  2. Choose More > Google Forms.
  3. An editor opens with an empty form.

Step 1.3 — Configure the fields

  1. Form title: for example, "Appraisal request".
  2. Description: one line explaining what it's for.
  3. Add questions: press the + button in the side panel to add fields. The most useful field types are:
    • Short answer: for name, email, phone.
    • Paragraph: for long messages.
    • Checkboxes: for multiple options.
    • Dropdown: for a single option from a list.
  4. Required fields: turn on the "Required" toggle on each important field (typically email and name).

If you have questions about how to configure Google Forms, search Google for "how to create a Google Forms form" — there are very clear video tutorials.


Part 2 — Get the embed code

Step 2.1 — Access the "Insert" option

  1. On the form you created, press the Send button (top right).
  2. In the dialog, choose the tab with the < > icon (Embed HTML).
  3. The <iframe ...> code appears ready to copy.

Step 2.2 — Configure the size (optional)

Within the same dialog, adjust Width and Height in pixels. Recommendation:

  • Width: 100% (adapts to the container on your site).
  • Height: between 600 and 800 px (depends on how many fields it has).

Step 2.3 — Copy the code

Press Copy. The code will look like this:

<iframe src="https://docs.google.com/forms/d/e/.../viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

Part 3 — Insert the form into your website

Step 3.1 — Create or edit the page

From Menu > Website > your site > My Pages:

  • For a new section: press Add and configure the title (for example, "Online appraisal").
  • For an existing section: press the pencil icon.

Step 3.2 — Enable HTML Mode

  1. Go to the Content Editing tab.
  2. Place the cursor where you want the form to appear (it can be after an introductory text).
  3. Press the </> button in the toolbar (last group).
  4. Confirm the warning.

Step 3.3 — Paste the form code

Paste the <iframe> you copied from Google Forms. You can combine it with text before and after:

<h2>Request a free appraisal</h2>
<p>Fill out the following form and we'll get in touch within 24 hours.</p>

<iframe src="https://docs.google.com/forms/d/e/.../viewform?embedded=true" width="100%" height="800" frameborder="0">Loading…</iframe>

<p>You can also call us at <strong>(011) 4444-5555</strong>.</p>

Step 3.4 — Save

  1. Press Save.
  2. Open your website in a new tab and verify that the form appears and works (submit a test).

Part 4 — Configure email notifications (optional)

By default, responses are saved to a Google spreadsheet. If you want to receive an email every time someone submits the form:

Step 4.1 — Enable the responses spreadsheet

  1. Go back to your form in Google Forms.
  2. Go to the Responses tab.
  3. Press the green spreadsheet icon ("View responses in Sheets").
  4. Choose Create new spreadsheet and confirm.

Step 4.2 — Enable notifications

From the responses spreadsheet:

  1. Go to Tools > Notification rules.
  2. Choose "A form is submitted" as the event.
  3. Choose "Email — right away" (or "daily digest" if you receive many responses).
  4. Press Save.

From that point on, every response will arrive at your email address registered with Google.

If you want notifications sent to multiple emails (your team, for example), add the others as editors of the spreadsheet and each one configures their own notification rule.


Common troubleshooting

ProblemLikely cause
The form doesn't appearThe <iframe> code got cut off when pasting. Go back to HTML Mode and verify it's complete, with the closing </iframe>.
The form appears but is too smallIncrease the height="..." value in the code.
It shows "Loading..." and never finishesThe form is private. In Google Forms go to Settings and allow "Anyone with the link".
Responses don't arriveVerify that you enabled the responses spreadsheet in Step 4.1.