Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
132 lines (132 sloc) 6.13 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self-Branded, Client-Side Contact Form Example Using Google Forms</title>
<meta name="description" content="This is a simple example using Google Forms to create a native, self branded contact page.">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.js {
display: block;
}
.nojs {
display: none;
}
</style>
<noscript>
<style>
.js {
display: none;
}
.nojs {
display: block;
}
</style>
</noscript>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Self-Branded, Client-Side Contact Form Example Using Google Forms</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-full">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 well">
<div class="col-sm-6 col-md-6 col-lg-6 col-sm-offset-3 col-md-offset-3 col-lg-offset-3 text-center">
<p>This is a simple example of using Google Forms to create a self-branded, client-side contact page that is perfect for using with GitHub Pages or in a serverless application.
This example uses Bootstrap, but any styling can be used. If JavaScript is enabled, the form will redirect to whatever page you set, and is set to http://www.example.com/ in the example.
If JavaScript is not enabled, it will redirect to the Google response page. With JavaScript enabled, the user will see no indication that you are using Google Forms for your form.
You can do the same with any form created using Google Forms.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 well">
<div class="col-sm-6 col-md-6 col-lg-6 col-sm-offset-3 col-md-offset-3 col-lg-offset-3 text-center">
<h1>Contact Us</h1>
<h2>Please use the form below to contact us. We will respond as soon as possible.</h2>
<noscript><div class="alert alert-danger"><p>This form works best with JavaScript enabled. Please enable JavaScript if possible.</p></div></noscript>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-sm-offset-3 col-md-offset-3 col-lg-offset-3 text-left js">
<script type="text/javascript">var submitted=false;</script>
<iframe name="iframe_redirect" style="display:none;" onload="if(submitted) { window.location='http://www.example.com/'; }"></iframe>
<form action="https://docs.google.com/forms/d/e/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/formResponse" method="post" target="iframe_redirect" onsubmit="submitted=true;">
<div class="form-group">
<label for="field-1-js">First Name (js)</label>
<input type="text" class="form-control" id="field-1-js" name="entry.1234567890" required>
</div>
<div class="form-group">
<label for="field-2-js">Last Name</label>
<input type="text" class="form-control" id="field-2-js" name="entry.1234567891" required>
</div>
<div class="form-group">
<label for="field-3-js">Email Address</label>
<input type="email" class="form-control" id="field-3-js" name="entry.1234567892" required>
</div>
<div class="form-group">
<label for="field-4-js">Phone Number</label>
<input type="text" class="form-control" id="field-4-js" name="entry.1234567893" required>
</div>
<div class="form-group">
<label for="field-5-js">Message</label>
<textarea class="form-control" rows="7" id="field-5-js" name="entry.1234567894" required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-sm-offset-3 col-md-offset-3 col-lg-offset-3 text-left nojs">
<form action="https://docs.google.com/forms/d/e/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/formResponse" method="post">
<div class="form-group">
<label for="field-1-nojs">First Name (nojs)</label>
<input type="text" class="form-control" id="field-1-nojs" name="entry.1234567890" required>
</div>
<div class="form-group">
<label for="field-2-nojs">Last Name</label>
<input type="text" class="form-control" id="field-2-nojs" name="entry.1234567891" required>
</div>
<div class="form-group">
<label for="field-3-nojs">Email Address</label>
<input type="email" class="form-control" id="field-3-nojs" name="entry.1234567892" required>
</div>
<div class="form-group">
<label for="field-4-nojs">Phone Number</label>
<input type="text" class="form-control" id="field-4-nojs" name="entry.1234567893" required>
</div>
<div class="form-group">
<label for="field-5-nojs">Message</label>
<textarea class="form-control" rows="7" id="field-5-nojs" name="entry.1234567894" required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
You can’t perform that action at this time.