juancarloscruzd/mandrill-api.html

## mandrill-api.html
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.1/normalize.css" type="text/css" media="screen">
		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js" /></script>
		<script type="text/javascript" src="https://mandrillapp.com/api/docs/js/mandrill.js"></script>

		<style>
			.main-wrapper{
				height: 800px;
				width: 562px;
				background: url('img/form.png');
				margin: 0px auto;
			}

			.thanks-wrapper{
				display: none;
				height: 800px;
				width: 562px;
				background: url('img/thanks.png');
				margin: 0px auto;
			}

			.voluntariado{
				display: block;
				width: 350px;
				padding: 300px 0px 0px 0px;
				margin: 0px auto;
			}

			input[type="text"], input[type="email"]{
				width: 300px;
				background: transparent;
				border: none;
				color: white;
				font-size: 15px;
				padding-left: 35px;
				outline: none;
				/*font-family: "Trebuchet MS";*/
			}

			.email{
				margin-top: 39px;
			}

			.telefono{
				margin-top: 45px;
			}

			select{
				margin-top: 44px;
				margin-left: 35px;
			}

			textarea{
				color: white;
				background: transparent;
				border: none;
				margin-top: 45px;
				margin-left: 30px;
				width: 80%;
				outline: none;
				resize: none;
				/*font-family: "Trebuchet MS";*/
			}

			.send{
				background: #369;
				color: white;
				border: #eee 1px solid;
				border-radius: 3px;
				font-size: 20px;
				padding: 10px 15px 10px 15px;
				margin: 20px 0px 0px 244px;
			}

			::-webkit-input-placeholder { /* WebKit browsers */
			    color:    white;
			}
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
			    color:    white;
			    opacity:  1;
			}
			::-moz-placeholder { /* Mozilla Firefox 19+ */
			    color:    white;
			    opacity:  1;
			}
			:-ms-input-placeholder { /* Internet Explorer 10+ */
			    color:    white;
			}

			.error-box{
				display: none;
			}

			.thanks{
				margin: 0px auto;
				width: 80%;
				text-align: center;
				padding-top: 210px;
				color: white;
				font-size: 40px;
			}
		</style>
	</head>
	<body>

		<div class="thanks-wrapper">
		<div class="thanks">
				<p>¡Gracias por tu generosa ayuda!</p>
		</div>
		</div>

		<div class="main-wrapper">
			<form id="voluntariado" class="voluntariado">
				<div class="error-box"></div>
				<input type="text" name="name" placeholder="Nombre y Apellido" class="name" value="">
				<input type="email" name="mail" placeholder="Correo Electrónico" class="email" value="">
				<input type="text" name="telefono" placeholder="Teléfono" class="telefono" value="">
				<select name="opcion" class="opcion">
					<option value="0">¿En qué deseas ayudar?</option>
					<option value="Ser Voluntario">Quiero ser Voluntario</option>
					<option value="Hacer una donacion">Quiero hacer una donación</option>
					<option value="Apadrinar un niño">Quiero apadrinar a un niño</option>
					<option value="Apadrinar un abuelito">Quiero apadrinar a un abuelito</option>
				</select>
				<textarea name="comentarios" class="comentarios" rows="5" placeholder="Escribe tus comentarios..."></textarea>
				<input type="button" value="Enviar" class="send">
			</form>
		</div>


	<script type="text/javascript">
		var opcion = "";
		$('.opcion').on('change', function() {
			opcion = $('.opcion').find('option:selected').val();
		});

		var m = new mandrill.Mandrill('KEY');

		var admins = [{"email":"email@example.com"}];
		$('.send').on('click', function(e){
			e.preventDefault();
			var name = $('.name').val();
			var email = $('.email').val();
			var telefono = $('.telefono').val();
			var comentarios = $('.comentarios').val();
			var params_admin = {
			"message": {
				"from_name": "NAME",
		        "from_email":"email@example.com",
		        "to":[admins],
		        "subject": "Hay una persona que quiere " + opcion,
		        "html": "<p>Hola soy " + name + ", mi mail es "+ email +" y mi telefono es "+ telefono +".</p><p> Quiero <strong> "+ opcion +" </strong> </p> <p>Comentarios: <br/> "+ comentarios +" </p>",
		        "autotext": true,
		        "track_opens": true,
				"track_clicks": true,
				}
			};

			var params_user = {
			"message": {
				"from_name": "NAME",
		        "from_email":"email@example.com",
		        "to":[{"email":email}],
		        "subject": "Gracias por tu ayuda",
		        "html": "<p>Hola *|NAME|*, nos hemos enterado que quieres *|OPCION|*.</p> <p>Gracias por tu generosa ayuda, nos comunicaremos contigo en breve.</p>",
		        "autotext": true,
		        "track_opens": true,
				"track_clicks": true,
				"merge_vars": [
		            {
		                "rcpt": email,
		                "vars": [
		                    {
		                        "name": "NAME",
		                        "content": name
		                    },
		                     {
		                        "name": "OPCION",
		                        "content": opcion
		                    }
		                ]
		            }
					]
				}
			};

			var send = true;

			if(name == ""){
				send = false;
			}

			if(email == ""){
				send = false;
			}

			if(telefono == ""){
				send = false;
			}

			if(opcion == "0"){
				send = false;
			}


			if(send === true){
				m.messages.send(params_admin, function(res) {
					 console.log(res);
					 $('.main-wrapper').slideUp().fadeOut();
					 $('.thanks-wrapper').slideDown().fadeIn();
				}, function(err) {
					console.log(err);
				});

				m.messages.send(params_user, function(res) {
					 console.log(res);
				}, function(err) {
					console.log(err);
				});
			} else {
				alert('Ups, hay errores en el formulario.');
			}
		});

	</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.1/normalize.css" type="text/css" media="screen">
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js" /></script>
	<script type="text/javascript" src="https://mandrillapp.com/api/docs/js/mandrill.js"></script>

	<style>
	.main-wrapper{
	height: 800px;
	width: 562px;
	background: url('img/form.png');
	margin: 0px auto;
	}

	.thanks-wrapper{
	display: none;
	height: 800px;
	width: 562px;
	background: url('img/thanks.png');
	margin: 0px auto;
	}

	.voluntariado{
	display: block;
	width: 350px;
	padding: 300px 0px 0px 0px;
	margin: 0px auto;
	}

	input[type="text"], input[type="email"]{
	width: 300px;
	background: transparent;
	border: none;
	color: white;
	font-size: 15px;
	padding-left: 35px;
	outline: none;
	/font-family: "Trebuchet MS";/
	}

	.email{
	margin-top: 39px;
	}

	.telefono{
	margin-top: 45px;
	}

	select{
	margin-top: 44px;
	margin-left: 35px;
	}

	textarea{
	color: white;
	background: transparent;
	border: none;
	margin-top: 45px;
	margin-left: 30px;
	width: 80%;
	outline: none;
	resize: none;
	/font-family: "Trebuchet MS";/
	}

	.send{
	background: #369;
	color: white;
	border: #eee 1px solid;
	border-radius: 3px;
	font-size: 20px;
	padding: 10px 15px 10px 15px;
	margin: 20px 0px 0px 244px;
	}

	::-webkit-input-placeholder { /* WebKit browsers */
	color: white;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: white;
	opacity: 1;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: white;
	opacity: 1;
	}
	:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: white;
	}

	.error-box{
	display: none;
	}

	.thanks{
	margin: 0px auto;
	width: 80%;
	text-align: center;
	padding-top: 210px;
	color: white;
	font-size: 40px;
	}
	</style>
	</head>
	<body>

	<div class="thanks-wrapper">
	<div class="thanks">
	<p>¡Gracias por tu generosa ayuda!</p>
	</div>
	</div>

	<div class="main-wrapper">
	<form id="voluntariado" class="voluntariado">
	<div class="error-box"></div>
	<input type="text" name="name" placeholder="Nombre y Apellido" class="name" value="">
	<input type="email" name="mail" placeholder="Correo Electrónico" class="email" value="">
	<input type="text" name="telefono" placeholder="Teléfono" class="telefono" value="">
	<select name="opcion" class="opcion">
	<option value="0">¿En qué deseas ayudar?</option>
	<option value="Ser Voluntario">Quiero ser Voluntario</option>
	<option value="Hacer una donacion">Quiero hacer una donación</option>
	<option value="Apadrinar un niño">Quiero apadrinar a un niño</option>
	<option value="Apadrinar un abuelito">Quiero apadrinar a un abuelito</option>
	</select>
	<textarea name="comentarios" class="comentarios" rows="5" placeholder="Escribe tus comentarios..."></textarea>
	<input type="button" value="Enviar" class="send">
	</form>
	</div>


	<script type="text/javascript">
	var opcion = "";
	$('.opcion').on('change', function() {
	opcion = $('.opcion').find('option:selected').val();
	});

	var m = new mandrill.Mandrill('KEY');

	var admins = [{"email":"email@example.com"}];
	$('.send').on('click', function(e){
	e.preventDefault();
	var name = $('.name').val();
	var email = $('.email').val();
	var telefono = $('.telefono').val();
	var comentarios = $('.comentarios').val();
	var params_admin = {
	"message": {
	"from_name": "NAME",
	"from_email":"email@example.com",
	"to":[admins],
	"subject": "Hay una persona que quiere " + opcion,
	"html": "<p>Hola soy " + name + ", mi mail es "+ email +" y mi telefono es "+ telefono +".</p><p> Quiero <strong> "+ opcion +" </strong> </p> <p>Comentarios: <br/> "+ comentarios +" </p>",
	"autotext": true,
	"track_opens": true,
	"track_clicks": true,
	}
	};

	var params_user = {
	"message": {
	"from_name": "NAME",
	"from_email":"email@example.com",
	"to":[{"email":email}],
	"subject": "Gracias por tu ayuda",
	"html": "<p>Hola \|NAME\|, nos hemos enterado que quieres \|OPCION\|.</p> <p>Gracias por tu generosa ayuda, nos comunicaremos contigo en breve.</p>",
	"autotext": true,
	"track_opens": true,
	"track_clicks": true,
	"merge_vars": [
	{
	"rcpt": email,
	"vars": [
	{
	"name": "NAME",
	"content": name
	},
	{
	"name": "OPCION",
	"content": opcion
	}
	]
	}
	]
	}
	};

	var send = true;

	if(name == ""){
	send = false;
	}

	if(email == ""){
	send = false;
	}

	if(telefono == ""){
	send = false;
	}

	if(opcion == "0"){
	send = false;
	}


	if(send === true){
	m.messages.send(params_admin, function(res) {
	console.log(res);
	$('.main-wrapper').slideUp().fadeOut();
	$('.thanks-wrapper').slideDown().fadeIn();
	}, function(err) {
	console.log(err);
	});

	m.messages.send(params_user, function(res) {
	console.log(res);
	}, function(err) {
	console.log(err);
	});
	} else {
	alert('Ups, hay errores en el formulario.');
	}
	});

	</script>
	</body>
	</html>