Posting data to HtmlService from separate form - google-apps-script

I recently noticed that you cannot embed a HtmlService app in a non Google Sites site.
What I was wanting to do is have a chrome extension which was a simple form to capture feedback from users. The form would be powered by HtmlService and the data from the form captured in a spreadsheet. I know, you could do this with Google Forms, but the design and layout are not good enough to encourage users to complete the form as regularly as we wish.
As I can't embed the HtmlService apps as an iframe in the popup.html in my extension I'm wondering if I can simple have a form with a post action back to the HtmlService app.
Is this possible to have the post go back to the app? If so what would the post look like and what would the function look like to capture this data?

I have done this a couple of ways, but I ended up doing a simple local html page with a form:
<form action="yourScriptURL" method="get">
<input type="text" name="firstName" />
<input type="text" name="lastName" />
</form>
And then in your apps script:
function doGet(GETVARS){
var firstName = GETVARS.parameters.firstName;
var lastName = GETVARS.parameters.lastName;
Logger.log(firstName + " " + lastName);
//return Whatever you want here, HtmlService, UiApp, ContentService, etc
}
If you wanted, you can set the correct SCP info in your Chrome Extension/App and use JSONP to do this via AJAX. Works pretty well actually - you just need to plan out how the script is authorized, how the user is authenticated (or not) to use it, etc. It's really not as bad as it sounds.

Related

why i still getting spam emails after installing reCaptcha v3

I have installed google recaptcha v3 in my html form but i'm still getting spam emails, what should i do next to prevent spams ? Any way without using php code only js scripts ?
My code is using this one :
<script src="https://www.google.com/recaptcha/api.js"></script>
Add a callback function to handle the token.
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
Add attributes to your html button.
<button class="g-recaptcha"
data-sitekey="reCAPTCHA_site_key"
data-callback='onSubmit'
data-action='submit'>Submit</button>
You have to verify the captcha request server side. You are likely getting hit with spambots. Having only client side validation will only work against most humans, not bots.
Bots do not care if your client side has reCAPTCHA as they likely reading your HTML form's action URL and directly sending a POST request to it without your validation script - in short they are bypassing reCAPTCHA and other client side validation.
You should also be warry of posting your email address directly on your site as they often get scraped and spammed as well. Here is an old post that talks about obfuscation of on site email address to prevent spam.
Try this
function submit(e) {
e.preventDefault();
var response = grecaptcha.getResponse();
if (response.length == 0) {
//reCaptcha not verified
} else {
//reCaptch verified
document.getElementById("demo-form").submit();
}
}
<script src="https://www.google.com/recaptcha/api.js"></script>
<form onsubmit="submit();">
<input type="text" name="name">
<button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key" data-callback='submit' data-action='submit'>Submit</button>
</form>
Change the right key in there !

How to specify an URL after the submission of a form?

This is hypothetical but I wonder if this is possible.
Let's say I have a single input form on a page of my website that collects emails.
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
Once the button is clicked, I use a third-party service (say Zapier) to get a unique & public URL that is external to my website (say a link to a newly created Trello board).
Pseudocode
When someone submit his email in my form
Zapier is triggered and creates a new public Trello board
Zapier posts back the URL of the Trello board
The person is redirected to the Trello board
Is there a way to perform this?
I'm not familiar with redirections yet. Maybe there's a way to redirect temporarily (302?) until the Trello URL posted by Zapier is catched, leading to the right redirection.
If it's not feasible, how would you handle this?
Thanks for your help!
It is possible. Process the email address on the server side: Trigger the Zapier board creation and get the URL back from them. Then redirect the user to his new Trello board. For example, in PHP you execute header('Location: ' . $trelloBoardURL);.

How to send email with form submission on Netlify?

I am making a website for a restaurant and I want to make a reservation form where people would enter their name, time of reservation, etc. And when they submit this form I want to send an email to my email.
I know there is a service called Zapier which gives you the ability to do that, but I am looking for something free (in this case Zapier free tier has only 100 tasks per month which may not be enough).
I would want it to look something like this:
<form>
<input type="text" placeholder="Your name" />
<!-- and some other inputs -->
<input type="submit" value="Send" />
<!-- after this send an email with entered information -->
</form>
If you're hosting your site on Netlify you can use their feature "Netlify forms" which is free and easy to integrate (just add a custom "netlify" attribute to your HTML form element). Here are their docs:https://docs.netlify.com/forms/setup/#html-forms
Netlify also helps you with spam/robot protection before (e.g. via a so called "honeypot" field) and after submit (e.g. via a tool called "akismet").
Then you can set up email notifications, which will send you the data of the submitted form to your email inbox of choice. Here are their docs: https://docs.netlify.com/forms/notifications/
Instead of using Netlify or Zapier, you might just want to use getsimpleform.com as the form endpoint. As far as I know, the service is free and sends you an email on form submission.

How to submit HTML form into a Sheet?

I've checked around and most things I've found are from 2012 and workarounds for a then-existent bug. Unfortunately I'm not understanding Google's documentation on this very well.
I have a script project that is serving a web page to visitors with an HTML form:
<form id="gradingform">
<input type="text" name="name" placeholder="Name">
<input type="number" name="grade" placeholder"100">
<input type="submit" onclick="<this is where I'm having issues>">
</form>
I believe that this needs to be handled like any other time getting a script while serving a web page - by using the google.script.run. With a form specifically, I think that it's supposed to be using a success handler, so for example, something along the lines of
google.script.run.withSuccessHandler(gradeSubmitted).recordGrades()
gradeSubmitted() would be a function that just dispays a message, easy enough by doing some easy div changing. What my real issue is what recordGrades() would be like.
How do I pass the form to this function, and how do I collect the information from the form? From there I will be adding it to a Sheet, which is easy enough once the information is in an array because I can just append it. The documents say the form information should be passed as a Blob, but Google's example is kind of confusing.
This is what you have to do
onclick="google.script.run.withSuccessHandler(gradeSubmitted).recordGrades(this.form)"
And in the code.gs file you will be receiving a json as
[16-03-25 10:51:51:046 IST] {grade=10, name=Anees}

Embedded Google form in email?

I'm embedded Google form in email by Google apps script but the form doesn't submit correctly from Outlook and from iPhone. It works from Google Mail client only?
Is there's away to solve this problem of submission from iphone or outlook?
Thanks
Amany
To use forms embedded in emails, the email client needs to support html forms. Outlook has its own forms, but does not support the html form element (reference). I haven't found a reference for iPhone, but it's likely that it also limits the html support. (I use the gmail client on my phone... it supports forms.)
If you're using the code from Send form by email and track responses in spreadsheet, then you can extend your script to provide a doGet function for users that don't have HTML Forms support in their email clients.
The previous gist has been updated with these changes. (Actually, the gist already had the doGet() function.)
Code.gs
Extend this code by adding a doGet() function, which will host the exact same form that you're embedding in the email.
/**
* GET handler to provide alternate online form.
*/
function doGet() {
// Build survey body
var template = HtmlService.createTemplateFromFile('emailTemplate');
template.scriptUrl = ScriptApp.getService().getUrl();
template.serialNumber = getGUID(); // Generate serial number for this response
var app = template.evaluate();
return app;
}
Make the following modification to the sendSurvey() function:
var plainText = 'Please complete this survey online at: ' + scriptUrl;
html += '<p>Alternatively, you may complete this survey online.';
// Send email form
GmailApp.sendEmail(recipient, subject, plainText, {htmlBody:html} );
Now, recipients without HTML support in their email client will have a plain text message with an address they can paste into a browser, while HTML clients without <FORM> support will have a clickable link to the online form.