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

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);.

Related

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}

Posting data to HtmlService from separate form

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.

How do I make a simple email form submission in HTML?

I tried w3schools but it didn't help and I tried other websites too. I just wanna make a short html script that sends an email to an email address, but I keep reloading my email inbox and nothing comes up. Can you help?
<form action="MAILTO:MY_EMAIL#yahoo.com" method="post" enctype="text/plain">
<input type="text" name="email" value="Email">
<input type="text" name="message" value="Message">
<input value="Submit" type="submit">
</form>
You need to use a server side script here. HTML alone won't help you here. HTML is just the frontend logic. You need some script on backend that accepts this data you submit and actually sends out an email. To take the example in PHP, assuming u have the server set up and all or that your shared
<form action="sendmail.php" method="post" enctype="text/plain">
<input type="text" name="email" value="Email">
<input type="text" name="message" value="Message">
<input value="Submit" type="submit">
</form>
sendmail.php
$email=$_POST['email'];
$message=json_encode($_POST);
$receiver="MY_EMAIL#yahoo.com";
$mailer="mailer#myservice.com";
mail($email,"Message for enquiry or whatever",$message, array("from"=>$mailer));
There were, at some point, browsers that supported forms of this type. However, they're all gone now -- you will need a server-side script to send email. It's impossible to do using HTML alone.
You are confusing a few things.
When you Submit a form, it goes from the client (browser) to your server, which acts upon it. The form action needs to be a URL which handles the request. The mailto: URI scheme is not a valid action to use.
You have two choices:
You can create a mailto: link like this:
Send email
which will open your default email client,
OR
You can put a URL corresponding to an end point on your server, something like
form action="/send/mail"...
and have your server send the email
I believe the easiest way to do this is using a service like Zapier or IFTTT. Both of them offer a way to create Zaps/Applets that can send an email when you post to a specific url.
This is what configuration would look like in IFTTT and Zapier .
IFTTT is simpler to setup, Zapier has more options, like sending to more than one emails. I believe IFTTT only lets you send to your account's email.

I want to pass form data from my website to a website not owned by me

I want to create a donation form on my website that forwards donors to the PayPal donation page at wikileaks.org. Wikileaks allows donations targeted for specific causes that Wikileaks supports. My website is fundraising for one of these causes.
My form won't pass any secure information like credit card #s, etc. I want it to send only the amount my visitors wish to donate, and the name of my charitable cause.
Here is some sample code: donate.htm
<html><head></head>
<body>
How much would you like to donate?
<form action="receive.php" method="get">
<label for="25">25</label>
<input name="amount" type="radio" value="25"></input>
<label for="50">50</label>
<input name="amount" type="radio" value="50"></input>
<input type="submit" value="Send" />
</form>
</body>
</html>
And here : receive.php
<html><head></head>
<body>
<form>
<input type="text" value="<?php echo $_GET['amount'] ?>"/>
</form>
</body>
</html>
This works because I own both pages. I don't own the wikileaks page, which may or may not run on PHP. My goal is to post "Hello Wikileaks" to the 'custom' form field below which is located at http://www.wikileaks.org/wiki/Special:Support#go_pp
I should be able to figure out the rest if I can accomplish this.
<label>Message with your donation</label>
<input class='text' name='custom' type='text' value='' />
This is most likely not possible, as there would have to be PHP (or other) code actively adding the value from the GET parameter inside the target page. Doing that in a PayPal payment form would not be very security conscious.
There is no Javascript workaround either, because you can't access the DOM of a page on another server from within your page (Single Origin Policy).
You will have to talk to Wikileaks and ask them whether there is any way to add the message.
As the form on wikileaks directly posts its data to PayPal I think your chances of success are limited. The wikileaks page does no processing of form data. Neither can you access the wikileaks form via Javascript from your page due to security restrictions.
You could however directly post to PayPal, thus copying the form from Wikileaks directly to your page and forwarding the user to PayPal.
If you don't mind submitting the form straight to Paypal on Wikileak's behalf, just copy the form's HTML from that page, including action='https://www.paypal.com/cgi-bin/webscr'.
You cannot, under no circumstances, decide with which data a field on a foreign website will be pre-filled. That's entirely up to the author of the foreign website.
What about another way:
The WikiLeaks PayPal donation form has its form action set to PayPal (which is how PayPal donations work), which means that no form data is posted to WikiLeaks itself.
If you want to offer your visitors a possibility to donate to WikiLeaks via PayPal, why don't you simply include the WikiLeaks donation form in your own website? Change the custom form field type from text to hidden and enter your charitable cause statically.
In either case, the visitor will be redirected to PayPal to authorize the payment.