Embedded Files
๐ฅณ SitesBuddy v4 is live! Website is currently being updated to match the new workspace. Recent videos are available on Reddit group.
With Form Styler you can transform standard Google Forms into beautifully styled forms that can be embedded in Google Sites.ย
See the Transformation
From basic Google Forms to custom contact forms that match your website style on Google Sites
by SitesBuddy
W
When it comes to adding a simple contact form to a website, Google Forms has always been my go-to.
Theyโre free, theyโre reliable, and compared to using WordPress forms (where spambots somehow always found a way to flood my inbox), Google Forms just work. No drama.But if youโve been following along, you already know how I think:
Speed and simplicity are everything.
And... they also need to look good.One day, a client told me straight up:โI love the Google form, but it doesn't match websites style.โSo I did what I always do.I started digging into tutorials. Trying to figure out how to style Google Forms with custom CSS. And yep, you can do it... but itโs a mess.You need to manually tweak code forย borders, colors, placeholders, buttons, fonts, and every time you want a small change, itโs back into the code jungle.It wasnโt sustainable. Not for me, and definitely not for clients who just wanted something simple.So I built the Google Form Styler inside SitesBuddy.
Now, I can visually customize the look of the form - borders, colors, button text - without touching a single line of code.Just click, style, copy, paste into Google Sites. Done.It saves me a ton of time.
It keeps my workflow smooth.
And it means no more telling clients, "Well, itโs a Google Form... it just looks like that."
SHARE
How to style GoogleForm with SitesBuddy
Transform your forms in 3 simple steps- Paste Your Form's Pre-filled Link
Copy your Google Form's pre-filled link and paste it into the Form Styler widget in your SitesBuddy extension. (see below to learn how to get pre-filled link) - Customize Your Style
Use the visual editor to adjust colors, borders, fonts, and button styling. You'll see your changes in real-time. - Copy & Embed
Click "Copy Code" and paste the generated HTML into your Google Sites page. Your beautiful form is ready! - Adjust the frame
Resize the embed frame in Google Sites to fit your layout - the widget will automatically adjust to the frame size and is fully responsive on all devices.
After confirming everything looks good, click โPublishโ to make your form live.
Final Step: Test the Form
- Go to your live website and test the form.
- Verify that you receive the responses in Google Forms.
Step 3: Create fields for Email, Name, and Message by selecting the Short Answer option for each.
Note: FormStyler only works with "short answear" option. I doesn't work with other option like multiple choice, checkboxes, dropdowns, file upload, date, time, etc.
Step 4:ย Get a Pre-Filled Link:
- Click on the three dots (โฎ) in the upper-right corner of the Google Forms editor.
- Select โGet pre-filled linkโ from the dropdown menu.
Step 5:ย Add Placeholder Text:A new form will open where you can add pre-filled information.
- For the email field, type "Your Email".
- For the name field, type "Your Name".
- For the message field, type "Your Message".
Step 6:ย Get the Pre-Filled Link:
- After entering the placeholder text, click the "Get Link" button.
- A small window will pop up in the bottom left of your screen. Click โCopy Linkโ to copy the pre-filled form URL to your clipboard.
Add pre-filled link to form styler - and customize Google Form
Step 7:ย Open Google Form Styler in SitesBuddy
- Paste the copied prefilled-link into the provided field and click "Create Form" (this will show your new form).
Step 8: Customize Your FormUse the customization options to modify the formโs:
- Borders
- Colors
- Button styles
- Text sizes
Step 9: Copy the Customized Code:Once you're satisfied with the appearance, click "Copy Code" to copy new form design to your clipboard.
Step 10: Add form to your google site
- Open your Google Sites project.
- Navigate to the page where where you want to add contact form
- Insert contact form via embed tool
- Adjust the frame
Resize the embed frame in Google Sites to fit your layout - the widget will automatically adjust to the frame size and is fully responsive on all devices.
Step 11: Publish Your SiteAfter confirming everything looks good, click โPublishโ to make your form live.
Final Step: Test the Form
Final Step: Test the Form
- Go to your live website and test the form.
- Verify that you receive the responses in Google Forms.
Troubleshooting:
If you encounter any issues, ensure that:
If you encounter any issues, ensure that:
- Youโve copied correct pre-filled link.
- The code has been pasted correctly without any missing elements.
Great for
๐ Contact forms๐ฉ Newsletter signups
๐ Appointment or inquiry forms
๐ Course applications or waitlists
๐ Feedback forms
๐ฆ Product pre-orders or quote requests
๐งช RSVP forms for events or launches
๐ฏ Lead generation forms
๐ค Designers & freelancers building for clients
๐ Anyone who wants to style a basic Google Form - without touching code
SHARE
Google Sites
Report abuse