Build a standard HTML <form> using any Google Forms
Home Page: https://stefano.brilli.me/google-forms-html-exporter/
License: BSD 3-Clause "New" or "Revised" License
There are issue with form which require user to sign-in to google. The response not recorded.
I manage to get the sign-in process from my web. But the form cant be recorded to spreadsheet.
Hi, I'm in a project now. I exported the basic google form into Html with your website's help. will you please guide me on how I can add the feature of uploading file in Html, js into your exported html, js file
I'll really appreciate it.
Thanks, waiting for your response. ASAP Please!!
Great work but the conditions in the conform is not working if you could that it will help a lot. I know you said Standard form but the conditions is what makes us enjoy Google forms
Hi
Is it possible for you to make an API for this
The setup is hard and using it with other is also hard
It would be nice if you could make this an api
First off, thank you, this tool is a lot cleaner then what I used last time I tried to convert a form to be usable on a website!
I have been trying to get this to work (similarly to the demo, but, I am wanting this to post to console or show a toast notification). However, taking things one piece at a time, I am just trying to get the entire page to not auto-redirect when submit is sent to the site so I don't get redirected to the postResponse page.
I tried testing this two ways:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha256-2Pjr1OlpZMY6qesJM68t2v39t+lMLvxwpa8QlRjJroA=" crossorigin="anonymous"></script>
<script>
$('#bootstrapForm').submit(function (event) {
event.preventDefault()
var extraData = {}
$('#bootstrapForm').ajaxSubmit({
data: extraData,
dataType: 'jsonp', // This won't really work. It's just to use a GET instead of a POST to allow cookies from different domain.
error: function () {
// Submit of form should be successful but JSONP callback will fail because Google Forms
// does not support it, so this is handled as a failure.
alert('Form Submitted. Thanks.')
// You can also redirect the user to a custom thank-you page:
// window.location = 'http://www.mydomain.com/thankyoupage.html'
}
})
})
</script>
</head>
<body>
<form action="https://docs.google.com/forms/d/e/1FAIpQLSdls8ZHN0eT2UIKdC2FM730McPOxVPbY3WVJzsxtMQr5vKD1A/formResponse" target="_self" id="bootstrapForm" method="POST">
<legend for="744487962">Name</legend>
<div class="form-group">
<input id="672765353" type="text" name="entry.672765353" class="form-control" >
</div>
<legend for="1832426025">Email</legend>
<div class="form-group">
<input id="869555934" type="text" name="entry.869555934" class="form-control" >
</div>
<legend for="728820308">How did you find this website?</legend>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="entry.401439447" value="Google" >
Google
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="entry.401439447" value="Github" >
Github
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="entry.401439447" value="__other_option__" >
</label>
<input type="text" name="entry.401439447.other_option_response" placeholder="custom value">
</div>
</div>
<input type="hidden" name="fvv" value="1">
<input type="hidden" name="fbzx" value="-4188684007662801280">
<!--
CAVEAT: In multipages (multisection) forms, *pageHistory* field tells to google what sections we've currently completed.
This usually starts as "0" for the first page, then "0,1" in the second page... up to "0,1,2..N" in n-th page.
Keep this in mind if you plan to change this code to recreate any sort of multipage-feature in your exported form.
We're setting this to the total number of pages in this form because we're sending all fields from all the section together.
-->
<input type="hidden" name="pageHistory" value="0">
<input class="btn btn-primary" type="submit" value="Submit">
</form>
</body>
</html>
Looking at other pages:
https://stackoverflow.com/questions/27600506/stop-page-from-redirecting-after-submitting-google-form-through-ajax
https://stackoverflow.com/questions/6114436/access-control-allow-origin-error-sending-a-jquery-post-to-google-apis
I am a little confused as to how this is now operating, you are telling it to use jsonp to use GET instead of POST, but, in the action, you state to use POST.
If I could get a little assistance with this, that would be awesome.
Sorry, service is unavailable at the moment
Can you provide an example of the code that actually redirects to a custom thank you page?
As simple as it may be I was not able to get this to work and maybe I am not taking something into account or perhaps you may not be taking something into account but if there were a working example it would be clear what the adjustment in the code would need to look like to make this possible.
Now, I am just simply befuddled after several trial variations in the code and no clear direction and lost.
Great project! Please include response validation and especially regex for short answers whenever you want
Hi!
great job!
1-How we can use it with the new upload option?
2-How we can add a Map inside the form with Lat/Long track?
3-how we can embed it on our website?
Thank you
Server is down https://google-form-exporter.herokuapp.com/formdress
Might be easier to move functionality to the front?
Hey Hey! Love this project but I am having the following problem, for some reason I get an error on loading the html:
Failed to load resource: net::ERR_TOO_MANY_REDIRECTS
and after submit:
Any idea why this may be?
Thanks in advance :)
The form submitted and it says 1 response. But the contents are blank.
hello ,, which jquery forms do you use ? and is there any way to stop redirect to google thanks form ??
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.