TuZonaWP utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies

Posteador
TuZonaWP
Administrador



Agregar Pagina de Contacto en Wordpress



Agrega pagina de contacto en tu theme sin la necesidad de utilizar pluguins, si eres de los que gustan modificar y agregar código, pues seguro te interesara lo mencionado anteriormente, Es la solución perfecta a lo que estas buscando, una de las ventajas de el siguiente método que te explicare es que ademas de tener el formulario también incluirá un tipo de captcha con el cual cuenta, así podrás evitar el conocido spam, el cual es muy problemático, el cual es provocado por los famosos robots, por lo tanto he tomado la molestia de darle estilos CSS responsive, para adaptarlos a dispositivos móviles, por ende sera mas cómodo para el usuario, así que no se hable mas, lo siguiente a realizar es comenzar con el proceso, el cual te explicare de una manera fácil y rápida.

El primer paso, lo que deberás hacer es crear un archivo llamado contacto.php, ya creado el archivo mencionado anteriormente ahora ingresaras el código que te estaré dejando a continuación:


<?php session_start(); /* Template Name: Contacto */ ?>

<?php
if($_SESSION['pregregex'] AND $_POST['respuesta']){
if(eregi($_SESSION['pregregex'],$_POST['respuesta'])) {
$error = "";
} else {
$error = "Creo que la pregunta no era tan difícil, prueba de nuevo.";
unset($_SESSION['pregregex']);
}
}

$preguntas = array();
$preguntas[] = array('Cuantos dedos tiene una mano?','(5|cinco)');
$preguntas[] = array('Resultado de sumar 2 y 4?','(6|seis)');
$preguntas[] = array('Cuantas ruedas tiene un coche?','(4|cuatro)');
$preguntas[] = array('Que animal es mas grande: elefante o caracol?','(primero|elefante)');
$preguntas[] = array('Cual es el color mas oscuro de todos?','negro');
$preguntas[] = array('Por favor, contesta: eres humano?','(si|claro)');
$preguntas[] = array('Con que mano escribe un zurdo?','(izquierda|con la izquierda)');
$preguntas[] = array('Escribe pan dos veces.','^pan ?pan$');
// puedes escribir todas las que quieras

$pregn = rand(0,(count($preguntas)-1)); // numero al azar
$_SESSION['pregregex'] = $preguntas[$pregn][1]; // Lo guardo en sesion


if($_POST[sent]){

if(!trim($_POST[tu_nombre])){
$error .= "Por favor, tu nombre es.";
}
if(!filter_var(trim($_POST[tu_email]),FILTER_VALIDATE_EMAIL)){
$error .= "

El email no es válido

";
}
if(!trim($_POST[tu_mensaje])){
$error .= "

Quizá olvidaste el mensaje.

";
}
if(!trim($_POST[el_asunto])){
$error .= "

Falta el asunto

";
}
if(!trim($_POST[respuesta])){
$error .= "

Falta el captcha, sólo quiero saber que no eres un robot.

";
}
if(!$error){
$email = wp_mail(get_option("admin_email",trim($_POST[tu_nombre])." - ".trim($_POST[el_asunto])." - ".get_option("blogname",stripslashes(trim($_POST[tu_mensaje])),"De: ".trim($_POST[tu_nombre])." <".trim($_POST[tu_email]).">\r
Reply-To:".trim($_POST[tu_email]));
}
}
?>
<?php get_header(); ?>
<?php $options = get_option('minimalia'); ?>
<?php get_header(); ?>

<div id="page">

<article class="article">

<div id="content_box" >
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class('g post'); ?>>

<div class="single_page">
<?php if ($options['mts_breadcrumb'] == '1') { ?>

<div class="breadcrumb"><?php the_breadcrumb(); ?></div>

<?php } ?>

<header>

<h1 class="title"><?php the_title(); ?></h1>

</header>

<?php if($email){ ?>


<strong>Mensaje enviado. Te responderé lo antes posible.</strong>

<?php } else { if($error) { ?>


<strong>Tu mensaje NO ha sido enviado</strong>

<?php echo $error; ?>
<?php } else { the_content(); } ?>

<form action="<?php the_permalink(); ?>" id="contacto" method="post">
<input type="hidden" name="sent" id="sent" value="1" />

<div id="form">

<div id="lebel">Nombre (requerido)</div>


<div id="input-field"><input type="text" name="tu_nombre" id="tu_nombre" value="<?php echo $_POST[tu_nombre];?>" /></div>


<div id="lebel">Email (requerido)</div>


<div id="input-field"><input type="text" name="tu_email" id="tu_email" value="<?php echo $_POST[tu_email];?>" /></div>


<div id="lebel">Asunto</div>


<div id="input-field"><input type="text" name="el_asunto" id="el_asunto" value="<?php echo $_POST[el_asunto];?>" /></div>


<div id="lebel">Tu mensaje (requerido)</div>


<div id="input-field"><textarea name="tu_mensaje" id="tu_mensaje"><?php echo stripslashes($_POST[tu_mensaje]); ?></textarea></div>


<div id="lebel">Captcha (requerido), sólo quiero saber que eres tan humano como yo.</div>

<?php echo $preguntas[$pregn][0].'
<input type="text" name="respuesta" />'; ?>



<div id="input-field"><input type="submit" name = "send" value = "Enviar" /></div>

</div>

</form>

<?php } ?>
</div>

<?php endwhile; ?>
</div>

</article>

<?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>


PD, recuerda que el archivo creado debe ser agregado a la carpeta correspondiente a tu theme.
Ahora una vez finalices todo el proceso realizado anteriormente, el siguiente paso es agregar los estilos CSS a tu formulario de contacto, para ello te dejare el siguiente código CSS, el cual puedes editar y adaptar de acuerdo el diseño de acuerdo a tus necesidades.


/*---Contacto---*/
#contacto input,
textarea {
border: 1px solid #dbdbdb;
padding: 7px 5px;
width: 50%;
min-width: 207px;
}

#contacto input[type=text],
textarea {
border-radius: 5px;
margin-bottom: 20px;
}

#contacto textarea {
height: 150px;
max-height: 150px;
}

#contacto input[type=submit] {
cursor: pointer;
background: #222;
color: #fff;
height: 34px;
padding: 0 20px;
border: 0;
width: 52%;
min-width: 219px;
}


PD, este código debe ser agregado a tu hoja de estilos style.css

Prácticamente ya estaría todo el proceso finalizado, solo que ahora para poder agregar la pagina de contacto deberás ingresar al área admin, dentro te diriges en la parte que dice Paginas - Añadir nueva se cargara la configuración para agregar la pagina, te diriges en la parte que dice Atributos de pagina, donde dice superior seleccionas contacto, y estableces un titulo a la pagina.

0 Comentarios


Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Ir al cielo