Form Submit to Google Forms

Developer
Size
5,606 Kb
Views
12,144

How do I make an form submit to google forms?

Form submit to google forms, based on http://www.codeproject.com/Tips/721795/Store-your-form-data-in-Google-Spreadsheet. What is a form submit to google forms? How do you make a form submit to google forms? This script and codes were developed by Pollardld on 17 October 2022, Monday.

Form Submit to Google Forms Previews

Form Submit to Google Forms - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Form Submit to Google Forms</title> <link href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box; font-family: 'Cabin', sans-serif; text-rendering: geometricPrecision;
}
form { color: #444; display: block; margin: 2rem auto; position: relative; width: 80%;
}
input[type=text] { border: none; color: #007491; border-bottom: 1px solid #aaa; display: block; margin: 0 0 2rem; padding: .25rem; width: 100%;
}
input[type=text]:focus { animation: focus .3s 1; border-bottom: 1px solid #007491; outline: none;
}
textarea { border: none; border-bottom: 1px solid #aaa; color: #007491; display: block; height: 2rem; margin: 0 0 2rem; padding: .25rem; width: 100%; transition: 0.3s height ease;
}
textarea:focus { animation: focus .3s 1; border-bottom: 1px solid #007491; height: 4rem; outline: none;
}
label { display: block; line-height: 14px; margin: 0 1rem 1rem;
}
label input[type=checkbox] { appearance: none; border: 1px solid #aaa; height: 14px; margin-right: 10px; width: 14px;
}
label input[type=checkbox]:hover { cursor: pointer;
}
label input[type=checkbox]:focus { animation: focus .3s 1; border: 1px solid #007491; outline: none;
}
label input[type=checkbox]:checked { background: #007491;
}
.other { margin-bottom: 2rem;
}
.other input[type=text] { display: inline-block; margin: 0 0 0 10px; width: 70%;
}
.copy { margin-bottom: 2rem; margin-left: 0;
}
#submit { background: transparent; border: 1px solid #aaa; padding: 10px 20px; transition: .3s all ease;
}
#submit:hover { text-shadow: 0 1px #999;
}
#submit:focus { animation: focus .3s 1; border: 1px solid #007491; outline: none;
}
@keyframes focus { 0% { background: rgba(0, 116, 145, 0); } 50% { background: rgba(0, 116, 145, 0.25); } 100% { background: rgba(0, 116, 145, 0); }
}
::-webkit-input-placeholder { color: #444;
}
:-moz-placeholder { /* Firefox 18- */ color: #444;
}
::-moz-placeholder { /* Firefox 19+ */ color: #444;
}
:-ms-input-placeholder { color: #444;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <form action="https://docs.google.com/a/altaplanning.com/forms/d/169m4zy0TTUSyOQBpT6Q0Gez8AUhi5aLkYHz5CHQyPcQ/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""> <input type="text" name="entry.1301656810" value="" id="entry_1301656810" dir="auto" aria-label="Project Name " aria-required="true" required title="Project Name" placeholder="Project Name *"> <input type="text" name="entry.1841012025" value="" id="entry_1841012025" dir="auto" aria-label="Project Number " aria-required="true" required title="Project Number" placeholder="Project Number *"> <input type="text" name="entry.596091773" value="" id="entry_596091773" dir="auto" aria-label="Project Budget " title="Project Budget" placeholder="Project Budget"> <input type="text" name="entry.116171440" value="" id="entry_116171440" dir="auto" aria-label="Website Budget " title="Website Budget" placeholder="Website Budget"> <textarea name="entry.449884252" rows="8" cols="0" id="entry_449884252" dir="auto" aria-label="What is the timeline for this project? " placeholder="What is the timeline for this project?"></textarea> <textarea name="entry.1560255698" rows="8" cols="0" id="entry_1560255698" dir="auto" aria-label="Do you have links to examples of how you envision the site? " placeholder="Do you have links to examples of how you envision the site?"></textarea> <textarea name="entry.558989414" rows="8" cols="0" id="entry_558989414" dir="auto" aria-label="Are there upcoming meetings we could be a part of to help us better understand the project? " placeholder="Any upcoming meetings that would help us understand the project?"></textarea> <textarea name="entry.200255908" rows="8" cols="0" id="entry_200255908" dir="auto" aria-label="Do you have a current website for this project? (is so, send url and any login credentials) " placeholder="If this project has a current website, what is the url & any login credentials?"></textarea> <p>Will the website need any of the below? (check all that apply)</p> <label><input type="checkbox" name="entry.1565269258" value="Content Management System (CMS)" id="group_1565269258_1" role="checkbox" class="ss-q-checkbox">Content Management System (CMS)</label> <label><input type="checkbox" name="entry.1565269258" value="Blog" id="group_1565269258_2" role="checkbox" class="ss-q-checkbox">Blog</label> <label><input type="checkbox" name="entry.1565269258" value="Map" id="group_1565269258_3" role="checkbox" class="ss-q-checkbox">Map</label> <label><input type="checkbox" name="entry.1565269258" value="Contact Form" id="group_1565269258_4" role="checkbox" class="ss-q-checkbox">Contact Form</label> <label><input type="checkbox" name="entry.1565269258" value="Survey" id="group_1565269258_5" role="checkbox" class="ss-q-checkbox">Survey</label> <label><input type="checkbox" name="entry.1565269258" value="Newsletter Sign Up Form" id="group_1565269258_6" role="checkbox" class="ss-q-checkbox">Newsletter Sign Up Form</label> <label class="other"> <input type="checkbox" name="entry.1565269258" value="__other_option__" id="group_1565269258_7" role="checkbox" class="ss-q-checkbox ss-q-other-toggle">Other: <input type="text" name="entry.1565269258.other_option_response" value="" id="entry_1565269258_other_option_response" dir="auto" aria-label="Other"> </label> <textarea name="entry.459540751" rows="8" cols="0" id="entry_459540751" dir="auto" aria-label="Any questions for us? " placeholder="Any questions for us?"></textarea> <textarea name="entry.2020065069" rows="8" cols="0" id="entry_2020065069" dir="auto" aria-label="Any additional information you can provide? " placeholder="Any additional information you can provide?"></textarea> <input type="hidden" name="draftResponse" value="[,,&quot;-5083218772736874636&quot;]
"> <input type="hidden" name="pageHistory" value="0"> <input type="hidden" name="token" value="doNWg0cBAAA.VLxKWK1fOxLuQ-B-xquy4Q.0oOkc3fM5XPE7Td6izN2kg"> <input type="hidden" name="fbzx" value="-5083218772736874636"> <label class="copy"><input type="checkbox" name="emailReceipt" value="true" id="emailReceipt">Send me a copy of my responses.</label> <button type="button" id="submit">SUBMIT</button>
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Form Submit to Google Forms - Script Codes CSS Codes

* { box-sizing: border-box; font-family: 'Cabin', sans-serif; text-rendering: geometricPrecision;
}
form { color: #444; display: block; margin: 2rem auto; position: relative; width: 80%;
}
input[type=text] { border: none; color: #007491; border-bottom: 1px solid #aaa; display: block; margin: 0 0 2rem; padding: .25rem; width: 100%;
}
input[type=text]:focus { animation: focus .3s 1; border-bottom: 1px solid #007491; outline: none;
}
textarea { border: none; border-bottom: 1px solid #aaa; color: #007491; display: block; height: 2rem; margin: 0 0 2rem; padding: .25rem; width: 100%; transition: 0.3s height ease;
}
textarea:focus { animation: focus .3s 1; border-bottom: 1px solid #007491; height: 4rem; outline: none;
}
label { display: block; line-height: 14px; margin: 0 1rem 1rem;
}
label input[type=checkbox] { appearance: none; border: 1px solid #aaa; height: 14px; margin-right: 10px; width: 14px;
}
label input[type=checkbox]:hover { cursor: pointer;
}
label input[type=checkbox]:focus { animation: focus .3s 1; border: 1px solid #007491; outline: none;
}
label input[type=checkbox]:checked { background: #007491;
}
.other { margin-bottom: 2rem;
}
.other input[type=text] { display: inline-block; margin: 0 0 0 10px; width: 70%;
}
.copy { margin-bottom: 2rem; margin-left: 0;
}
#submit { background: transparent; border: 1px solid #aaa; padding: 10px 20px; transition: .3s all ease;
}
#submit:hover { text-shadow: 0 1px #999;
}
#submit:focus { animation: focus .3s 1; border: 1px solid #007491; outline: none;
}
@keyframes focus { 0% { background: rgba(0, 116, 145, 0); } 50% { background: rgba(0, 116, 145, 0.25); } 100% { background: rgba(0, 116, 145, 0); }
}
::-webkit-input-placeholder { color: #444;
}
:-moz-placeholder { /* Firefox 18- */ color: #444;
}
::-moz-placeholder { /* Firefox 19+ */ color: #444;
}
:-ms-input-placeholder { color: #444;
}

Form Submit to Google Forms - Script Codes JS Codes

$('#submit').on( 'click', function() { var projectName = $('#entry_1301656810').val(), projectNumber = $('#entry_1841012025').val(), projectBudget = $('#entry_596091773').val(), websiteBudget = $('#entry_116171440').val(), timeline = $('entry_449884252').val(), examples = $('entry_1560255698').val(), upcomingMeetings = $('entry_558989414').val(), currentWebsite = $('entry_200255908').val(), cms = $('group_1565269258_1').val(), blog = $('group_1565269258_2').val(), map = $('group_1565269258_3').val(), contactForm = $('group_1565269258_4').val(), survey = $('group_1565269258_5').val(), newsletter = $('group_1565269258_6').val(), other = $('group_1565269258_7').val(), otherResponse = $('entry_1565269258_other_option_response').val(), additionalInfo = $('entry_2020065069').val(), additionalQuestions = $('entry_459540751').val(); $.ajax({ url : "https://docs.google.com/a/altaplanning.com/forms/d/169m4zy0TTUSyOQBpT6Q0Gez8AUhi5aLkYHz5CHQyPcQ/formResponse", data: { "entry_1301656810": projectName, "entry_1841012025": projectNumber, "entry_596091773": projectBudget, "entry_116171440": websiteBudget, "entry_449884252" : timeline, "entry_1560255698" : examples, "entry_558989414" : upcomingMeetings, "entry_200255908" : currentWebsite, "group_1565269258_1" : cms, "group_1565269258_2" : blog, "group_1565269258_3" : map, "group_1565269258_4" : contactForm, "group_1565269258_5" : survey, "group_1565269258_6" : newsletter, "group_1565269258_7" : other, "entry_1565269258_other_option_response" : otherResponse, "entry_2020065069" : additionalInfo, "entry_459540751" : additionalQuestions, }, type: "POST", dataType: "xml", statusCode: { 0: function () { alert('success'); }, 200: function () { alert('fail'); } }	})
});
Form Submit to Google Forms - Script Codes
Form Submit to Google Forms - Script Codes
Home Page Home
Developer Pollardld
Username pollardld
Uploaded October 17, 2022
Rating 3.5
Size 5,606 Kb
Views 12,144
Do you need developer help for Form Submit to Google Forms?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pollardld (pollardld) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!