1 Formulario de Contacto DMDS con reCaptcha, Ajax y PHP

Formulario de Contacto DMDS con reCaptcha, Ajax y PHP

En este ejemplo, mostraremos un formulario de contacto para DMDS hecho en HTML con Bootstrap y Ajax, que sirve para que un usuario coloque su Nombre, e-Mail y Teléfono, y se le envié un e-mail de agradecimiento por haberse contactado, además de integrar sus datos al DMDS.

reCAPTCHA

Para hacer funcionar el reCaptcha es necesario tener una cuenta Gmail, y con esa cuenta loguearse a esta página https://www.google.com/recaptcha/ para dar de alta la URL que se quiere proteger, y ahi es donde se obtiene una SiteKey y una SecretKey.

La SiteKey es la que figura en el HTML a continuación visible como data-sitekey.

La SecretKey es la que se utiliza en el código PHP para comunicarse con Google.

HTML con Bootstrap

Luego creamos el archivo HTML contact.html en donde pondremos el form, utilizando Bootstrap como biblioteca base y jQuery para llamadas Ajax.

Este es el HEADER HTML:

<!DOCTYPE html>
<html lang="es">

<head>

 <title>DMDS Contact Form</title>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

 <!-- jQuery library -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <!-- Popper JS -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

 <!-- Latest compiled JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

 <script src='https://www.google.com/recaptcha/api.js'></script>

</head>

Este es el BODY HTML

<body>
<div class="container-fluid">
<h2>Form de Contacto DMDS</h2>
<form id="ajax-contact" method="post" action="dmds-mailer.php">
<div class="field" >
    <label for="name" class="col-sm-3">Nombre:</label>
    <input type="text" class="col-sm-3" id="name" name="name" required >
 </div>

 <div class="field">
    <label for="email" class="col-sm-3" >Email:</label>
    <input type="text" class="col-sm-3" id="email" name="email" required >
 </div>

 <div class="field">
    <label for="telefono" class="col-sm-3" >Tel&eacute;fono:</label>
    <input type="text" id="telefono" class="col-sm-3" name="telefono" required>
 </div>

 <div class="field">
    <label class="col-sm-3">Auth:</label>
    <label class="g-recaptcha col-sm-3" name="g-recaptcha-response" data-sitekey="6LeYcX4UAAAAAB--CCmu0kOssB_l9--sLTxsJVFv"></label>
 </div>

 <div class="field col-sm-3">
    <button type="submit" class="btn btn-primary">Enviar</button>
 </div>
</form>
</div>
<div id="form-messages"></div>
<script src="app.js"></script>

</body>
</html>

Javascript AJAX

Como se puede ver al final, se incluye el archivo app.js para que sea ejecutado al final de la carga del HTML, es el código Javascript que contiene el AJAX (el formulario en HTML tiene un id “ajax-contact” , que es la variable form que se extrae al principio del código Javascript. También vemos en el formulario, que el action terminará llamando a dmds-mailer.php para su ejecución, sólo que ésto ocurrirá a través del javascript, que será quien llame a dmds-mailer.php para su ejecución, y muestre el resultado en el div “form-messages”:

$(function() {

// Get the form.
 var form = $('#ajax-contact');

// Get the messages div.
 var formMessages = $('#form-messages');

// Set up an event listener for the contact form.
 $(form).submit(function(e) {
 // Stop the browser from submitting the form.
 e.preventDefault();

// Serialize the form data.
 var formData = $(form).serialize();

// Submit the form using AJAX.
 $.ajax({
     type: 'POST',
     url: $(form).attr('action'),
     data: formData
 })
 .done(function(response) {
     // Make sure that the formMessages div has the 'success' class.
     $(formMessages).removeClass('error');
     $(formMessages).addClass('success');

     // Set the message text.
     $(formMessages).text(response);

     // Clear the form.
     $('#name').val('');
     $('#email').val('');
     $('#message').val('');
     })
 
 .fail(function(data) {
       // Make sure that the formMessages div has the 'error' class.
     $(formMessages).removeClass('success');
     $(formMessages).addClass('error');

// Set the message text.
 if (data.responseText !== '') {
 $(formMessages).text(data.responseText);
 } else {
 $(formMessages).text('Oops! An error occured and your message could not be sent.');
 }
 });

});

});

El resultado del envío Ajax se mostrará dentro del div llamado “form-messages” que figura al final:

<div id="form-messages"></div>

Conectar al DMDS

A continuación el archivo dmds-mailer.php, primero debemos resolver si se trata de un robot o no:

<?php

function tagSimple($k, $v)
 {
 return array(
 "tag" => $k,
 "reemplazo" => $v
 );
 }


$curl = curl_init();
curl_setopt_array($curl, array(
 CURLOPT_RETURNTRANSFER => 1,
 CURLOPT_URL => 'https://www.google.com/recaptcha/api/siteverify',
 CURLOPT_POST => 1,
 CURLOPT_POSTFIELDS => array(
 'secret' => 'Your-secret-password',
 'response' => $_POST["g-recaptcha-response"]
 )
));

$response = curl_exec($curl);
curl_close($curl);
$captcha_success = json_decode($response);

if (!$captcha_success->success) {
 echo "Eres un robot! " ;
}

Una vez nos hemos asegurado que los datos del formulario han sido accionados por una persona, continuamos con el envío a través del DMDS. En primer lugar debe disponer de su SERVER_KEY proporcionada por Planisys para el servicio DMDS, y luego tener creada una campaña cuyo id figura a continuación:

$serverKey = "BD39E7A0-3DE7-4039-8F11-625E9D2FDC10";
$url = "https://dmds-sunombre.planisys.net/api-wsdl.php";
$campanaId = "746eab3e-33a3-aebd-22f6-5bfe59db804a";

A continuación deberá extraer los campos del form sanitizados (ésto es, sin caracteres que puedan implicar un exploit):

 $nombre = strip_tags(trim($_POST["name"]));
 $nombre = str_replace(array("\r","\n"),array(" "," "),$nombre);
 $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
 $telefono = trim($_POST["telefono"]);

Luego debe inicializar el componente SOAP:

 //Configuracion del Cliente SOAP
 ini_set('soap.wsdl_cache_enabled', 0);
 $opt = array(
     "location" => $url,
     "uri" => "urn:xmethods-delayed-quotes",
     "style" => SOAP_RPC,
     "use" => SOAP_ENCODED
 );
 $client = new SoapClient($url."?wsdl", $opt);

Inicializa la estructura de datos que tiene el server_key y el origen (es decir la base de suscriptos) a utilizar:

$tagsNuevo = array(
 'simples' => array(
 tagSimple("XYZTELEFONOXYZ", $telefono),
 )
 );

$params = array(
 'suscriptos' => array(
 '0' => array(
 'email' => $email,
 'origenes' => array(
 '0' => 'Suscriptos2015'
 ),
 )
 ),
 'serverKey' => $serverKey
 );

Luego llama a la API para cargar la dirección de mail recién ingresada en la base Suscriptos2015:

 $client->__soapCall('cargarSuscriptos', $params);

La próxima operación consiste en enviar un e-mail de confirmación de suscripción al usuario que llenó el formulario, nuevamente inicializa la estructura de datos, y luego envía a través de SOAP:

$params1 = array(
'suscriptos' => array(
'0' => array(
'email' => $email,
'nombre' => $nombre,
'tags' => $tagsNuevo
)
),
'campanaId' => $campanaId,
'soloSuscribir' => false,
'email' => array(
array(
'piezaEnUtf8' => true,
),
),
'serverKey' => $serverKey
);
$client->__soapCall('enviarEmails', $params1);

Crear una campaña en DMDS

Para crear la campaña en DMDS, primero de todo hay que loguearse al sistema con su usuario y contraseña. Una vez estamos dentro del sistema DMDS, vamos a crear la campaña. En la página principal esta todo el menú de DMDS, tal como se ve en la foto. Como se ve hay un apartado de campañas, allá es donde nos toca configurar las cosas. Clicamos sobre ‘Nueva Campaña API’, que nos permitirá crear la campaña.

Una vez hemos clicado sobre ‘Nueva Campaña Api’, se nos abre una nueva ventada con todo el formulario para la creación. La creación se basa en dos etapas, la primera etapa consiste en rellenar los campos generales, como el nombre de la campaña, alguna descripción de esta, etc.. Es importante aquí rellenar el campo de nombre, los otros campos son opcionales.

La segunda parte consiste en rellenar los datos de Envio. Los campos obligatorios a rellenar es el nombre de remitente, el mail del remitante, añadir las piezar mediante un archivo o añadir esas mismas usando una url. Todos los otros campos son opcionales. Una vez rellenados todos los campos, clicamos en el botón guardar, con esta acción acabamos de crear nuestra campaña.

La pieza que se tiene que subir debe tener el siguiente formato, con una de las tres extenciones html, htm o tpl.

*Como añadir la pieza:

Para poder añadir la pieza hay dos maneras de hacerlo. La primera opción es mediante la url, tal como se ve en la configuración del envío hay un apartado que dice ‘Buscar Pieza via URL’. Activando esta parte, nos aparece text box para poder añadir la dirección URL.

La segunda manera de añadir una pieza es subiendo el archivo directamente a DMDS.

*Tener en cuenta, que el formado de la pieza tiene que ser .hmt, .html o .tpl.

Buscar en Planisys