Skip to main content

​
Overview

The wedding website template uses embedded Google Forms for collecting guest information, RSVPs, and other data. This approach provides a simple, reliable way to gather responses without backend infrastructure.

​
Why Google Forms?

Google Forms is the recommended solution because:
  • No server-side code required
  • Automatic data collection in Google Sheets
  • Free and reliable
  • Easy to customize form fields
  • Mobile-friendly
  • Automatic email notifications available

​
Basic Form Page Structure

Form pages follow the inner page structure with an embedded iframe: 
<!DOCTYPE HTML>
<html>
  <head>
    <title>Confirm Attendance - Ankita & Anil</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="../assets/css/main.css" />
    <noscript><link rel="stylesheet" href="../assets/css/noscript.css" /></noscript>
  </head>
  <body class="is-preload">
    <div id="page-wrapper">
      <header id="header">
        <!-- Header content -->
      </header>

      <article id="main">
        <header>
          <h2>Confirm Attendance / RSVP</h2>
          <p>Please complete the form below to confirm your attendance</p>
        </header>
        
        <section class="wrapper style5">
          <div class="inner">
            <section id="Confirm Attendance">
              <h2>We can't wait to meet you !</h2>
              <p>
                <blockquote>
                  This form is to help us get a head count to arrange for food,
                  beverages and other services for all events.
                </blockquote>
                <iframe 
                  src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true" 
                  width="100%" 
                  height="1100" 
                  frameborder="0" 
                  marginheight="0" 
                  marginwidth="0">Loading…</iframe>
              </p>
            </section>
          </div>
        </section>
      </article>

      <footer id="footer">
        <!-- Footer content -->
      </footer>
    </div>

    <!-- Scripts -->
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/main.js"></script>
  </body>
</html>

​
Google Form Embed Code

The key component is the iframe element: 
<iframe 
  src="https://docs.google.com/forms/d/e/1FAIpQLSeWuYI3M7yymeYlfO38AJlt_fPu1Y26_VlHixqq3D_PmJt73g/viewform?embedded=true" 
  width="100%" 
  height="1100" 
  frameborder="0" 
  marginheight="0" 
  marginwidth="0">
  Loading…
</iframe>
The width="100%" ensures the form is responsive, while the height should be adjusted based on your form’s length.

​
Creating a Google Form

1

Create the Form

Go to Google Forms and create a new form with your questions.
2

Get Embed Code

Click the “Send” button in the top right, then click the <> (embed) icon.
3

Copy the URL

Copy the URL from the iframe src attribute - it should look like: https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true
4

Paste into Template

Replace the src URL in your HTML file with your form’s URL.
5

Adjust Height

Modify the height attribute based on your form length. Test on different devices to ensure the full form is visible.

​
Common Form Types

Example from the template:
<section id="Confirm Attendance">
  <h2>We can't wait to meet you !</h2>
  <p>
    <blockquote>
      This form is to help us get a head count to arrange for food,
      beverages and other services for all events.
    </blockquote>
    <iframe 
      src="https://docs.google.com/forms/d/e/1FAIpQLSeWuYI3M7yymeYlfO38AJlt_fPu1Y26_VlHixqq3D_PmJt73g/viewform?embedded=true" 
      width="100%" 
      height="1100" 
      frameborder="0" 
      marginheight="0" 
      marginwidth="0">
      Loading…
    </iframe>
  </p>
  <h3>
    <a href="schedule.html#Sign Up Sheet">
      <i><u>Click here to take me to Sangeeth performance sign up sheet</u></i>
    </a>
  </h3>
</section>
Recommended fields for RSVP:
  • Full Name (required)
  • Email Address (required)
  • Phone Number
  • Number of Guests
  • Dietary Restrictions
  • Event Selection (checkboxes for multiple events)
  • Special Requests (text area)
Example from the template:
<section id="Accommodation Form">
  <h2>Accommodation</h2>
  <p>
    Please fill the form below if you are traveling from out of station and need 
    accommodation to attend the event. We will provide transportation from our 
    designated hotel to the event venue.
  </p>
</section>
<section>
  <iframe 
    src="https://docs.google.com/forms/d/e/1FAIpQLSfHo33Wvl3aUGwHpALwBMv-2FQtz8pfqKTM3mQQxde4rIBCAA/viewform?embedded=true" 
    width="100%" 
    height="1200" 
    frameborder="0" 
    marginheight="0" 
    marginwidth="0">
    Loading…
  </iframe>
</section>
Recommended fields for accommodation:
  • Full Name
  • Contact Information
  • Check-in Date
  • Check-out Date
  • Number of Rooms Needed
  • Room Type Preference
  • Additional Notes
Example from the template:
<section id="Sign Up Sheet">
  <iframe 
    src="https://docs.google.com/forms/d/e/1FAIpQLSdJRVxNuTZfM4H4dmZJoqBzhPeITyZvWV-7vXJyFcYKso_N3g/viewform?embedded=true" 
    width="100%" 
    height="1400" 
    frameborder="0" 
    marginheight="0" 
    marginwidth="0">
    Loading…
  </iframe>
</section>
Recommended fields:
  • Performer Name(s)
  • Group or Solo Performance
  • Song/Dance Selection
  • Performance Duration
  • Special Requirements (music, props, etc.)
  • Contact Information

​
Linking to Form Sections

You can link directly to a specific form section using anchor tags: 
<!-- In a button or link -->
<a href="pages/confirm_attendance.html#Confirm Attendance" class="button primary fit">
  Confirm Attendance / RSVP
</a>

<!-- Or within text -->
<a href="pages/travel_and_accommodation.html#Accommodation Form" class="button primary fit">
  Take me to the form !
</a>
Make sure the section ID in your HTML matches the hash in your link. IDs are case-sensitive and can include spaces.

​
Form Height Guidelines

<iframe height="800" ...></iframe>
If the height is too short, users will see a scrollbar within the iframe. Test your forms on mobile devices to ensure they’re fully visible and usable.

​
Page Structure Best Practices

​
Single Form Page

For pages with just one form: 
<article id="main">
  <header>
    <h2>Page Title</h2>
    <p>Brief description of the form's purpose</p>
  </header>
  
  <section class="wrapper style5">
    <div class="inner">
      <section id="Form Section">
        <h2>Form Heading</h2>
        <p>
          <blockquote>Additional context or instructions</blockquote>
          <iframe src="...">Loading…</iframe>
        </p>
      </section>
    </div>
  </section>
</article>

​
Multiple Form Page

For pages with multiple forms (like the travel page): 
<article id="main">
  <header>
    <h2>Travel and Accommodation</h2>
    <p>One stop shop to make your attendance a breeze</p>
  </header>
  
  <section class="wrapper style5">
    <div class="inner">
      <section id="Accommodation Form">
        <h2>Accommodation</h2>
        <p>Form description...</p>
      </section>
      
      <section>
        <iframe src="...">Loading…</iframe>
      </section>
      
      <hr />
      
      <section id="Tips">
        <h2>Travel Tips</h2>
        <!-- Additional content -->
      </section>
    </div>
  </section>
</article>
Use <hr /> tags to visually separate different sections on pages with multiple forms or content blocks.

​
Collecting Form Responses

1

View Responses

Open your Google Form and click the “Responses” tab to see all submissions.
2

Link to Sheets

Click the green Sheets icon to create a Google Sheet with all responses. This updates automatically as new responses come in.
3

Set Up Notifications

In your form settings, enable email notifications to get alerts when someone submits a response.
4

Export Data

From Google Sheets, you can export response data to Excel or CSV for further analysis.

​
Troubleshooting

Possible causes:
  • Incorrect embed URL
  • Form sharing settings are too restrictive
  • Form has been deleted or moved
Solutions:
  • Verify the form URL is correct and includes /viewform?embedded=true
  • Check form settings to ensure “Anyone can respond” is enabled
  • Test the form URL in a new browser tab
Problem: The form is cut off or shows double scrollbars.Solutions:
  • Increase the iframe height
  • Ensure width="100%" is set
  • Test on mobile devices and adjust height accordingly
  • Consider splitting very long forms into multiple shorter forms
Problem: The form doesn’t match the site design.Note: Google Forms have limited styling options when embedded. You can:
  • Customize the form theme colors in Google Forms to match your site
  • Use the “palette” icon in the form editor to change colors
  • Add custom CSS around the iframe (not within it)

​
Alternative: Custom HTML Forms

If you need more design control, you can create custom HTML forms: 
<form method="post" action="#">
  <div class="row gtr-uniform">
    <div class="col-6 col-12-xsmall">
      <input type="text" name="name" id="name" placeholder="Name" />
    </div>
    <div class="col-6 col-12-xsmall">
      <input type="email" name="email" id="email" placeholder="Email" />
    </div>
    <div class="col-12">
      <select name="category" id="category">
        <option value="">- Event Selection -</option>
        <option value="1">Sangeet</option>
        <option value="2">Wedding</option>
        <option value="3">Reception</option>
      </select>
    </div>
    <div class="col-12">
      <textarea name="message" id="message" placeholder="Special requests" rows="6"></textarea>
    </div>
    <div class="col-12">
      <ul class="actions">
        <li><input type="submit" value="Send Message" class="primary" /></li>
        <li><input type="reset" value="Reset" /></li>
      </ul>
    </div>
  </div>
</form>
Custom HTML forms require backend processing to handle submissions. You’ll need to set up a form handler service (like Formspree, Basin, or your own server-side script) for the action attribute.

​
Best Practices

Keep It Simple

Only ask for essential information. Long forms lead to lower completion rates.

Clear Instructions

Provide context about why you’re collecting information and how it will be used.

Mobile Testing

Always test forms on mobile devices. Most guests will RSVP from their phones.

Confirmation Message

Set up automatic confirmation emails in Google Forms to acknowledge submissions.

​
Next Steps

Navigation Menu

Add form pages to your navigation

Event Cards

Link to forms from event spotlights

Content Guide

Learn how to write effective form descriptions

Build docs developers (and LLMs) love

Get started for freeTalk to us