Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify the custom form javascript #1

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Simplify the custom form javascript #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1db9e94
Decouple the form submit javascript from the form input fields.
peteonrails Oct 14, 2014
af99f67
DRY up the javascript in index.html
peteonrails Oct 14, 2014
340930c
DRY up the javascript in index.html
peteonrails Oct 14, 2014
b98cf73
Update readme to match updated javascript
peteonrails Oct 14, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 4 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,14 @@ Submit to a google spreadsheet using a form of your own design.

* Now view the source of your question input field, and copy the `name` attribute, ex: `entry.1000000`. Do the same with the submit button, ex: `<input type="submit" name="submit" value="Submit">`.

* Replace the `baseURL` in the index.html file with the form action URL you copied from your Google Form.

* Replace the `submitRef` variable in the index.html file with the name and value from your submit button, ex: `&submit=Submit`.

* In our form, we are collecting names, so we've given our form an ID of `input-form` and we've given our field an ID of `input-name`. You should change this to whatever information you are collecting in your form, and change the javascript so that JQuery is grabbing the right field's value. For example, if your form has an ID of `emailForm` and your field has an ID of `input id="emailField"` your javascript should be changed to:
* Make sure references to '#input-form' are changed to match the ID of your form. For example, if your form has an ID of `emailForm` your javascript should be changed to:

```
$('#emailForm').one('submit',function(){
var inputField = encodeURIComponent($('#emailField').val());
...
$('#email').addClass('active').val('Thank You!');
var submitURL = ($('#emailForm').attr('action') + '?' + $('#emailForm').serialize());
$(this)[0].action = submitURL;
});

```

* Style your page how you like, put in any sort of behavior you want to have happen when someone submits an entry (we're just having the form field say 'Thank You!'), then put these files on a web server somewhere, and you should now be able to submit data to your custom form, and see it appear in your Google Spreadsheet.
8 changes: 2 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,8 @@

<script>
$('#input-form').one('submit',function(){
var inputName = encodeURIComponent($('#input-name').val());
var baseURL = 'https://docs.google.com/forms/d/18LD6ueL10_lLVAKpDgfmLpUBlzoRFEZSoMod57MXfH0/formResponse?entry.1000000=';
var submitRef = '&submit=Submit';
var submitURL = (baseURL + inputName + submitRef);
console.log(submitURL);
$(this)[0].action=submitURL;
var submitURL = ($('#input-form').attr('action') + '?' + $('#input-form').serialize());
$(this)[0].action = submitURL;
$('#input-name').addClass('active').val('Thank You!');
});
</script>
Expand Down