Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 92a702c

Browse files
committed
Merge pull request #11 from dwyl/generic-form-handler
Generic form handler
2 parents 22d963c + 07fc820 commit 92a702c

File tree

6 files changed

+89
-7
lines changed

6 files changed

+89
-7
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
.DS_Store
2+
npm-debug.log
3+
node_modules

‎README.md‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ which is *easy* but requires *maintenance*,
2222
use Google to send mail on your behalf
2323
and use Google Spreadsheets to keep track of the data!
2424

25-
> You *could* use a "*free*" service like http://formspree.io/ to process your form submissions
25+
> You *could* use a "*free*" service like http://formspree.io/ to process your form submissions
2626
if you don't care where you are sending your data and want to manage the data submitted
2727
in your email inbox (*messy ... yuck*!)
2828
*Or*... you can *invest* a few minutes and keep data private/manageable.
@@ -123,7 +123,7 @@ Open the inbox for the email address you set in **Step 3** (*above*)
123123
# *Part Two - Make It Look Good* ...
124124

125125
We are going to keep this ***Super Lean*** by using [**PURE CSS**](http://purecss.io/start/)
126-
for our Style (*fix the "ugly" HTML Form in step 8*).
126+
for our Style (*fix the "ugly" HTML Form in step 8*).
127127
And `submit` the form using [**JQuery** "***AJAX***"](http://api.jquery.com/jquery.ajax/) to keep the person
128128
on your page/site (*avoid "ugly" response page*)
129129

@@ -202,10 +202,33 @@ Follow Steps 4, 5 & 6 to save a new version and ***re-publish*** the script.
202202

203203
![17-confirm-data-inserted](https://cloud.githubusercontent.com/assets/194400/10582676/eb8af5d8-7680-11e5-92bb-30dd08d2d7b3.png)
204204

205+
205206
# *Want more*?
206207

207208
If you want us to take this tutorial further, [***please let us know***!](https://github.com/nelsonic/html-form-send-email-via-google-script-without-server/issues)
208209

210+
211+
## Add your own fields!
212+
213+
In response to [Henry Beary's request](https://github.com/dwyl/html-form-send-email-via-google-script-without-server/issues/9)
214+
we made the form handler *generic* which means you can now add any fields you want to the form.
215+
216+
remember to include the fields *inside* the form that has the id `gform`
217+
and ensure that the `name` of the form element matches the new column heading in your spreadsheet.
218+
e.g:
219+
```HTML
220+
<fieldset class="pure-group">
221+
<label for="color">Favourite Color: </label>
222+
<input id="color" name="color" placeholder="green" />
223+
</fieldset>
224+
```
225+
This will allow you to capture the person's favourite color:
226+
e.g:
227+
![new-field-contains-data](https://cloud.githubusercontent.com/assets/194400/11547132/9f162f6a-9949-11e5-89ac-aeb91e025844.png)
228+
229+
Let us know if you have any questions!
230+
231+
209232
## Background Reading
210233

211234
+ Google Apps Scripts Basics: https://developers.google.com/apps-script/articles

‎form-submission-handler.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ function validEmail(email) { // see:
55
}
66
// get all data in form and return object
77
function getFormData() {
8-
var data = {
9-
name : document.getElementById("name").value,
10-
email : document.getElementById("email").value,
11-
message : document.getElementById("message").value
12-
}
8+
var elements = document.getElementById("gform").elements; // all form elements
9+
var fields = Object.keys(elements).filter(function(k){
10+
return k.length > 1 && elements[k].name && elements[k].name.length > 0 ;
11+
});
12+
var data = {};
13+
fields.forEach(function(k){
14+
data[k] = elements[k].value;
15+
});
1316
console.log(data);
1417
return data;
1518
}

‎index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@ <h2 class="content-head is-center">Contact Us!</h2>
4646
Must be a valid email address</span>
4747
</fieldset>
4848

49+
<fieldset class="pure-group">
50+
<label for="color">Favourite Color: </label>
51+
<input id="color" name="color" placeholder="green" />
52+
</fieldset>
53+
4954
<button class="button-success pure-button button-xlarge">
5055
<i class="fa fa-paper-plane"></i>&nbsp;Send</button>
5156

@@ -60,6 +65,8 @@ <h2><em>Thanks</em> for contacting us!
6065
<!-- Submit the Form to Google Using "AJAX" -->
6166
<script data-cfasync="false" type="text/javascript"
6267
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
68+
<!-- <script data-cfasync="false" type="text/javascript"
69+
src="/form-submission-handler.js"></script> -->
6370
<!-- END -->
6471

6572
</body>

‎package.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "html-form-send-email-via-google-script-without-server",
3+
"version": "1.0.0",
4+
"description": "tutorial showing how to save data to a google doc spreadsheet from any html form (including sending emails!)",
5+
"main": "static-server.js",
6+
"scripts": {
7+
"start": "./node_modules/.bin/nodemon static-server.js"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/dwyl/html-form-send-email-via-google-script-without-server.git"
12+
},
13+
"keywords": [
14+
"tutorial",
15+
"google",
16+
"docs",
17+
"email",
18+
"form"
19+
],
20+
"author": "nelsonic @dwyl",
21+
"license": "GPL-2.0",
22+
"bugs": {
23+
"url": "https://github.com/dwyl/html-form-send-email-via-google-script-without-server/issues"
24+
},
25+
"homepage": "https://github.com/dwyl/html-form-send-email-via-google-script-without-server#readme",
26+
"devDependencies": {
27+
"hapi": "^11.1.2",
28+
"inert": "^3.2.0",
29+
"nodemon": "^1.8.1"
30+
}
31+
}

‎static-server.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
var Hapi = require('hapi');
2+
var Inert = require('inert'); // serve static content
3+
var Path = require('path');
4+
var server = new Hapi.Server();
5+
var port = process.env.PORT || 8000;
6+
server.register(Inert, function () {
7+
server.connection({ port: port });
8+
server.route( {
9+
method: 'GET',
10+
path: '/{param*}',
11+
handler: {
12+
directory: { path: Path.normalize(__dirname + '/') }
13+
}
14+
});
15+
server.start(function() { console.log('Visit: http://127.0.0.1:' +port) });
16+
}); // requires a callback function but can be blank

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /