Videos

How to Add a Form to Google Sites - Tutorial for Beginners

Adding a form using Google Forms

In this video, I'm going to show you how to quickly create and add a form to your Google Site, but I'm also going to show you how to create a more impressive form that looks like this, so you can wow your visitors.

Hello, everyone. Scott Friesen here at Simpletivity helping you to get more done and enjoy less stress. And here I am within my Google Site's account, and I am setting up a website, and what do I need, is a contact form.

And of course, forms can be used in a variety of different purposes,

but let's see how easily we can add a form to our site. So in this example, I've got a special event here, and I want to find out some more information. So I would like to add a form just below these images here. Now, Google Sites makes it very, very easy.

Here, on the right hand side under our 'Insert' menu, all we need to do is scroll down

almost all the way to the bottom, and you can see that there is the 'Forms' option.

Now by selecting this, it's actually going to open up a Google Forms preview. So depending on which Google account you are using within Google Sites, you will see a full listing of any forms which you've created within Google Forms before.

Or of course, we can start from scratch. Now, if you have not yet created your form, you will need to go to Google Forms, and either you can start a form from scratch or you can use from one of their many templates to get started.

And Google Forms gives us an actual customer feedback form here, which is great. So we can, of course, adjust any of the questions, anything that we see here, a number of different templates for us to get started with. 

Now, once you're finished creating or editing an existing form, you will see it here, within Google Sites. So for example, here is that customer feedback form, which I just selected a few moments ago. But in this example, I'm actually going to come down to this CRM Intake Form.

I'm going to select it, and down below, it says,

"One has been selected." At this point, I'm going to select 'insert'. As like with other elements, the form will be inserted where the cursor or where the last attention was here, within our site.

But of course, we can click and drag this to any other section or drag it to, let's say if we want to center it here on the page, if we want to center it here on the screen. So now, in just a few clicks, we have our form ready for visitors to fill out.

Now of course, this isn't going to be visible until we hit 'Publish', so I'm going to hit 'Publish', but I want you to be wary of something. If we click on the 'Preview' button and come to this page,

Fixing common form display issues

there is that form, that looks great but wait a minute, we've got this, we've got this scroll bar to the right hand side, and if I don't touch the scroll bar, the 'Submit' button is kind of hidden down below.

This can be very off-putting and not look very professional on your site. So, how can we fix this? If we go back into the Google Site's editor, you will see that yes, that 'Submit' button is still hidden here.

All you need to do is select on the form element like you see here, and now I can click and drag, and I'm going to drag well beyond. I'm going to give it almost a good inch below the last thing that is presented here, within my form.

Now I'm going to hit 'Publish' again and let's hit that 'Preview' button. And this time, you'll see that that scroll bar is no longer apparent, and we've got nothing else that is hidden down below.

So, pay attention depending on the size or the length of your Google Form if you need to make some minor adjustments. Now, although adding a Google Form is very easy and straightforward, there can be a downside to using Google Forms.

Number one, you are very limited with the number of editable options available to you. Other than changing the background of the form, and this highlight color, and the color of the button, the layout of your form is very, very standard.

Creating better-looking forms

So how can we make something that is a little more impressive and fits better with your website? Well, I think one of the best ways to both impress your visitors, but also keep them more engaged is by creating a sliding type of form, like you see here.

So I've got a great big invitation to start on this particular form.I'm going to first, enter in my first name. I'm going to go next. Let's enter in a fake email address .com and we're going to hit 'Submit'.

And I even get a nice professional "Thank you," with this graphic here as well. So what am I using and how can you include this within your Google Site? For this purpose, I'm taking advantage of JotForm, a much more robust and powerful form builder, which is still super easy to integrate with your Google Site.

Here, within JotForm, you can create any number of different forms and know they will not look static or standard. And on top of that, you can customize it to your heart's content, whether you want to choose a preset theme, or you can customize virtually every single color element here, on the screen.

In addition, you can add payments to any of your forms and a number of advanced features, including signatures and even the ability to book an appointment. But in our example, let's keep things relatively simple.

I've got a welcome page at the beginning, I've got the thank you page which we've already seen, and here are the only two things that I'm asking for people to fill out. When I'm ready to add to my site, 6all I need to do is go to the 'Publish' area and I'm going to choose this second one, which is called 'Embed'.

Here, I'm going to select 'copy the code', it's automatically copied to my clipboard,

and then I can return to my Google Sites editor. In this example, I'd like to include this form between the RSVP button and these images down below. So no, we are not going to come down to 'Forms'. Instead, we are going to select the 'Embed' button

at the top of the 'Insert' tab. Here, I'm going to select the 'Embed code' option and I'm going to paste in the code which it gave me. I'm going to select 'Next,' and it's going to give me a preview of what that form will look like.

Now, I can select 'Insert' and there it is, exactly where I want it to be. And just like with other elements, we can move it to other parts of our page but I'm also going to choose to actually expand it out, so it actually has the width of most of this page.

It's still centered, but it's going to take up most of the width here. Now, I can hit 'Publish' and the next visitor to my website will see a much more engaging way to interact with my site.

To learn more about JotForm, go to jotform.com or click the link in the description down below so you can start creating fantastic looking forms and add them to your site in just minutes.

And if you're wanting to create a free mobile app to go along with your website, be sure to watch this video next, where I show you how to create one step by step.

Thank you so much for watching, and remember, being productive does not need to be difficult. In fact, it's very simple.

Read More
Text Link
Presentations