1 Formulário de Contato DMDS com reCaptcha, Ajax e PHP

Formulário de Contato DMDS com reCaptcha, Ajax e PHP

Neste exemplo, vamos mostrar um formulário de contato para DMDS feito em HTML com Bootstrap e Ajax, que é usado para um usuário colocar seu nome, e-mail e telefone, e um e-mail de agradecimento foi enviado para eles por ter contatado, além disso para integrar seus dados com o DMDS.

reCAPTCHA

Para executar o reCaptcha, é necessário ter uma conta do Gmail e, com essa conta, fazer login nesta página https://www.google.com/recaptcha/ para registrar o URL que você deseja proteger, e é aí que você obtém um SiteKey e uma SecretKey.

O SiteKey é aquele que aparece no HTML abaixo, visível como data-sitekey.

O SecretKey é aquele usado no código PHP para se comunicar com o Google.

HTML con Bootstrap

Em seguida, criamos o arquivo HTML contact.html onde colocaremos o formulário, usando o Bootstrap como uma biblioteca base e o jQuery para as chamadas do Ajax.

Este é o cabeçalho do 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 é o CORPO 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 você pode ver no final, o arquivo app.js é incluído para que seja executado no final do carregamento HTML, é o código Javascript que contém o AJAX (o formulário HTML tem um ID “ajax-contact”, que é a variável de formulário que é extraída no começo do código Javascript. Também vemos no formulário, que a ação terminará chamando dmds-mailer.php para a sua execução, só que isso acontecerá através do javascript, que será quem chamará o dmds-mailer .php para a sua execução, e mostra o resultado no 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.');
 }
 });

});

});

O resultado do envio do Ajax será mostrado dentro do div chamado “form-messages” que aparece no final:

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

Conectar aO DMDS

Em seguida, o arquivo dmds-mailer.php, devemos primeiro resolver se é um robô ou não:

<?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! " ;
}

Uma vez que tenhamos certeza de que os dados do formulário foram ativados por uma pessoa, continuaremos com a remessa através do DMDS. Primeiro você deve ter seu SERVER_KEY fornecido pela Planisys para o serviço DMDS e, em seguida, ter criado uma campanha cujo ID está listado abaixo:

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

Então você deve extrair os campos do formulário higienizado (isto é, sem caracteres que possam implicar uma exploração):

 $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"]);

Então você deve inicializar o 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);

Inicialize a estrutura de dados que o server_key possui e a origem (isto é, a base do assinante) a ser usada:

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

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

Em seguida, chame a API para carregar o endereço de e-mail que acabou de ser inserido no banco de dados Suscriptos2015:

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

A próxima operação consiste em enviar uma confirmação por e-mail da assinatura para o usuário que preencheu o formulário, novamente inicializa a estrutura de dados e, em seguida, envia por meio do 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);

Criar uma campanha no DMDS

Para criar a campanha no DMDS, antes de mais nada, você precisa fazer o login no sistema com seu nome de usuário e senha. Quando estivermos dentro do sistema DMDS, criaremos a campanha. Na página principal está todo o menu DMDS, como visto na foto. Como você pode ver, há uma seção de campanhas, é aí que temos que configurar as coisas. Clique em “Nova campanha da API”, que nos permitirá criar a campanha.

Depois que clicamos em “Nova api de campanha”, uma nova janela é aberta com o formulário inteiro para criação. A criação é baseada em duas etapas, a primeira etapa é preencher os campos gerais, como o nome da campanha, alguma descrição dela, etc. É importante aqui preencher o campo nome, os outros campos são opcionais.

A segunda parte consiste em preencher os dados de envio. Os campos obrigatórios a serem preenchidos são o nome do remetente, o e-mail do remetente, adicionar os piezos por meio de um arquivo ou adicioná-los usando um URL. Todos os outros campos são opcionais. Depois que todos os campos estiverem preenchidos, clique no botão Salvar. Com essa ação, acabamos de criar nossa campanha.

A peça que precisa ser enviada deve ter o seguinte formato, com uma das três extensões html, htm ou tpl.

*Como adicionar a peça:

Para adicionar a peça, existem duas maneiras de fazer isso. A primeira opção é através da URL, como você pode ver na configuração da remessa, há uma seção que diz ‘Search Piece via URL’. Ao ativar essa parte, vemos a caixa de texto para adicionar o URL.

A segunda maneira de adicionar uma peça é enviar o arquivo diretamente para o DMDS.

* Tenha em mente que o formato da peça deve ser .hmt, .html ou .tpl.

Buscar en Planisys