Google Form Styler

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

❌ Before: Standard Google Form

✅ After: Styled with 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."

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.

How to create pre-filled link in GoogleForms?

Step 1: Open Google FormsStep 2: Select "Blank Form"

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".

This text will serve as placeholders in your customized form.

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

Adjust these elements to match the look and feel of your site.

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

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:

You’ve copied correct pre-filled link.
The code has been pasted correctly without any missing elements.

Feel free to reach out if you have any questions!

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