Hacer una página de contacto sin plugin en tu tema de wordpress

Mail alt
Crear contacto.php en tu tema de wordpress
Lo primero es crear el archivo es la cabecera para indicar que es una página:Ver código de abajo

Lo mas facil es ir al archivo page.php de su theme y fijarse como esta constituido.Lo que es seguro es que comienza con get_header()
Luego simplemente pega el codigo php en tu contacto.php
Debes darle el estilo que desees oportuno para tu tema asi como agregar los estilos que veas oportunos.
Cambiar tucorreogmail.com por el correo que quieres recibir los correos.
Todo esto tenemos que demostrarlo.Ver el ejemplo funcionado

/*Lo primero es crear el archivo es la cabecera para indicar que es una página:*/

<?php

/*

Template name: Pagina de Contacto

*/

?>

<?php

//Si se envía el formulario

if(isset($_POST['submitted'])) {


//Compruebe si el campo Captcha se rellena

if(trim($_POST['checking']) !== '') {

$captchaError = true;

} else {


//Asegúrese de que el nombre no está vacío

if(trim($_POST['contactName']) === '') {

$nameError = 'Se le olvidó introducir su nombre.';

$hasError = true;

} else {

$name = trim($_POST['contactName']);

}


//Asegúrese de que el correo no está vacío

if(trim($_POST['email']) === '') {

$emailError = 'Se le olvidó introducir su correo.';

$hasError = true;

} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {

$emailError = 'Poner un correo válido';

$hasError = true;

} else {

$email = trim($_POST['email']);

}


//Asegúrese de que el mensaje no está vacío

if(trim($_POST['comments']) === '') {

$commentError = 'Se le olvidó introducir su mensaje.';

$hasError = true;

} else {

if(function_exists('stripslashes')) {

$comments = stripslashes(trim($_POST['comments']));

} else {

$comments = trim($_POST['comments']);

}

}


//Si no hay error, enviar el correo electrónico

if(!isset($hasError)) {


$emailTo = 'tucorreogmail.com';//ponga aqui su email

$subject = 'Contacto Formulario de Prueba '.$name;

$sendCopy = trim($_POST['sendCopy']);

$body = "Nombre: $name \n\nEmail: $email \n\nMensaje: $comments";

$headers = 'Asunto: Mi sitio <'.$emailTo.'>' . "\r\n" . 'contestar: ' . $email;


mail($emailTo, $subject, $body, $headers);


if($sendCopy == true) {

$subject = 'Usted enviará por correo electrónico Su nombre';

$headers = 'From: Su nombre <noreply@somedomain.com>';

mail($email, $subject, $body, $headers);

}


$emailSent = true;


}

}

} ?>



<?php get_header(); ?>


<?php if(isset($emailSent) && $emailSent == true) { ?>


<div class="thanks">

<h1>GRACIAS, <?=$name;?></h1>

<p>Tu email ha sido enviado con éxito. Voy a estar en contacto muy pronto con usted.</p>

</div>


<?php } else { ?>


<?php if (have_posts()) : ?>


<?php while (have_posts()) : the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_content(); ?>


<?php if(isset($hasError) || isset($captchaError)) { ?>

<p class="error">Hubo un error al enviar el formulario.<p>

<?php } ?>


<form action="<?php the_permalink(); ?>" id="contactForm" method="post">


<ol class="forms">

<li><label for="contactName">Nombre</label>

<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />

<?php if($nameError != '') { ?>

<span class="error"><?=$nameError;?></span>

<?php } ?>

</li>


<li><label for="email">Email</label>

<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" />

<?php if($emailError != '') { ?>

<span class="error"><?=$emailError;?></span>

<?php } ?>

</li>


<li class="textarea"><label for="commentsText">Mensaje</label>

<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>

<?php if($commentError != '') { ?>

<span class="error"><?=$commentError;?></span>

<?php } ?>

</li>

<li class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Enviar una copia de este correo electrónico a ti mismo</label></li>

<li class="screenReader"><label for="checking" class="screenReader">Si desea enviar este formulario, no introduzca nada en este campo</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /></li>

<li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">ENVIAR CORREO &raquo;</button></li>

</ol>

</form>


<?php endwhile; ?>

<?php endif; ?>

<?php } ?>



<?php get_footer(); ?>



Copiar y pegar el código en tu contacto.php te debe de ir bien, si no comenta
Eso es todo espero les sirva de ayuda.

Dejo el estilo css para modificar a su gusto.
/*****Formulario css****/
ol.forms { float: left; list-style: none; margin: 0; width: 100%; }
ol.forms li {
clear: both;
float: left;
margin-bottom: 18px;
position: relative;
width: 100%;
}
ol.forms label {
cursor: pointer;
display: block;
float: left;
font-weight: bold;
padding-right: 20px;
width: 100px;
}
ol.forms input, ol.forms textarea {
border: 1px solid #7E8AA2;
border-radius: 3px;
font: inherit;
-moz-border-radius: 3px;
padding: 2px;
-webkit-border-radius: 3px;
width: 214px;
}
ol.forms textarea { height: 300px; width: 334px; }
ol.forms input:focus, ol.forms textarea:focus { background-color: #f2f3f6; border-color: #ff9800; }
.error { color: #f00; }
ol.forms li .error { font-size: 12px; margin-left: 20px; }
ol.forms li.textarea .error {
display: block;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
ol.forms li.screenReader { margin-bottom: 0; }
ol.forms li.buttons button {
background: #ff9800;
border: none;
color: #000;
cursor: pointer;
font: 16px/16px "Avenir LT Std", Helvetica, Arial, sans-serif;
overflow: hidden;
padding: 6px 3px 3px 3px;
text-transform: uppercase;
width: auto;
}
ol.forms li.buttons button:hover { color: #222; }
ol.forms li.buttons button:active { left: -1px; position: relative; top: -1px; }
ol.forms li.buttons, ol.forms li.inline { float: right; width: 460px; }
ol.forms li.inline input { width: auto; }
ol.forms li.inline label { display: inline; float: none; width: auto; }

Comentarios

  1. El campo de código está vacío!

    ResponderEliminar
  2. El campo de codigo si estaba solo que en blanco. =)
    Ya lo puse y efectivamente sale en la página, pero he probado a rellenarlo para ver si funciona y realmente me manda una copia del email y no se estan enviando. No esta funcionando =(

    Se te ocurre por que podria ser?

    Gracias

    ResponderEliminar
  3. Ya he conseguido poner el formulario en mi web. Lo he personalizado un poco y he editado el css que proporcionas. Aún así hay dos cosas que no me gustan como quedan y por más que trato de probar a modificar cosas en el codigo no consigo solucionarlas. Si ves en mi pagina de contacto:
    http://www.lapiznomada.com/contacto/

    El botón de enviar mensaje y la opcion de enviar una copia de este correo electrónico a ti mismo quedan colocadas mucho más a la derecha que el resto de los campos. Me gustaría que todos estuvieran colocados sobre el mismo margen y no se como solucionarlo.
    Si me puedes echar la mano te lo agradecería

    Gracias

    ResponderEliminar
  4. Ya esta arreglado.
    Los últimos campos no están como en el código.Supongo que has cambiado algo.

    ResponderEliminar

Publicar un comentario

Puedes leer más :

Usar WordPress como CMS sin plataforma de blogs

Cómo mover su sitio de WordPress y no romper los enlaces