Send email with html form and javascript in harlowe :

Question

I want to send values in a variable to email of users. I have created a form that users can write their email addresses in.

form method="post" action="">
<input type = "email" id="email_address" placeholder="Enter your email address..." required>
    <button onclick="">Send Email</button>
</form>

How can I sent the email without using mailto:. I also want to navigate to a different passage after users have entered their email address.

I will appreciate your help on this.

Answer 1

There are a number of potential solutions to your request depending on the exact environment you are using or have access to. 

Are you hosting your story HTML file on a web-server with a mail-server installed or have access to a mail-server?
If you do then it may be possible to use AJAX or a third-party Javascript library to send an email via that mail-server.

If you don't have access to a mail-server then your next option is to use Javascript to access a service like EmailJS.com (**) and it will send the email for you.
** This is an example not a recommendation, as I have never used that particular service provider myself.

If you don't want to use a service like the above then your third option is to use the mailto: protocol, which is flaky at the best of times because it relies on the end-user's email client & operating system being setup correctly to handle those requests.

warning: I may of missed some options as it's been a while since I needed to write code to send emails this way, and memory isn't what it used to be.

Comments

Thanks Greyelf. I am using Mandrillapi because I don't have my own email server. I have these codes to use with the mandrillapi:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  
 function sendEmail() {

$.ajax({
            type: "POST",
            url: "https://mandrillapp.com/api/1.0/messages/send.json",
            data: {
                "key": "xxxxx",
                "message": {
                    "from_email": "fxxxx",
                    "to": [{ email: "xxxxx", type: "to" }],
                    "cc": [{ email: document.getElementById('mail').value, type: "cc" }],
                    "autotext": "true",
                    "subject": "Your Profile",
                    "html": "Thank you for completing this survey"     }
            }
        }).done(function (response) {
          
            var success = response[0] && response[0].status == "sent";
            if (success) {
               console.log("success")
            } else {
               console.log(response)
            }
        });}
        </script>

I have also a prompt on the previous passage :

<div id = "mail">(set: $email to (prompt: "Please enter your email address:", ""))

but it doesn't work. I put the script within the javascript story but it throws an error. When I put it in the passage, it doesn't throw any error.

Am I accessing the value of the email correctly? Do you know why it isn't working?

Thank you