Contact form 7 con fecha de envío

Para tener un formulario con el plugin de contact form 7 con fecha de envío necesitamos crear un formulario con los campos deseados y añadimos un input oculto con un valor por ejemplo 0000.

[fusion_builder_container hundred_percent=»yes» overflow=»visible»][fusion_builder_row][fusion_builder_column type=»1_1″ background_position=»left top» background_color=»» border_size=»» border_color=»» border_style=»solid» spacing=»yes» background_image=»» background_repeat=»no-repeat» padding=»» margin_top=»0px» margin_bottom=»0px» class=»» id=»» animation_type=»» animation_speed=»0.3″ animation_direction=»left» hide_on_mobile=»no» center_content=»no» min_height=»none»]

Contact form 7 con fecha de envío
Contact form 7 con fecha de envío

Código del formulario Contact form 7

<p>* Tu nombre<br />
    [/fusion_builder_column][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][text* nombre] </p>

<p>* Tu Correo<br />
    [email* correo] </p>

<p>* El Asunto<br />
    [text* asunto] </p>

<p>* Tu Mensaje<br />
    [textarea mensaje] </p>

<input type="hidden" name="fechaenvio" value="0000">

<p>[submit "Enviar"]</p>

Implementamos la carga de archivos

Ahora cargaremos en nuestro header del tema las siguientes líneas de código para poder utilizar tanto jQuery como implementar nuestros scripts. El código lo pegamos justo antes de la etiqueta de cierre del head.

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    //Esta es la ruta a nuestro tema
    //Dentro de nuestro tema creamos una carpeta js y dentro creamos nuestro archivo scripts.js
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/scripts.js"></script>
</head>

Código jQuery para implementar la hora

En nuestro archivo recién creado scripts.js alojado en nuestro tema dentro de la carpeta /js ponemos las siguientes líneas de código:

// JavaScript Document
jQuery(document).ready(function() {

	jQuery('input[name=fechaenvio]').val(GetTodayDate);

	function GetTodayDate() {
	   var tdate = new Date();
	   var dd = tdate.getDate(); //yields day
	   var MM = tdate.getMonth(); //yields month
	   var yyyy = tdate.getFullYear(); //yields year
	   var xxx = dd + "-" +( MM+1) + "-" + yyyy;

	   return xxx;
	}
});

Este código cambia el valor del input con el nombre fechaenvio por la fecha actual.

Modificamos nuestro formulario para recibir la fecha

Ahora sólo faltará implementar en el apartado del formulario de contacto que hemos creado, los datos que recibimos al enviar el correo, es decir, el cuerpo del mensaje, y añadimos el siguiente texto:

De: [nombre] <[correo]>
Asunto: [asunto]
Fecha: [fechaenvio]

Cuerpo del Mensaje:
[mensaje]

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *