Skip to content

Instantly share code, notes, and snippets.

@kidGodzilla
Last active April 26, 2023 19:57
Show Gist options
  • Save kidGodzilla/bdd453129a1e30ac9d86b9fd7b412ca8 to your computer and use it in GitHub Desktop.
Save kidGodzilla/bdd453129a1e30ac9d86b9fd7b412ca8 to your computer and use it in GitHub Desktop.
MailThis.to Ajax Example
// The following example POSTS data to mailthis.to, redirects the user to a confirmation page, and then sends an email (upon the successful completion of Recaptcha verification)
$.post('https://mailthis.to/[email protected]', {
email: '[email protected]',
_subject: 'hi!',
message: 'Test'
}).then(function () {
location.href = 'https://mailthis.to/confirm'
});
@ramit-mitra
Copy link

Will the above code work if I skip the line "location.href = 'https://mailthis.to/confirm'" ?

@xxillyap
Copy link

xxillyap commented Aug 6, 2019

Hello! I have just started programing so probably the solution is very simple. Anyway, as I understand it I need to add the " location.href = 'https://mailthis.to/confirm'" code in but the problem is that I am not sure where to add it. It would be amazing if anyone could help me out! Thank you!

$(function() {
$("#contactForm input,#contactForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(" ") >= 0) {
firstName = name
.split(" ")
.slice(0, -1)
.join(" ");
}
$this = $("#sendMessageButton");
$this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
$.ajax({
url: "https://mailthis.to/[email protected]",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
message: message
},
cache: false,
success: function() {
// Success message
$("#success").html("

");
$("#success > .alert-success")
.html(
"×"
)
.append("");
$("#success > .alert-success").append(
"Your message has been sent. "
);
$("#success > .alert-success").append("
");
//clear all fields
$("#contactForm").trigger("reset");
},
error: function() {
// Fail message
$("#success").html("
");
$("#success > .alert-danger")
.html(
"×"
)
.append("");
$("#success > .alert-danger").append(
$("").text(
"Sorry " +
firstName +
", it seems that my mail server is not responding. Please try again later!"
)
);
$("#success > .alert-danger").append("
");
//clear all fields
$("#contactForm").trigger("reset");
},
complete: function() {
setTimeout(function() {
$this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
}, 1000);
}
});
},
filter: function() {
return $(this).is(":visible");
}
});

$('a[data-toggle="tab"]').click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});

/*When clicking on Full hide fail/success boxes */
$("#name").focus(function() {
$("#success").html("");
});

@rogeriorioli
Copy link

rogeriorioli commented Nov 25, 2019

if you need use react u can use this hook

import React, { useState } from "react"
import axios from 'axios'


function ContatoPage() {
  const [contact, setContact] = useState({})


  const getValues = e => {
    e.persist()
    e.preventDefault()
    setContact(contact => ({ ...contact, [e.target.name]: e.target.value, assunto : 'contato do site' }))
    
  }
  const sendContact = (e) => {
    e.preventDefault()
        axios.post('https://mailthis.to/rogeriorioli', contact).then(response => {
          window.location.href = 'https://mailthis.to/confirm'
        }).catch(err => {
          err = 'oh fuck '
        })
  }
  return (
      <main>
        <div className="container">
          <article>
            <div className="col">
              <h2>Fale Conosco</h2>
              <form onSubmit={sendContact}  encType="multipart/form-data">
                <input type="text" name="nome" placeholder="Seu Nome" onChange={getValues}/>
                <input type="email" name="email" placeholder="[email protected]"  onChange={getValues} />
                <textarea placeholder="escreva sua mensagem" name="message"  onChange={getValues}></textarea>
                <button type="submit">Enviar</button>
              </form>
            </div>
            <div className="col"></div>
          </article>
        </div>
     </main>
    </Layout>
  )
}

export default ContatoPage```

@daksamedia
Copy link

I tried this up but none of this worked.

@erwindemoel
Copy link

Is it possible to use an ajax POST call, without having to redirect our users away from our website? We want to do an asychronous call in the backend to send our email without a redirect.

@CodeAlDente
Copy link

You received this because you signed up for MailThis.to, a form to email se=
rvice. <br><br><br><br>Have a Wonderful Day!<br><br><img src=3D"https://u94=
00108.ct.sendgrid.net/wf/open?upn=............../>

ref https://sendgrid.com/docs/ui/account-and-settings/tracking/#open-tracking

A tracking pixel inside the mail. Come on @kidGodzilla, seriously?

@kidGodzilla
Copy link
Author

Original author here. Thanks for your comments, I didn't get these replies because the service was sold a few years back.

However, it appears it was abandoned by the purchaser, and I have began restoring service. Things should be online now.

@CodeAlDente This appears to be a SendGrid default, or something enabled recently by the previous owner. I'll take a look.

@skiwheelr
Copy link

How can i send a file using this?
I learned that $.post cannot be used to send a file, so i need to use $.ajax.
What would the syntax be?

@skiwheelr
Copy link

skiwheelr commented Sep 15, 2020

export const SendMail = () => {
	// $.post('https://mailthis.to/[email protected]',{
	// 	email: '[email protected]',
	// 	_subject: 'hi!',
	// 	message: 'Test',
	// 	file: './dgsl.png'
	// }).then(function () {
	// 	window.location.href = 'https://mailthis.to/confirm'
	// });

	$.ajax({
		url: 'https://mailthis.to/ski******@gmail.com',
		type: 'post',
		data: {
			email: '[email protected]',
			_subject: 'hi!',
			message: 'Test',
			file: './dgsl.png'
		},
		headers: {
			encType:'multipart/form-data',
		},
		dataType: 'json',
		success: function (data) {
			console.info(data);
		}
	});
};

@mhadianfard
Copy link

Not sure if anyone is still working on this project, but the basic HTML form isn't redirecting people back to where they should go using the following input tag:

.... anyone else have this problem?

not even trying to do anything with JS.

@Nikita244
Copy link

hello
Can i change this? location.href = 'https://mailthis.to/confirm'
im working on angular and if i delete this code part, the email dosent arrived.
thanks a lot

@ramit-mitra
Copy link

Hi @Nikita244 you need to submit the form to mailthis.to else the form data will not get processed, and neither will you get the submission email. MailThis processes the form submission data and sends out the email so your form needs to submit the formdata to mailthis. Hope it helps!

@Nikita244
Copy link

Nikita244 commented Dec 30, 2022 via email

@anbu-ops
Copy link

Can someone provide how does this work in angular

@ramit-mitra
Copy link

Can someone provide how does this work in angular

The example is pretty self explanatory. I remember having implemented in AngularJS years ago and it worked fine. So IMO the above should work fine for Angular & React. Hope it helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment