Skip to main content
This wedding template uses Google Forms for guest RSVPs and contact collection. Learn how to create and customize forms for your website.

​
Why Google Forms?

Free & Easy

No cost, no setup complexity

Automatic Collection

Responses saved to Google Sheets

Customizable

Add any questions you need

​
Current Implementation

The template includes a Google Form embedded in the RSVP page (confirm_attendance.html): 
<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>
</section>
The template uses an iframe to embed the form directly into your wedding website, providing a seamless experience for guests.

​
Creating Your Google Form

1

Go to Google Forms

Navigate to forms.google.com and sign in with your Google account
2

Create a Blank Form

Click the + Blank button to start a new form
3

Add Form Title and Description

Title: Wedding RSVP - [Your Names]
Description: Please confirm your attendance for our wedding celebration
4

Add Your Questions

Click + to add questions. See recommended questions below.
5

Customize Theme

Click the palette icon to match your wedding colors
Here are essential questions to include in your RSVP form:

​
Basic Information

Question Type: Short answer (Required)
Question: Full Name(s)

Question Type: Short answer (Required)
Question: Email Address

Question Type: Short answer
Question: Phone Number

​
Additional Information

Question Type: Paragraph
Question: Dietary Restrictions or Allergies
Description: Please let us know if you have any dietary requirements

Question Type: Multiple choice
Question: Will you need transportation from the hotel?
Options:
○ Yes
○ No

Question Type: Paragraph
Question: Song Requests
Description: Any songs you'd like to hear at the reception?

Question Type: Paragraph
Question: Special Accommodations
Description: Is there anything we can do to make your visit more comfortable?
Make only essential questions required. Keep optional fields for additional information to avoid overwhelming guests.

​
Getting the Embed Code

Once your form is ready, get the embed code to add to your website:
1

Open Your Form

In Google Forms, open the form you created
2

Click Send

Click the Send button in the top right corner
3

Select Embed Option

Click the < > (embed HTML) icon in the send dialog
4

Customize Size

Adjust the width and height values:
Width: 100%
Height: 1100 (or adjust based on form length)
5

Copy the Code

Click Copy to get the iframe embed code

​
Embedding Your Form

Replace the existing form in pages/confirm_attendance.html: 
<!DOCTYPE HTML>
<html>
  <head>
    <title>Your Names - RSVP</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" />
  </head>
  <body class="is-preload">
    <div id="page-wrapper">
      
      <!-- Navigation header goes here -->
      
      <article id="main">
        <header>
          <h2>Confirm Attendance / RSVP</h2>
          <p>
            Please complete the form below to confirm your attendance 
            for all or specific events
          </p>
        </header>
        
        <section class="wrapper style5">
          <div class="inner">
            <section id="Confirm Attendance">
              <h2>We can't wait to see you!</h2>
              <p>
                <blockquote>
                  This form helps us arrange food, beverages, and services 
                  for all events.
                </blockquote>
                
                <!-- PASTE YOUR GOOGLE FORM EMBED CODE HERE -->
                <iframe 
                  src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true" 
                  width="100%" 
                  height="1100" 
                  frameborder="0" 
                  marginheight="0" 
                  marginwidth="0">
                  Loading…
                </iframe>
                
              </p>
            </section>
          </div>
        </section>
      </article>
      
      <!-- Footer goes here -->
      
    </div>
  </body>
</html>
Replace YOUR_FORM_ID with your actual Google Form embed code. Test the form after embedding to ensure it works correctly.

​
Adjusting Form Height

The iframe height may need adjustment based on your form length: 
<!-- Short form (3-5 questions) -->
<iframe height="800" ...></iframe>

<!-- Medium form (6-10 questions) -->
<iframe height="1100" ...></iframe>

<!-- Long form (10+ questions) -->
<iframe height="1500" ...></iframe>
Test your form on mobile devices to ensure the height is appropriate and guests don’t need excessive scrolling.

​
Viewing Form Responses

1

Open Your Form

Go to forms.google.com and select your form
2

Click Responses Tab

View all submissions in the Responses tab
3

Create Spreadsheet

Click the Google Sheets icon to create a connected spreadsheet:
  • Automatic updates when guests submit
  • Easy sorting and filtering
  • Export to CSV for other tools
4

Set Up Notifications

Click the three dots menu > Get email notifications to receive alerts for new responses

​
Multiple Forms Setup

You may want separate forms for different purposes:

RSVP Form

Main attendance confirmation

Travel Assistance

For guests needing accommodation help

Performance Sign-up

For guests wanting to perform at events

Contact Form

General inquiries and questions

​
Adding a Travel Form

Create a second form for travel assistance and embed it in travel_and_accommodation.html: 
<section class="wrapper style5">
  <div class="inner">
    <h2>Need Help with Travel?</h2>
    <p>
      Fill out this form and we'll help you find the best 
      accommodation and travel options.
    </p>
    
    <iframe 
      src="https://docs.google.com/forms/d/e/YOUR_TRAVEL_FORM_ID/viewform?embedded=true" 
      width="100%" 
      height="900" 
      frameborder="0">
      Loading…
    </iframe>
  </div>
</section>

​
Form Styling Tips

​
Matching Your Wedding Theme

In Google Forms settings:
1

Choose Theme Color

Click the palette icon and select a color matching your wedding palette
2

Add Header Image

Add a banner image at the top of your form (recommended size: 1600x400px)
3

Select Font Style

Choose a font that complements your website typography

​
Custom Confirmation Message

Set a custom message after form submission:
1

Go to Settings

Click the gear icon in your form
2

Edit Confirmation Message

Under Presentation, customize the message:
Thank you for your RSVP! We're so excited to celebrate with you.
You'll receive a confirmation email shortly.
3

Add Link to Site

Include a link back to your main site:
Return to our website: https://your-wedding-site.com

​
Testing Your Forms

1

Submit Test Response

Fill out the form yourself to test all questions
2

Check Response Collection

Verify responses appear in Google Forms and Sheets
3

Test on Mobile

Open the form on a phone to ensure mobile responsiveness
4

Verify Email Notifications

Confirm you receive notification emails for new submissions
5

Delete Test Data

Remove test responses before going live
Always test your embedded forms across different browsers (Chrome, Safari, Firefox) to ensure compatibility.

​
Privacy and Settings

​
Restricting Responses

Settings > Responses:
☐ Collect email addresses (optional)
☐ Limit to 1 response (prevents duplicate RSVPs)
☐ Allow response editing (lets guests update their RSVP)

​
Closing the Form

Once your RSVP deadline passes:
1

Open Form Settings

Click the gear icon in your form
2

Stop Accepting Responses

Toggle off Accepting responses
3

Add Closure Message

Set a message: “RSVP deadline has passed. Please contact us directly.”

​
Troubleshooting

​
Form Not Displaying

  • Ensure you copied the complete iframe code
  • Verify the form URL is correct
  • Check for any missing quote marks or brackets

​
Form Showing Scrollbars

Increase the iframe height: 
<iframe height="1500" ...></iframe>
Or use responsive sizing: 
<iframe style="min-height: 1100px; height: 100vh;" ...></iframe>
Ensure your form is set to “Anyone with the link” can respond, otherwise guests may encounter permission errors.

​
Next Steps

Countdown Timer

Set up your wedding countdown

Deploy Your Site

Publish your website online

Build docs developers (and LLMs) love

Get started for freeTalk to us