Send email with html form and javascript in harlowe :

0 votes
asked Sep 8 by ife (120 points)

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.

1 Answer

0 votes
answered Sep 8 by greyelf (37,150 points)

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.

commented Sep 29 by ife (120 points)
edited Sep 29 by ife
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
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...