contact-form-7

¿Puedo crear campos condicionales utilizando el plugin Contact Form 7 en WordPress?

¿Puedo crear campos condicionales utilizando el plugin Contact Form 7 en WordPress?

Plugin

Esta es la manera de mostrar/ocultar campos con jQuery.

Hola a todos, parece que después del retiro oficial de Adobe Form Central, muchos de mis clientes optaron por usar Contact Form 7, que es un plugin muy conocido y funcional para la creación de formularios en WordPress. Pero uno de las mayores dificultades que se me presentaron fue la de crear campos condicionales (mostrar u ocultar campos basados en las entradas de otros campos). Después de algunas investigaciones finalmente encontré la respuesta usando jQuery y estoy muy feliz de compartir un ejemplo sencillo que tú puedes adaptar para tus propios fines.

Hare mi mayor esfuerzo para explicar los pasos que debes seguir para recrear este ejemplo, recuerda que ya tienes que tener instalado WordPress y el Plugin “Contact Form 7”, puedes descargar este plugin hacienda clic aqui: http://adf.ly/1KNwp9 (para descargar por favor espera el tiempo que se indica y luego haga clic en el botón de la parte superior derecha que dice saltar publicidad).

1. Añadir el Script de jQuery a nuestro tema de WordPress. Descarga y guarda el Script jQuery de la fuente oficial haciendo clic aquí: http://adf.ly/1KNyQm, y guárdalo en la carpeta /js/1.7.1/ de tu tema. Puede que tengas que crear las carpetas si estas aun no han sido creadas  (ejemplo: “./wordpress/wp-content/themes/your-theme-name/js/1.7.1/”)

2. Crearemos un Formulario Sencillo usando Contact Form 7. Para seguir con este ejemplo tendrás que crear el siguiente código. No importa el nombre que le pongas al formulario pero tiene que tener los mismos campos y atributos.

 

 <div id="contactForm">
<h2>Send us an email...</h2>
 <ul>
 <li>
 <label for="senderName">Your Name</label>[text* senderName /40 id:senderName class:contactForm "Please type your name"]
 </li>
 <li>
 <label for="awesome">Are you awesome?</label>[select awesome id:awesome include_blank class:contactForm "Hell yes!" "Sometimes" "Nope"]
 </li>
 <li>
 <div class="hide" id="hide1">
 <label for="not-awesome">Tell us why not</label>[text not-awesome /50 id:not-awesome class:contactForm "Tell us why you aren't awesome"]
 </div>
 </li>
 <li>
 <label for="senderEmail">Your Email Address</label>[email* senderEmail /50 id:senderEmail class:contactForm "Please type your email address"]
 </li>
 <li>
 <label for="message" style="padding-top: .5em;">Your Message</label>[textarea* message 80x10 id:message class:contactForm "Please type your message"]
 </li>
 </ul>
 <div id="formButtons">[submit id:sendMessage class:contactForm "Send Email"]
 </div>
</div>

 

3. Crearemos un Script de jQuery para ocultar campos. Crearemos un script llamado “hidefieldsScript.js” utilizando esté código:

 

/*! jQuery script to hide certain form fields */

$(document).ready(function() {

 //Hide the field initially
 $("#hide1").hide();

 //Show the text field only when the third option is chosen - this doesn't
 $('#awesome').change(function() {
 if ($("#awesome").val() == "Nope") {
 $("#hide1").show();
 }
 else {
 $("#hide1").hide();
 }
 });
});

 

Crea y guarda directamente en la carpeta “js” de tu tema de WordPress (ejemplo: “./wordpress/wp-content/themes/your-theme-name/js/”)

4. Agregaremos un poco de estilo básico al formulario. Agregaremos el código siguiente al final del archive “style.css” de tu tema:

 

/* =Custom Contact Form with jQuery
----------------------------------------------- */

/* Add curved borders to various elements */
#contactForm, .statusMessage, input[type="submit"], input[type="button"] {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px; 
 border-radius: 10px;
}

/* Style for the contact form and status messages */
#contactForm, .statusMessage {
 color: #666;
 background-color: #ebedf2;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );
 background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% ); 
 border: 1px solid #aaa;
 -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
 -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
 box-shadow: 0 0 1em rgba(0, 0, 0, .5);
 opacity: .95;
}

/* The form dimensions */
#contactForm {
 width: 40em;
 height: 41em;
 padding: 0 1.5em 1.5em 1.5em;
 margin: 0 auto;
}

/* Position the form in the middle of the window (if JavaScript is enabled) */
#contactForm.positioned {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin-top: auto;
 margin-bottom: auto;
}


/* The header at the top of the form */
#contactForm h2 {
 font-size: 2em;
 font-style: italic;
 letter-spacing: .05em;
 margin: 0 0 1em -.75em;
 padding: 1em;
 width: 19.5em; 
 color: #aeb6aa;
 background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */
 border-bottom: 1px solid #aaa;
 -moz-border-radius: 10px 10px 0 0;
 -webkit-border-radius: 10px 10px 0 0; 
 border-radius: 10px 10px 0 0;
}

/* Give form elements consistent margin, padding and line height */
#contactForm ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#contactForm ul li {
 margin: .9em 0 0 0;
 padding: 0;
}

#contactForm input, #contactForm label {
 line-height: 1em;
}

/* The field labels */
#contactForm label {
 display: block;
 float: left;
 clear: left;
 text-align: right;
 width: 28%;
 padding: .4em 0 .0 0;
 margin: .15em .5em 0 0;
 font-weight: bold;
}

/* The fields */
#contactForm input, textarea , select {
 display: block;
 margin: 0;
 padding: .4em;
 width: 67%;
 font-family: "Georgia", serif;
 font-size: 1em;
 border: 1px solid #aaa;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px; 
 border-radius: 5px;
 -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
 -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
 box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
 background: #fff;
}

#contactForm textarea {
 height: 13em;
 line-height: 1.5em;
 resize: none;
}


/* Place a border around focused fields, and hide the inner shadow */
#contactForm *:focus {
 border: 1px solid #66f;
 outline: none;
 box-shadow: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
}

/* The Send and Cancel buttons */
#contactForm input[type="submit"], #contactForm input[type="button"] {
 float: right;
 margin: 2em 1em 0 1em;
 width: 10em;
 padding: .5em;
 border: 1px solid #666;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px; 
 border-radius: 10px;
 -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
 -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
 box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
 color: #fff;
 background: #0a0;
 font-size: 1em;
 line-height: 1em;
 font-weight: bold;
 opacity: .7;
 -webkit-appearance: none;
 -moz-transition: opacity .5s;
 -webkit-transition: opacity .5s;
 -o-transition: opacity .5s;
 transition: opacity .5s;
}

#contactForm input[type="submit"]:hover,
#contactForm input[type="submit"]:active,
#contactForm input[type="button"]:hover,
#contactForm input[type="button"]:active {
 cursor: pointer;
 opacity: 1;
}

#contactForm input[type="submit"]:active, input[type="button"]:active {
 color: #333;
 background: #eee;
 -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
 -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
 box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}

#contactForm input[type="button"] {
 background: #f33;
}


/* Some IE7 hacks and workarounds */

<!--[if lt IE 8]>
/* IE7 needs the fields to be floated as well as the labels */
#contactForm input, textarea {
 float: right;
}

#formButtons {
 clear: both;
}

/*
 IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.
 The negative margins are half the element's width/height.
*/
#contactForm.positioned, .statusMessage {
 left: 50%;
 top: 50%;
}

#contactForm.positioned {
 margin-left: -20em;
 margin-top: -16.5em;
}
<![endif]-->

 

 
Yo te recomiendo hacer esto para que podamos ver el ejemplo de la forma correcta. El CSS está diseñado específicamente para los elementos con el ID “contactForm”, por lo que no contamina el diseño de tu tema.

5. Añadiremos el script en el encabezado de nuestro tema (header.php). Agregamos las siguientes líneas dentro de las etiquetasen el archive header.php de tu tema:

<!-- Add jquery script to support Conditional Forms-->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/hidefieldsScript.js"></script>

 

 

6. Probemos el formulario! Pega el código del formulario Contact Form 7 en una página o entrada, luego haga una vista previa de la página. Tu podrás ver el formulario, pero uno de los campos se encuentra oculto. Para ver el campo oculto, simplemente responde “No” a la pregunta “¿Eres interesante?”. Entonces una línea adicional aparecerá pidiéndote que expliques porque!

7. Como modificar el ejemplo. Para modificar el ejemplo es necesario que modifiques los pasos 2 y 3, de modo que el formulario y el Script jQuery trabajen juntos para ocultar los campos que desees que lo hagan. También tendrás que modificar el paso 4 para conseguir el estilo CSS que tú prefieras.
Sugiero que pruebes primero el ejemplo y luego estudies cómo funciona el Script jQuery. Existen un montón de tutoriales que explican las funciones de jQuery.

Esto es todo amigos! Espero que esto nos ayude a todos…

read more >