Embedded Files
W I D G E T ย T U T O R I A L S
Google Form Styler PRO
How to Create a Customized Contact Form with Google Forms and Embed It in Google Sites
In this tutorial, you'll learn how to create a customized contact form using Google Forms and embed it in your Google Site. This form will help you collect essential information from your visitors, such as their email, name, and message, in a visually appealing way.
Step 3: Create fields for Email, Name, and Message by selecting the Short Answer option for each.
๐ก IMPORTANT: The Form Styler works only with Short Answer fields. It does not support styling for multiple choice, checkboxes, dropdowns, file uploads, date, or time fields. We explored options to include these, but due to Google Formsโ limitations, it isnโt possible.
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".
๐ก Important: For placeholders, make sure the text includes the word "Email" to create the email input box. For bigger text boxes, use the word "Message" in the placeholder. For name fields, you can use "Name" or any other text you like. You can add multiple fields by following these simple guidelines.
Here are some examples to help you get started:
Email field placeholders:
Email
Your Email
Contact Email
Your Best Email
Name field placeholders:
Name
Full Name
Your Name
Message field placeholders (big box):
Message
Your Message
Write your message here
Feel free to mix and match these or create your own placeholders using the same pattern!
Extra fields: You can add multiple Short Answer fields in your form. Here are some common placeholders people usually include:
Phone Number
Company Name
Subject
Address
Website
Job Title
Just remember to use clear placeholder text so users know exactly what info to enter!
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.
Step 7:ย Go to Google Form Styler PRO
- Open form styler
- Paste the copied link into the provided field and click "Generate Code" (this will show a form on the left side of the customizer).
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 the pre-built form is located.
- Click the pencil icon or double-click the the form to open code editor.
Replace the existing demo code with the newly generated code from the customizer.
Click "Next" and then "Save".
New customized form is now on your website
Step 11: Preview the Form in Mobile ViewWhile in the editor, check the mobile preview to ensure the form looks good on smaller screens.
If part of the form is cut off, like this...
.. go back to the editor and adjust frame dimensions.
Step 12: 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 the correct link.
- The code has been pasted correctly without any missing elements.
Here's what you can do with the Google Form Styler Pro
- Input Field Customization:
- Border Thickness: You can modify the thickness of the border surrounding the input fields, giving them a more prominent or subtle appearance.
- Background: Customize the background color of the input fields to match your design preferences.
- Radius: Change the corner radius of the input fields, making them more square or rounded depending on the style you want.
- Text Color and Size: Adjust the color and size of the text inside the input fields, improving readability and matching your brand's style.
- Button Customization:
- Button Text: You can change the label text of the submit button to something more personalized, like "Send Message."
- Text Size and Color: Modify the size and color of the button text to fit your design aesthetic.
- Button Radius: Adjust the corner radius of the button to create different shapes (rounded or square).
- Button Color: Change the color of the button to match your form's overall design or branding.
- Code Generation:
- Once youโve finished styling your form, you can click "Generate Code" to produce the necessary HTML/CSS code that you can copy and use in your Google Site or other platforms. This makes it easy to embed a customized form into your website.
- Once youโve finished styling your form, you can click "Generate Code" to produce the necessary HTML/CSS code that you can copy and use in your Google Site or other platforms. This makes it easy to embed a customized form into your website.
COMMENTS
Have questions about the Google Form Styler PRO or want to showcase your creativity? Join the discussion in the Google Sites Ninja Club Reddit Community! Our ninjas are ready to help.๐ Ask Questions or Share Your Work on RedditGoogle Sites
Report abuse