Added a React version of index.js and form-submission-handler.js #453

Remove unnecessary steps in the readme by including
honeypot spam prevention by default in the script.
Works just fine if no honeypot field is present, since
the falsey or empty behavior also means the form is
submitted. This just makes it easier for users to take
our example and get this feature for free rather than
needing to go through steps and having commented
out code in our sample script. Also fixes a bug since
filtering out the honeypot meant that the honeypot
data was no longer being used and was thus broken.

Loading branch information

@mckennapsean

mckennapsean committed May 26, 2019

commit 6ea59bb910c090758536769a4926676df70b373f

29 changes: 0 additions & 29 deletions README.md

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -340,35 +340,6 @@ e.g:

		Let us know if you have any questions!

	## SPAM prevention

	In order to avoid getting spammed and fill up google apps usage quota, we will be implementing a simple SPAM prevention technique that's known as Honeypot where it essentially creates a hidden text field that if filled up is assumed as a spam bot and prevents the form from submit.

	```html
	<form action="https://script.google.com/macros/s/..." method="post">
	<!--input id must be honeypot or else it wont work-->
	<label class="sr-only">Keep this field blank</label>
	<input id="honeypot" type="text" name="honeypot" value="" />
	<!--the rest of your form-->
	</form>
	```

	```css
	#honeypot {
	display: none; /makes the field not visible to humans/
	}
	```

	```javascript
	/* form-submission-handler.js */
	/* remove the comment from this if statement */

	if (validateHuman(data.honeypot)) { //if form is filled, form will not be submitted
	return false;
	}

	```


		## Uploading Files

Expand Down

26 changes: 11 additions & 15 deletions form-submission-handler.js

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,21 +4,17 @@
		return re.test(email);
		}

	function validateHuman(honeypot) {
	if (honeypot) { //if hidden form filled up
	console.log("Robot Detected!");
	return true;
	} else {
	console.log("Welcome Human!");
	}
	}

		// get all data in form and return object
		function getFormData(form) {
		var elements = form.elements;
	var honeypot;

		var fields = Object.keys(elements).filter(function(k) {
	return (elements[k].name !== "honeypot");
	if (elements[k].name === "honeypot") {
	honeypot = elements[k].value;
	return false;
	}
	return true;
		}).map(function(k) {
		if(elements[k].name !== undefined) {
		return elements[k].name;
Expand Down Expand Up		@@ -56,19 +52,19 @@
		formData.formGoogleSendEmail = form.dataset.email \|\| ""; // no email by default

		console.log(formData);
	return formData;
	return {data: formData, honeypot};
		}

		function handleFormSubmit(event) { // handles form submit without any jquery
		event.preventDefault(); // we are submitting via xhr below
		var form = event.target;
	var data = getFormData(form); // get the values submitted in the form
	var formData = getFormData(form);
	var data = formData.data;

	/* OPTION: Remove this comment to enable SPAM prevention, see README.md
	if (validateHuman(data.honeypot)) { //if form is filled, form will not be submitted
	// If a honeypot field is filled, assume it was done so by a spam bot.
	if (formData.honeypot) {
		return false;
		}
	*/

		if( data.email && !validEmail(data.email) ) { // if email is not valid show error
		var invalidEmail = form.querySelector(".email-invalid");
Expand Down

5 changes: 5 additions & 0 deletions index.html

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,6 +52,11 @@ <h2 class="content-head is-center">Contact Us!</h2>
		<input id="color" name="color" placeholder="green" />
		</fieldset>

	<fieldset class="pure-group honeypot-field">
	<label for="honeypot">To help avoid spam, utilize a Honeypot technique with a hidden text field; must be empty to submit the form! Otherwise, we assume the user is a spam bot.</label>
	<input id="honeypot" type="text" name="honeypot" value="" />
	</fieldset>

		<button class="button-success pure-button button-xlarge">
		<i class="fa fa-paper-plane"></i> Send</button>
		</div>
Expand Down

3 changes: 3 additions & 0 deletions style.css

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,3 +35,6 @@ button {
		#name, #email {
		width: 50%;
		}
	.honeypot-field {
	display: none;
	}

Navigation Menu

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Added a React version of index.js and form-submission-handler.js #453

Are you sure you want to change the base?

Uh oh!

Added a React version of index.js and form-submission-handler.js #453

Filter by extension

Uh oh!

Uh oh!

Diff view

Diff view

Uh oh!

There are no files selected for viewing