Up next in 10
How To Embed Google Forms on Website
542 views
Feb 19, 2024
The video "How To Embed Google Forms on Website" provides a step-by-step guide on integrating Google Forms into a website. It likely covers various methods for embedding forms, such as using the embed code provided by Google Forms, embedding via Google Sites, or utilizing website builders like WordPress or Wix. The tutorial may include demonstrations on how to access the embed code from Google Forms, customize the appearance and functionality of the embedded form, and embed it seamlessly into different types of web pages. By offering clear instructions and practical examples, the video aims to help users effectively incorporate Google Forms into their websites for collecting feedback, conducting surveys, or capturing data. Overall, it serves as a valuable resource for individuals seeking to enhance their website's interactivity and functionality with Google Forms integration.
View Video Transcript
0:00
In this video I'm going to show you how to embed a Google form into your website
0:06
So let's get straight into it. First I'll show you how to create a Google form
0:11
So to do this, just open your browser and then go to forms.gogle.com
0:19
And from here we can create a Google form. So since this is for our website, I'll create a contact form
0:27
So they have some ready made templates. If you just go to the template gallery over here
0:33
then here, you'll find all of the ready-made templates, so they have things like contact information
0:39
or customer feedback, and a lot more. But in this video, I'll show you how to create one from scratch
0:46
So I'll click on blank form that's here. And the first thing I'll do is give a heading to this form
0:53
So now I'll select the current heading and type in the title, which I want
0:58
So I'll just call it Contact Us. After that, I can add a description as well if I want
1:05
so I can just add it below over here. But now I'll show you how to start adding questions
1:12
So this box is the first question and just click on it
1:16
And now I can type in the question. So first, I'll just ask for the name
1:23
And as you can see, the type of answer which we'll get has changed to short answer
1:28
So if you just click on this box over here, then you have various options for the type of answer which you want
1:37
Since we're asking for the name, we'll just keep it on short answer. Then if you want this to be required, you can select this option
1:46
So now someone has to type in their name before submitting the firm
1:51
After that, to add another question, just click on plus, which is over here
1:56
Then next, if I want to ask for the email ID, I can just type in email
2:02
The same way it will be a short answer And let say I don want this required Then I just leave it like this and not select this box
2:14
Now I'll quickly add a couple of more questions the same way
2:19
Click on the plus button, type in the question. So this question, since we're asking for comments
2:31
As you can see, the type of answer we'll get is a paragraph
2:35
And again, you can change it based on whatever you want. After that, if you want to see how the form looks, you can click on this button on the top right
2:47
And this is a preview of your form. This is how it will look to someone who is submitting it
2:54
After this, there's one last thing left, and that's customizing the theme of this form
2:59
Since this form will be in our website, we need to customize the theme over here in order for it to suit our website
3:08
So to do this, just click on this button on the top right
3:13
And over here, you have quite a few options. First, you can change the font
3:19
So you can change it for the header, the questions, and the text
3:24
You can change the font and font size. Then you can also change the header
3:29
image. So currently there's no image over here. But let's say you want to keep some image
3:35
just click on choose image, then they have some default ones over here, or if you want to
3:42
add your own one, just click on upload, and now you can select one from your laptop. And then
3:48
the last option is colour. So you can change the colour of the form and of the background
3:55
So once this is done, our form is ready. And now what we have to
3:59
to do is copy the HTML code which we'll then have to embed into our website. So to do
4:06
this just click on send that on the top right After that select this option over here And here we get the HTML code which we need to paste in our website So before copying it you can change the height and width if you want
4:26
And after that, just click on this and click on Control C to copy it
4:32
So now the next thing we have to do is go to our website editor
4:38
So for now, I'll show you how to do this on WordPress, but for most of the site editors, it's the same
4:43
It's the same process. You just need to paste this HTML code and you'll get this firm
4:49
So now I'll show you how to add this to WordPress. I'll quickly open my site
4:55
So here I'm on my WordPress dashboard and I'll show you how to add it
5:01
So first I'll create a new page called Contact Us. So I'll click on pages that's over here
5:09
and then I'll select Add New. For now I'll just select a blank page and now I can create the page
5:18
First I'll just add a title which will be contact us and below this I want the form
5:25
So to add it I need to click on the plus button which is over here
5:30
and then just search for HTML. So you'll find this option called custom HTML so select it
5:38
and now what we have to do is paste the custom HTML. is paste the code which we copied earlier
5:44
So you won't be able to see your firm in the editor. You'll need to preview or publish your website to see it
5:51
So now I'll preview it by clicking on preview, which is over here
5:56
And this is the preview of the page. The heading Contact Us has come and below it, here's the firm
6:04
So as you can see, this is exactly what we created in Google Firms
6:08
So as you can see, this is exactly what we had created in Google Forms, but right now, there's
6:15
one problem with this. As you can see, the scroll bar is over here
6:21
And let say you want to get rid of this Then what we need to do is increase the height of the firm So we can do this by going back to the site editor So in this code you find the width and height which we had entered in Google form
6:38
So now, to get rid of the scroll bar, I need to increase this height
6:43
So I'll change it from A21 to let's say 1021. And now I'll again preview this
6:53
And now as you can see, the scroll bar has gone, and this is because we've increased the height of the form
6:59
So this is basically how to add the form. And there's only one thing left to do
7:04
That's fill it in and then check the responses. So let's quickly check if it works
7:10
I'll just fill this in. So now I'll submit this. And it's submitted
7:17
So let's go to Google Forms and see the response. So now I've come back to the Google Forms tab
7:23
and as you can see, next to responses, one is written. And if I click on it, this is the response which I just got
7:34
And over here, there are different ways to see the responses. First is a summary, then you can see question by question
7:41
and then you can see individually each response. So I'll give you a bonus tip to make it much easier to go through all of the responses
7:51
and that's linking them to a sheet. So we can do that by just clicking on this option over here
7:57
then click on Create a New spreadsheet, and you can just give a name if you want
8:03
and then click on Create. And as you can see, the response has come over here
8:11
and one cool thing is that this automatically updates. So every time someone submits the firm
8:18
you'll see the response getting added over here. So this is how it works
8:22
is how it works. And if you want to know how to share Google form responses
8:27
you can check out this video over here. And if you want to know how to create a Google site
8:33
then check out this video that's here. That's it for today. Goodbye
#Other
#Web Design & Development