Google Forms are a helpful tool to gather data for event RSVPs, quizzes, sign ups and much more. In this tutorial, we’ll show you how to customize and style an embedded Google Form in your Hatch page. If you want to start from scratch, you can follow the directions immediately below. Alternatively, to get a head start on style and customization, read on for our walkthrough of our remixed Invitation Template.
How to embed a Google Form into a Hatch webpage
- Create a Google Form here docs.google.com/forms
- Click “Send” at the top of your form
- In the Google Send Form dialog you’ll see “send via” options. Select < >
- Click Copy to copy the “Embed HTML” code
- Close the “Send form” dialog… you’re done with that now.
- Open the Hatch page you want to add the form to
- On the left sidebar (on desktop) click on Elements
- Under Elements select “easy embed”
- Paste in the copied Google Form code
- Click the “embed now” button
- Resize the ‘easy embed’ element to get rid of scroll bars
- To see the results from your form, return to the form in Google and view “Responses”
How make an invitation with a Google Form
Using our Invitation Template shown below, we’ll walk you through how to customize the elements and then embed your own form. This template is a great start for collecting RSVPs or building an email list. Here, we’ll be remixing our party invitation into dinner reservations for a grand opening at a restaurant.
Understanding the objects in the project
To start our customization, we’ll first remove the confetti elements on the top of the project so we can better understand what’s underneath. If you’re loving the confetti, you can set one element aside in the corner of the project and duplicate it later. Click on the confetti objects to delete them one at a time, or select them from the object tree and delete them from there. You can access the object tree by clicking on the objects button at the bottom of the left-hand bar. This handy menu lets you see all the elements in your page and select any one of them.
The object named “rsvp” is actually a page of your project and contains the page’s overall settings. Select the object and you can access these settings by clicking on the right sidebar. The screenshot below shows the menu where you can modify the background.
The invitation currently has a video of a spinning disco ball as a background. While that may be great for a party, we’ll want to replace that video for our event. Hit “replace video” (as shown above) to change the video to something more fitting. Put some relevant keywords in the field at the top and you can find great videos from Pexels and Unsplash.
Replacing an embedded Google form
The core of this project is the form we use to gather information for our event. In our object tree, you can see embed1 listed, which is our form. Just like we did with the main page element, we’re going to select the Form object and access the options from the right sidebar.
Click on “replace embedded content” and a text box will come up. In here you’ll replace the form link we are using in the template with your own form link. See the instructions above for more info on finding that embed link. Pay special attention to the ‘width’ and ‘height’ numbers inside your link. You can change those to resize the element in the page.
Click “embed now” and your form should be correctly displayed on the page. If there are unwanted scroll bars, you can resize the embed element so they disappear.
Editing the text typewriter
To change the message at the top, select the element. Edit the text in the right sidebar. You can also change the speed of the text with the slider under the text input. Moving the slider to the right makes the letters display faster and left is slower.
Add stickers, animations and photos
All that’s left now is to add some flair! Using the left sidebar you can add effects, stickers, photos and more. You can also import your own assets to add wherever you like. If you’re curious how our own embedded Google form turned out for our restaurant opening, check it out here!
