How to send email with form submission on Netlify? - html

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.

Related

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 personalized links in a mail?

I'm setting up a solution for a backoffice website where the user should be able to send mail for some technician.
In this mail, the technician must be able to click on a specific button and this will open a new web page with adaptative parameters such as the date, the address, the client name, etc..
To do so, I need to send at least one parameter in the mail (the mission id of this technician) and this parameter must be different in each mail.
I already tried a solution in which the mail is written in HTML and then I could insert a form in the body or a link for a GET request. But it seems that not all the mail server can handle this way of work.
In Gmail it works for everything, but using Safari for Mac OS X, or Outlook messenger it doesn't.
Using POST:
<form action='__the_website_to_post_request__' method='post'>
<input name='id' type='hidden' value='$id'>
<button type='submit' formmethod='post'>Upload reports</button>
</form>
Using GET:
<a href='__the_website_to_post_request__?id=".$id."&tok=".md5($id)."'>
Upload reports
</a>
In Outlook, no button appears and in Safari, the post method doesn't work.
Maybe another solution exist doesn't matter which mail application I should use ?

How to make an email with submit button, which triggers a post request

I want to send an email which has a submit button, on click of which, a post request would be triggered.
How can I create such an email?
What kind of code would be required?
The code I have written:
<h1>Show a push button:</h1>
<p>The button below activates a JavaScript when it is clicked.</p>
<br/>
<input type="button" value="Click me" onclick="msg()">
That approach you appear to be trying to take is to use JavaScript. This absolutely will not work. Email clients do not allow JavaScript to execute in HTML formatted email.
You could place a regular form inside the email:
<form action="http://example.com" method="POST">
<button>Submit</button>
</form>
… however, form support in email clients is not perfect.
The safe approach is to ask the user to do a two-step process: use a regular link to a webpage containing the form which the user can load in their web browser and then click the submit button for.
If you don't care about the usual protections, then you could have JavaScript submit the form on that page automatically, or change the endpoint that expects a POST request to expect a GET request and use a regular link in the original email.

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.