This was perfect! I just used your form and tweaked it to match my websites style. Thanks a lot! I'm surprised there aren't more tools out there to help simplify customizing Google Forms.
This video has clearly communicated how to view the source code and how to make particular changes to a google form. What is the next step? How does one edit this code in Google Forms? Please be encouraged and not offended. You are one of the few people truly interested in forms. Include the next step in the process and keep it up:)
Annette Hickman Thanks Annette! I would be happy to record a follow up video explaining the next steps more in-depth. I will be sure to let you know as soon as it's available. I appreciate the feedback!
Thank you, this was very helpful! The only thing i would like to know is if there is a way to use radio-buttons instead of text? EDIT: I found it, it was pretty simple. if someone wants to know here is how i did it: just kept it as text in google sheets and changed
+Sam van Berlo Awesome work, Sam! I didn't know how to do that, so thank you for sharing with everyone. That will come in handy in the future I'm sure.
This is really nice, I spended alot of time in customizing google form CSS, but with no luck. I was about to start with Gooogle App and found your video. You saved me aton of time. Thank you. :) this is simple and helpful, appreciate your help.
I managed to save the xml file but it will not show up the css part . just showing up the fields excepts those, and also i entered the css in the wordpress and shows up the red part, but it is not functional yet. .and also i'm looking for other fields like dropdown and choice of fields example so that i can create more fields accordingly, like date range, and date calendar that shows up etc, hope you can help us more on that thank you.!
Thanks! Two questions... 1. Since the custom web page isn't hosted on www.google.com, when you hit SUBMIT, would it work for users who are not authenticated with a google account? 2. Is it possible to serve your custom HTML file from google drive or sites or....?? Assuming I don't have a web server.
+Tony Holmes Hi there, I have found that the easiest way is to use this handy little tool: sneakysheep.com/google-docs-form-tool-version-2/ Put the URL of your custom thank you page and then the link to your live Google form (the plain Google one, not your fancy one you created with the help of my video) and then it will generate a bit of code for you to add to the fancy version html file and test it to make sure it works. Let me know if this works for you or if you run into problems.
Thank you so much for share this video. It's very helpful. If u will so the way to make a professional landing page with google forms it will helpful for all of us like beginner. Basically I want to know about how to style google forms and embed in a single opt-in form.
Thanks for this video - I'm so glad that someone is trying to make Google forms even better! I am trying to find "form action" from the source code but a search is yielding no results. Do you know why this might be, or have any other suggestions?
Best way to find parts of the code is the Find in Page function. Just start to type the word 'action,' and it should automatically highlight and take you to the right part of the code. Let me know if this works!
Hi Ashley. I have created a few forms which I am trying to convert to Google Forms without losing much of the formatting. Would you like to have a look at my form?
You're welcome, I'm really glad to hear you found it helpful. A lot of people keep saying it sucks and I think I should maybe include a disclaimer about how you need to have experience with HTML in order to understand this. Thanks for watching and commenting.
great work. i do find it funny that no one does this for any field type other than text. from experience i believe it is because google makes it very difficult to do this for multiple choice and radio elements. but if you know of a source for accomplishing that, i would be interested. especially in changing multiple choice values when posting.
Actually, I HAVE used this method with Google forms that include dropdowns and multiple choice inputs! It works the same way. Just make sure you're using the OLD version of Goolge forms (open up the form editor, go to the lower right hand corner of your screen and click on the question mark, then choose 'revert back to the old forms'). Next, isolate the HTML within the tags, like I show in this video! Add CSS for all the HTML elements present in your code. If you want more help, email me at thegirlnextfloor@gmail.com
Hi there! I have used this method with forms that include dropboxes (not 100% sure about the checkboxes, but it should work the same way). It's kind of tedious and can be confusing if you are not familiar with editing or working with HTML/CSS. If you'd like, you can send me the link to the Google form and I can send you back a new version that you can style. My email is thegirlnextfloor@gmail.com. :-)
omg thank you! I still haven't figure out how to do it. Instead, I made the google form as a normal input text field, then in the html it grabs the value from the dropbox/checkbox. in a way it works, meh.. but yeah, THANKS! will send the link soon.
Sure, I'd be happy to try. Feel free to email me at thegirlnextfloor@gmail.com, let me know what part is giving you trouble. :-) Glad you enjoyed the video.
I have a form that is simple, but I have had to populate some lists using add-on FormRanger, with over 600 entries from a google sheet. I also have a list that users can clik to take them to pre-filled forms versus them scrolling through all of those list items. At some point, based on a reference in the sheet, I want to send them to a Google Doc associated with the original, pre-filled list entry, where they can see their Form entry appear. Could I hope to use your editing techniques and still accomplish these things? I want to edit to get the form a bit more easy to use on different devices... maybe a wider stance, etc. But I cannot afford to mess up the form-submit trigger that prompts my script to copy entries into the correct referenced google doc. Thank you so much for your work here, and for sharing!
Hi Jim, thanks for watching and commenting. Unfortunately, I honestly have NO idea if the answer to your question is yes or no. I have never used any add-ons for Google Forms, so I would have to see how those are incorporated into the code. I'll see if I can figure that out soon and update this response. If I had to guess? I *think* it should still work because we're really only making changes that affect the CSS of the form (styling and the appearance). Hopefully I'll have something more conclusive for you soon!
I messed around with it a bit, but wasn't really able to figure it out since I don't exactly know how you are using the add-on or how it's set up. It then occurred to me that the best way for you to test this is to simply make a copy of your existing form in Google Drive and then experiment using the separate copy so you don't mess up the important original in any way. Let me know if it works for you! Good luck.
I will. Thanx. . Say, do you happen to have any understanding of scripting such that you could help me change the URL associated with an inLineDrawing in Google docs? I have been asking for help on this for a while, and no one seems to have any advice... Here it is on StackExchange... webapps.stackexchange.com/questions/99642/help-me-find-my-element-in-a-google-doc-so-i-can-act-on-it-in-script stackoverflow.com
I don't get it. My google forms don't look that clean to begin with. They have a purple border at the top and when I view the source code it looks nothing like the text that shows up for you.
You are using the newer version of Google Forms, which is the issue. The code for the new ones is a fucking MESS that scares me to look at. If you want to use my method for customizing one, try looking in the lower right hand corner of your screen when you have Google Forms open...there should be a menu down there, and check to see if you have the option to go back to the old version. That is so much easier. Hope that helps. :-)
So was I, for a moment. I think Google Forms won't let me create new forms using the old version, but if I had already created it using the old one, it lets me roll back. I think, in theory, you could probably make a simple form like the one in my example and sort of force it to work like this demo by associating it with a spreadsheet you setup specifically for it.
This is cool...!! But there is an small issue that after clicking on submit button it redirects to google form page..... Can you help me with it.... I want it to stay on my own form page. thanks in advance....!! :)
sneakysheep.com/google-docs-form-tool-version-2/ That tool will give you a piece of code to add to your form, which will redirect to the URL of your choice upon submission. Hope this helps. Thanks for watching.
So the process should be exactly the same. All you'd need to do is copy the name="" value for the radio button inputs and make sure they match and/or correspond in your styled form. Does that make sense?
Ashly Lorenzana It is generally the same, they use DIV's instead of radio buttons but there is a hidden input that changes(generally below the radio button's container), you need to copy the hidden input's name then use values on your online radio buttons to get the same values as on Google forms
That's easy. Just take the words that are appearing on the form that you want to delete, then use Find in Page when viewing the code to locate these parts, then simply delete them from the code. :-) Let me know if this works for you.
Yes, just revert back to the old Google Forms by clicking on the little question mark circle in your lower right hand corner when you have the forms editor open.
Is there a way to just show the form not have to push the button? Been trying to see if I figure it out but cant really seem to get it to work. Great tutorial! You are the only one that has something like this. :)
This was perfect! I just used your form and tweaked it to match my websites style. Thanks a lot!
I'm surprised there aren't more tools out there to help simplify customizing Google Forms.
This video has clearly communicated how to view the source code and how to make particular changes to a google form. What is the next step? How does one edit this code in Google Forms? Please be encouraged and not offended. You are one of the few people truly interested in forms. Include the next step in the process and keep it up:)
Annette Hickman Thanks Annette! I would be happy to record a follow up video explaining the next steps more in-depth. I will be sure to let you know as soon as it's available. I appreciate the feedback!
Thanks, I look forward to that. Keep me informed anytime you complete a video on forms. Remember to keep doing it because you are awesome!
Many thanks the information, how to add file /upload from google form code? where should I find the "name" or id"?
Thank you, this was very helpful! The only thing i would like to know is if there is a way to use radio-buttons instead of text?
EDIT: I found it, it was pretty simple. if someone wants to know here is how i did it:
just kept it as text in google sheets and changed
+Sam van Berlo Awesome work, Sam! I didn't know how to do that, so thank you for sharing with everyone. That will come in handy in the future I'm sure.
This is really nice, I spended alot of time in customizing google form CSS, but with no luck. I was about to start with Gooogle App and found your video. You saved me aton of time. Thank you. :) this is simple and helpful, appreciate your help.
That's great, I'm so glad that it helped you. Thanks for watching and commenting!
hello there. please i need your help. when i click on submit, it takes me to the original from page. please how can i fix it
I dunno if this "unprofessional" I mean if anything this is the future. Thanks for the tut!
HOW DO I OPEN THIS FORM AFTER ITS CUSTOMIZED? DO I COPY PASTE THE CUSTOMIZED CODE BACK TO THE ORIGINAL PAGE SOURCE?
Thanks very much.
You has got something that I knew impossible.
I managed to save the xml file but it will not show up the css part . just showing up the fields excepts those, and also i entered the css in the wordpress and shows up the red part, but it is not functional yet. .and also i'm looking for other fields like dropdown and choice of fields example so that i can create more fields accordingly, like date range, and date calendar that shows up etc, hope you can help us more on that thank you.!
Great video I loved it and learned a new skill as well. Just do a favour and do tell me which screen recorder software do you had used?
+COMPUTERZ HUB Glad you found it useful! I use Camtasia for all my vids. :)
Thanks!
Two questions...
1. Since the custom web page isn't hosted on www.google.com, when you hit SUBMIT, would it work for users who are not authenticated with a google account?
2. Is it possible to serve your custom HTML file from google drive or sites or....?? Assuming I don't have a web server.
Thanks For the Information... How can I remove the redirection after submitting.. And i need to display " It is recorded" without redirection?
How can I change the "Thank You" page? I'd like to either customize the Google page or redirect to another page. Thanks!
+Tony Holmes Hi there, I have found that the easiest way is to use this handy little tool: sneakysheep.com/google-docs-form-tool-version-2/
Put the URL of your custom thank you page and then the link to your live Google form (the plain Google one, not your fancy one you created with the help of my video) and then it will generate a bit of code for you to add to the fancy version html file and test it to make sure it works.
Let me know if this works for you or if you run into problems.
Thank you so much for share this video. It's very helpful. If u will so the way to make a professional landing page with google forms it will helpful for all of us like beginner. Basically I want to know about how to style google forms and embed in a single opt-in form.
thank you mam...nice video. how to design custom thank you page with Google forms
Thanks for this video - I'm so glad that someone is trying to make Google forms even better!
I am trying to find "form action" from the source code but a search is yielding no results. Do you know why this might be, or have any other suggestions?
Best way to find parts of the code is the Find in Page function. Just start to type the word 'action,' and it should automatically highlight and take you to the right part of the code. Let me know if this works!
Hi Ashley. I have created a few forms which I am trying to convert to Google Forms without losing much of the formatting. Would you like to have a look at my form?
Thank you so much for share this video. It's very helpful
You're welcome, I'm really glad to hear you found it helpful. A lot of people keep saying it sucks and I think I should maybe include a disclaimer about how you need to have experience with HTML in order to understand this. Thanks for watching and commenting.
great work. i do find it funny that no one does this for any field type other than text. from experience i believe it is because google makes it very difficult to do this for multiple choice and radio elements. but if you know of a source for accomplishing that, i would be interested. especially in changing multiple choice values when posting.
Actually, I HAVE used this method with Google forms that include dropdowns and multiple choice inputs!
It works the same way.
Just make sure you're using the OLD version of Goolge forms (open up the form editor, go to the lower right hand corner of your screen and click on the question mark, then choose 'revert back to the old forms').
Next, isolate the HTML within the tags, like I show in this video!
Add CSS for all the HTML elements present in your code.
If you want more help, email me at thegirlnextfloor@gmail.com
th-cam.com/video/XnhVEpB9xqM/w-d-xo.html
Really amazing tutorial. Thanks!
CSS Deck link doesn't work
Hi, really need your help! how about forms with a dropdown and a checkbox?
Hi there! I have used this method with forms that include dropboxes (not 100% sure about the checkboxes, but it should work the same way).
It's kind of tedious and can be confusing if you are not familiar with editing or working with HTML/CSS. If you'd like, you can send me the link to the Google form and I can send you back a new version that you can style. My email is thegirlnextfloor@gmail.com. :-)
omg thank you! I still haven't figure out how to do it. Instead, I made the google form as a normal input text field, then in the html it grabs the value from the dropbox/checkbox. in a way it works, meh.. but yeah, THANKS! will send the link soon.
th-cam.com/video/XnhVEpB9xqM/w-d-xo.html
Hey! How to export project from cssdesck?
Personally, I just copy and paste the CSS and the HTML into Notepad and create an HTML document.
Thanks for your video!! It's very helpful.
But I have problems dealing with checkboxs, can you help me with that?
Thank you~
Sure, I'd be happy to try. Feel free to email me at thegirlnextfloor@gmail.com, let me know what part is giving you trouble. :-) Glad you enjoyed the video.
th-cam.com/video/XnhVEpB9xqM/w-d-xo.html
I have a form that is simple, but I have had to populate some lists using add-on FormRanger, with over 600 entries from a google sheet. I also have a list that users can clik to take them to pre-filled forms versus them scrolling through all of those list items.
At some point, based on a reference in the sheet, I want to send them to a Google Doc associated with the original, pre-filled list entry, where they can see their Form entry appear.
Could I hope to use your editing techniques and still accomplish these things? I want to edit to get the form a bit more easy to use on different devices... maybe a wider stance, etc. But I cannot afford to mess up the form-submit trigger that prompts my script to copy entries into the correct referenced google doc.
Thank you so much for your work here, and for sharing!
Hi Jim, thanks for watching and commenting.
Unfortunately, I honestly have NO idea if the answer to your question is yes or no. I have never used any add-ons for Google Forms, so I would have to see how those are incorporated into the code. I'll see if I can figure that out soon and update this response.
If I had to guess? I *think* it should still work because we're really only making changes that affect the CSS of the form (styling and the appearance). Hopefully I'll have something more conclusive for you soon!
Thanx!
I messed around with it a bit, but wasn't really able to figure it out since I don't exactly know how you are using the add-on or how it's set up.
It then occurred to me that the best way for you to test this is to simply make a copy of your existing form in Google Drive and then experiment using the separate copy so you don't mess up the important original in any way. Let me know if it works for you! Good luck.
I will. Thanx.
. Say, do you happen to have any understanding of scripting such that you could help me change the URL associated with an inLineDrawing in Google docs?
I have been asking for help on this for a while, and no one seems to have any advice... Here it is on StackExchange...
webapps.stackexchange.com/questions/99642/help-me-find-my-element-in-a-google-doc-so-i-can-act-on-it-in-script
stackoverflow.com
Great video, so you do you upload/update that to google forms? or did u just create the html on ur pc lolz
I can't find the form action line in the code anymore. Is it just me? now there is a ......jsaction="input:Lg5SV;ti6hGc:XMgOHc;..... Is it only me?
+Aaron Brown Update... It was only me. I found it. I love this by the way! Thank you!
how did you find it? I couldnt find it
I don't get it. My google forms don't look that clean to begin with. They have a purple border at the top and when I view the source code it looks nothing like the text that shows up for you.
You are using the newer version of Google Forms, which is the issue. The code for the new ones is a fucking MESS that scares me to look at. If you want to use my method for customizing one, try looking in the lower right hand corner of your screen when you have Google Forms open...there should be a menu down there, and check to see if you have the option to go back to the old version. That is so much easier. Hope that helps. :-)
Thank you! Found it! I'm a little concerned though. What if they remove it completely? =(
So was I, for a moment.
I think Google Forms won't let me create new forms using the old version, but if I had already created it using the old one, it lets me roll back.
I think, in theory, you could probably make a simple form like the one in my example and sort of force it to work like this demo by associating it with a spreadsheet you setup specifically for it.
I created my form just a couple of days ago so it should be fine.
Let's hope for a more permanent (and simple) solution in the future.
Wish I knew how to code a simple program that stripped all the shit out of the code generated by the new version. That's all it needs.
:/ looks like the cssdeck link is down
cssdeck.com/labs/full-css-drop...
the link is not working anymore any alternatives?
This is cool...!! But there is an small issue that after clicking on submit button it redirects to google form page..... Can you help me with it.... I want it to stay on my own form page.
thanks in advance....!! :)
sneakysheep.com/google-docs-form-tool-version-2/
That tool will give you a piece of code to add to your form, which will redirect to the URL of your choice upon submission. Hope this helps. Thanks for watching.
Do you know how to do it w/ radio buttons or a linear scale?
So the process should be exactly the same. All you'd need to do is copy the name="" value for the radio button inputs and make sure they match and/or correspond in your styled form.
Does that make sense?
Ashly Lorenzana It is generally the same, they use DIV's instead of radio buttons but there is a hidden input that changes(generally below the radio button's container), you need to copy the hidden input's name then use values on your online radio buttons to get the same values as on Google forms
how do you remove the google stuff at bottom of form
That's easy. Just take the words that are appearing on the form that you want to delete, then use Find in Page when viewing the code to locate these parts, then simply delete them from the code. :-) Let me know if this works for you.
Thank you. Helpful
Cool. Subscribed.
is legal ?
Is that even served?
Does this still work? :/
Yes, just revert back to the old Google Forms by clicking on the little question mark circle in your lower right hand corner when you have the forms editor open.
Is there a way to just show the form not have to push the button?
Been trying to see if I figure it out but cant really seem to get it to work.
Great tutorial! You are the only one that has something like this. :)
this is simply not useful.
Ahnaf Hassan then you simply lack the knowledge and skills to put it to use.
You could have covered a lot if you could just get to the point and stop rambling a lot