[HOW TO] Add Google Forms to a website | CUSTOMISE HTML & CSS
ฝัง
- เผยแพร่เมื่อ 15 ก.ค. 2024
- GITHUB REPOS:
github.com/machieajones In this video I show you how to extract the HTML elements from a Google form and to find the hidden inputs.
If you don't know how about HTML and want to walk through the full process, watch my video here: • [How to] Customise Goo...
If you want to customise the look of your google form, watch my video here: • Google Forms Advanced ...
Let me know any other Google forms related videos you'd like me to make
🔔 Please hit subscribe if you enjoyed this video - it really supports the channel:
bit.ly/2GbNa0A
LET'S CONNECT
📸 Instagram - / _adamthedev
💼 LinkedIn - / adamthedev - แนวปฏิบัติและการใช้ชีวิต
LET'S GO! Thanks so much Adam, all of the other tutorials are out of date but you saved my day!
I've been looking for it for several hours, but after watching this video, it was resolved at once. Thank you very much. And I subscribed. :D
sooo helpful thank you!! i tried messing around with this on my own and it was so good to see someone validate the way i was starting! all the other tutorials are out of date
Oooh I love it!! Thanks Adam! 🥰
Background music , fabulous! 🤗 Thanx for your tips!
EXACTLY WHAT I NEEDED AND WAS LOOKIING FOR!!💯 Easy new SUBSCRIBER!
LEGEND!! I LOVE YOU EXACTLY WHAT I NEEDED!
Mo freaking awesome, exactly what I needed! I also like that calm background music. Now to find part two- stay on the same page, fingers crossed.
i realize it is pretty off topic but does anyone know a good place to stream new movies online ?
@@jakemaxton1714 Stremio
I've spent the last hour trying to find this info and everyone seems to assume the name field is still available in Forms. Thanks!
For anyone having trouble with redirecting to the Google form on submit. Make sure you have sure you have formResponse at end of url and not viewform
@Mirza Anas I had this same issue until I restarted everything from the scratch, then it worked.. may be I've skipped or added a character like space or something
tyyyyy
formResponce is there already but submit redirects me to the form to update instead of the submitted page..?
@@user-cy6cr8ux1q ME TOO DID YOU FIND SOLUTION
Thanks for the straight-forward tutorial!
No problem. Glad you enjoyed it!
Thank you for this! I've been trying to look for a way so that the form doesn't submit to the google forms page, but I can't find a way to do that! And unfortunately you didn't post the video on how to do it. How do you do it??
Thank you very much. So helpful!
This was very helpful 👍
Thanks a lot
Great video, thank you!
thank you so much for this!
Shout Out bro,you helped me big time
Man! SO MUCH THANKS! You're a f*** hero
DUUUUDE U R AMAZIIIIIING
Very help, subbed and liked :))
Thank you man
Great job,
Multiple pages with Sections will be awesome for your next video, my form collects data (boolean) from multiple sections with multiple checkboxes 😜😂
you great man
How would you do this for date? I can see when I inspect the page, date is separated in 3 inputs but in HTML you only have 1.
Still waiting for the video on how to stay on the same page.😁
I think it would be nice if you could also show how to host this custom form in your next video 😁✌️
Also, is it possible to host the same in Google drive
I will subscribe for this
awesome
Hi, is it possible to customize google forms, that have multiple pages/sections?
Thank you so much. It worked for me
how?
@dev101 hello nice videos, I'm trying to do this but the different is I have like 5 page breaks, which means like multi pages on google form would this also affect the code??? if not I have a issue with the drop down , always I keep getting a "this question has changed. please review your your responds" error
it is awesome thanks for all.. 4:33 i couldn't find your video for 'stay on same page' feature. if you can please let me know. thanks again :)
Thanks for the informative video Adam. Could you please suggest if there is a way to remove all the google branding at the bottom of the page. I have embedded the form using on my website.
1:55 Thank you very much! That was my problem indeed!
No problem! Glad it helped
For the radio buttons and the dropdown menu
It is not taking the input from the html, after pressing submit,google form opens up, and shows that those two sections, the radio and the dropdown, nothing has been inputted from the user on the html page and appears blank'
Can you helpp me with this ??
Thank for this good jobs have form githup url thanks
How do we find the name input for the dropdown options now? I think coding has changed since this video. Could there be an updated video?
great video again about this solution. You sad try doing a video about the stay submit page on the same page of the site. You do this video? I question because I can't find it in your list channel.
Nice, Thanks for the tutorial. How about search, edit, update ,delete ? possible to do that also?
This really helps me, but another thing, upon submission how do we redirect our form to another link?
Thanks for tutorial
Lucas Akmeida no worries man!
This is a great video. Could you guide me on how I could show a custom html page as output, once an embedded google form (google form embedded into HTML) is submitted?
@@allsafeacademy Do share.
Hey when will u show staying on same page ? been waiting
its really very informative i tried this and found useful but after we submit the data last page of google form is appear on page with submit another responce if user click that it reach to google form , how to return on our own page after submation of form
I'm new to HTML and CSS. I would like to use the linear scale that google forms but I can't figure out how to get it displayed. Please help!
Nice work dude 👍
Thank you!
adamthedev my pleasure 😊
Hi, Can you make a video for date fields and filesupload?
Thank you , very informative. But if we have validated a field in google forms it switched automatically from the html into the google form, how can we avoid it please? thank you in advance.
I tried this with custom JS function, using fetch and I'm getting CORS errors: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. I tried with mode: 'no-cors' and it works fine but then I'm not able to track if the API actually worked or gave an error which is expected behaviour. Can you suggest something here?
Please make a video for staying in the same page while submit
thank you sir
please I would like to know how to stay on the same page after clicking submit
Thanks for the vid bro.
How to stay on same page after submitting?
Hi! Thanks for your great tutorial.- Is there a way to hide/change the default Google Forms "success" message? I run the form in an and fully styled by CSS. But all for nothing when I see this horrible confirmation message that Google redirects to, after the form is submitted! =(
Thank you sir
Sir I have a problem
How I use "upload file " link from google form to my html form
Please guide me.
🙏🙏🙏
Hey Adam:) thanks for this tutorial. I have a question for you:) Are u planing to do this video about staying on the same site after submit which you mention at the end? Anyways thank you a lot for this tutorial!
You got any idea how to do that?
@@tejassrivastava6971 Hey i dont remember solution for this specific problem. But for basic contact form you can use sheet.best API and create similar solution presented in video but witout nessecity of using google form API which means you have more control over your code.
Yeah, I'm looking for it too. How can I stay in the same page after submitting? *insert little scream*
@@linocruz6277 Hey Lino put prevent default event handler at the begging of sendMeil logic method
Please make a video on how to keep the viewer stay in the same form and how to make the viewer redirect to another url thank you @adamthedev
Hello, did you have an answer yet?
How to also link this button to a direct download link i.e. clicking on the submit button not only submits the form but also redirects to a direct download link starting the download
How do I make uploading pictures work?
Thank you so much for your videos! This has been a really cool way to add simple forms for personal projects.
Any thoughts on working with a file upload bit? I've been digging around in Google's code but haven't found a great solution yet.
Hi Samantha, thanks for your comment! I haven’t actually implemented a file upload myself, but I’ll have a look later to see if I can find a way of doing it 👍. Please let me know if you do find a way 😀
@@adamthedev Hi Adam! thank you so much for your content. did you finally manage the way to upload files using the form and the HTML? I can find the name of the tag "name" using your example, but then my html doesnt work when I click submit (after selected the file). Any idea? thanks!
I did the same. But I want to redirect users to another webpage on my server upon clicking the submit button. I have tried multiple solutions from the internet but no success. Can you help me out?
Great but can we add images using upload file option to spreadsheet
This tutorial was awesome, thanks for the tip. Did you find a way to redirect to another page after submit? You said you would opload that video...
Solved, thanks anyway!!
www.developerdrive.com/add-google-forms-static-site/
@@fedegilles5227 Thank you very much for the advice, just what I was looking for.
Please post advance JavaScript to manipulate google forms like account loging required , edit posted things in customized HTML page in same page without knowing other that they have posted in Google forms
Hello! How can I take the file upload input from a google form and place it in an html form? ... thanks for your help
I'm struggling with the same now.. does anyone have a solution? it seems that type="file" is not redirecting the uploaded image to the google forms..
How do you make it mobile friendly?
Hi dev!
thank you or this method ,it's working perfecty
I have a quetion plese!
how can I disble redirection to google form page?
how did you get it to work
How to customize the screen after the email is sent?
Hi Adam, I tried to integrate google forms to my test website(template from bootstrap), the details are entered but the return status is showing as failed and it is rendering as error on my page. How to fetch/show the status correctly.
Hi Uday. Feel free to send me an email with a link to your page and I’ll have a look tomorrow adam@adamthedev.com
please make video that the form stay on the same page after submitting
can make a video when submit will go to other thank you page instead of the google submited form
See this for more reference
HTML Form to Google Sheets: Custom Online Form with Google Apps Script
th-cam.com/video/AGPFsvKzXm0/w-d-xo.html
I can't find any remember in the google form, please someone help me
how to disbale copy paste in google form
or how to get google form html code
Put the disable right click script inside the
How to stay on same page?
How do I show a custom html page after submit?
Did you get or find any answer?
I get a 403 error on the submission
Sir, your linkedin page is not working !
name attribute is missing in google form input element....pls help me
Checked pinned comment/my new videos
How to link file upload
:👏 :👏 :👏 :👏
bro, I can't find the HTML form in my application . I use Chrome browser. pls help me 🙏
Hey, man. Have you opened the developer tools so you can inspect the code and then searched CMD+F for:
Dont appear bro
@@adamthedev yes I did. It's solved bro😁 I use search function in developer mode 😂 thanks so much 👍
Thanks for this!
Is there a way to add copies of form field groups dynamically and, via a custom submit action, create multiple rows with each row holding the field data from each group?
For example, if I have a field group with date, value1, value2 and a plus button to add copies of that field group ad hoc, can I get the date and field babies of each group into separate rows in the sheet?
the google form html is not the same now
need an updated version of this video
How to add a paid google form into my website
Does this work in 2024?
Yes
2022 this form is not working
Code for the no redirect:
document.addEventListener("DOMContentLoaded",
function()
{
const form = document.querySelector(".form-container form");
const thankYouMessage = document.getElementById("thankYouMessage");
form.addEventListener("submit", function(event)
{
event.preventDefault();
// Create a FormData object from the form
const formData = new FormData(form);
fetch(form.action,
{
method: 'POST',
body: formData,
mode: 'no-cors' // This is necessary because Google Forms does not return proper CORS headers for the AJAX request
})
.then(response =>
{
console.log('Form submitted successfully', response);
// Clear the form after successful submission
form.reset();
thankYouMessage.style.display = 'block';
})
.catch(error =>
{
console.error('Error submitting form:', error, error.message);
});
});
});
You need to make sure that CORS is turned off when we make our post in our ajax code. this will not allow you to be able to play with the response however but for this use case that data is being stored and handled by google
it works, thanks.