Landing, CSS , AJAX y PHP

Landing, CSS , AJAX y PHP / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Landing, CSS , AJAX y PHP

Landing formulario Ajax

Específicamente creada para solucionar las dudas de los clientes potenciales de la empresa Politel, mientras desde Pamicom construimos su web.

Realizada con Bootstrap, destaca el CSS y su formulario con AJAX y PHP

El titulo "¡En construcción!" esta creada con una animación que lo hace aparecer y desaparecer con un efecto de desenfoque.

<h1 class="display">
    <span>¡En</span> 
    <span>construcción!</span>
</h1>

El CSS:

	h1 span {
	  color: transparent;
	  animation: blur 10s ease-out infinite;
	  -webkit-animation: blur 10s ease-out infinite;
	  -moz-animation: blur 10s ease-out infinite;
	  -o-animation: blur 10s ease-out infinite;
	  -ms-animation: blur 10s ease-out infinite;
	}

	h1 span:nth-child(1) {
	  animation-delay: 0.1s;
	  -webkit-animation-delay: 0.5s;
	  -moz-animation-delay: 0.5s;
	  -o-animation-delay: 0.5s;
	  -ms-animation-delay: 0.5s;
	}

	h1 span:nth-child(2) {
	  animation-delay: 0.2s;
	  -webkit-animation-delay: 0.6s;
	  -moz-animation-delay: 0.5s;
	  -o-animation-delay: 0.5s;
	  -ms-animation-delay: 0.5s;
	}

	@keyframes blur {
	  0%    {text-shadow:  0 0 100px #ff6347; opacity:0;}
	  5%    {text-shadow:  0 0 90px #ff6347;}
	  15%   {opacity: 1;}
	  20%   {text-shadow:  0 0 0px #ff6347;}
	  80%   {text-shadow:  0 0 0px #ff6347;}
	  85%   {opacity: 1;}
	  95%   {text-shadow:  0 0 90px #ff6347;}
	  100%  {text-shadow:  0 0 100px #ff6347; opacity:0;}
	}

	@-webkit-keyframes blur {
	  0%    {text-shadow:  0 0 100px #ff6347; opacity:0;}
	  5%    {text-shadow:  0 0 90px #ff6347;}
	  15%   {opacity: 1;}
	  20%   {text-shadow:  0 0 0px #ff6347;}
	  80%   {text-shadow:  0 0 0px #ff6347;}
	  85%   {opacity: 1;}
	  95%   {text-shadow:  0 0 90px #ff6347;}
	  100%  {text-shadow:  0 0 100px #ff6347; opacity:0;}
	}

	@-moz-keyframes blur {
	  0%    {text-shadow:  0 0 100px #ff6347; opacity:0;}
	  5%    {text-shadow:  0 0 90px #ff6347;}
	  15%   {opacity: 1;}
	  20%   {text-shadow:  0 0 0px #ff6347;}
	  80%   {text-shadow:  0 0 0px #ff6347;}
	  85%   {opacity: 1;}
	  95%   {text-shadow:  0 0 90px #ff6347;}
	  100%  {text-shadow:  0 0 100px #ff6347; opacity:0;}
	}

	@-o-keyframes blur {
	  0%    {text-shadow:  0 0 100px #ff6347; opacity:0;}
	  5%    {text-shadow:  0 0 90px #ff6347;}
	  15%   {opacity: 1;}
	  20%   {text-shadow:  0 0 0px #ff6347;}
	  80%   {text-shadow:  0 0 0px #ff6347;}
	  85%   {opacity: 1;}
	  95%   {text-shadow:  0 0 90px #ff6347;}
	  100%  {text-shadow:  0 0 100px #ff6347; opacity:0;}
	}

La animación del footer, esta sacada de Codepen pertenece a MarianArt.

El formulario Dos archivos, JS y PHP:

El usuario recibe una copia en su mail.

jQuery


	$("#formEmail").submit(function(event) {
  // Enviamos el formulario usando AJAX
  console.log($(this).serialize());
    event.preventDefault();
       $.ajax({
            type: "POST",
            url:’envio.php’,
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                console.log(data);
                $("#result").html(data);
                window.location.href = "url de nuetra landing";
            }
        });

Envio.php


	function enviarEmail($fields){
	    $url = "url donde alamacenar los formularios";
	    $fields_string = http_build_query($fields);
	    $ch = curl_init();
	    curl_setopt($ch, CURLOPT_REFERER, $_SERVER["SERVER_ADDR"]);
	    curl_setopt($ch, CURLOPT_URL, $url);
	    curl_setopt($ch, CURLOPT_POST, count($fields));
	    curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
	    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	    $result_curl = json_decode(curl_exec($ch), true);
	    curl_close($ch);
	    
	    return $result_curl;
	}

	$fields = array (
	    "to" => "mail donde se van a enviar los formularios",
	    "template" => "politel_contacto",
	    "account" => "mail de la bbddd",
	    "body_replaces" => array (
	        "{NAME}" => $_POST["name"],
	        "{SURNAME}" => $_POST["surname"],
	        "{EMAIL}" => $_POST["email"],
	        "{EMPRESA}" => $_POST["empresa"],
	        "{MESSAGE}" => $_POST["message"]
	    )
	);

	$result = enviarEmail($fields);
	$mng="";
	if($result["status"] == "ok"){
	    $mng= "Mensaje enviado, revisa tu carpeta de Spam";
	    
	}elseif($result["status"] == "error"){
	    $mng= "Error en el envio, intentalo de nuevo";
	}

	$fields = array (
	    "to" => $_POST["email"],
	    "template" => "politel_respuesta",
	    "account" => "mail de la bbddd",
	    "body_replaces" => array (
	        "{NAME}" => $_POST["name"],
	        "{SURNAME}" => $_POST["surname"],
	        "{EMAIL}" => $_POST["email"],
	        "{EMPRESA}" => $_POST["empresa"],
	        "{MESSAGE}" => $_POST["message"]
	    )
	);
	$result = enviarEmail($fields);

Puedes visitar esta landing, mientras construimos la web definitiva.

Mariano J.

Escribe un comentario

Tu email no se hará visible