Lo que quiero es simple.
El usuario puede seleccionar A o B y, dependiendo de esto, tiene diferentes campos para completar.
No puedo encontrar una manera de hacer esto, solo encontré un truco para la versión 1.0 (la actual es 2.4.6)
-
Esta pregunta debería haber sido publicada en Página de WordPress de Stack Overflow inicialmente. Probablemente hubieras obtenido una respuesta más rápida. 🙂
-
Aquí está la respuesta. 😀
Sé que esta pregunta se hizo hace bastante tiempo, pero también encontré una solución mientras la buscaba yo mismo. Así que aquí está la respuesta para cualquier otra persona que también pueda estar buscando una solución. El enlace que aparece a continuación me ha ayudado muchísimo.
“Mostrar/ocultar campos condicionalmente con el formulario de contacto 7”
Acabo de escribir un complemento de WordPress que agrega lógica condicional al formulario de contacto 7.
El código fuente está en github: https://github.com/pwkip/contact-form-7-conditional-fields
Puede descargar el complemento desde el repositorio de wordpress aquí: https://wordpress.org/plugins/cf7-conditional-fields/
-
Acabo de instalar este complemento, ¡funciona de maravilla!
– Vista azul
31 de agosto de 2016 a las 8:18
Esto cambió con el lanzamiento de CF7 4.1 alrededor de 1/2015. Los detalles sobre los cambios se pueden encontrar aquí:
http://contactform7.com/2015/01/06/contact-form-7-41-beta/
El código debería verse así:
add_filter( 'wpcf7_validate_text', 'your_validation_filter_func', 10, 2 );
add_filter( 'wpcf7_validate_text*', 'your_validation_filter_func', 10, 2 );
function your_validation_filter_func( $result, $tag ) {
$name = $tag['name'];
if ( $name === 'full-address' ) {
$value = isset( $_POST[$name] )
? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) )
: '';
$recipient = isset( $_POST['recipient'] ) ? $_POST['recipient'] : '' ;
if(strlen($value) === 0 && ($recipient == 'Maintenance Inquiries' || $recipient == 'Resident Accounts') ) {
$result->invalidate( $tag, 'Please input address for this inquiry type' );
}
}
return $result;
}
-
Si desea validar correctamente el lado del servidor de sus campos y no confiar únicamente en la validación del lado del cliente (lo cual es problemático), entonces esta es la forma correcta de realizar la validación condicional/adicional en campos específicos en su formulario. +1
– usuario abusador
9 de junio de 2015 a las 4:34
p.castaldi
Puedes consultar este artículo mío, si quieres algo más que simplemente ocultar/mostrar elementos: Así es como tener campos condicionales simulados en CF7 con jQuery.
Para obtener una muestra de la vida real de lo que puede hacer, puede consultar este sitio seleccionando la pestaña “Richiedi quotezione”. El sitio está en italiano, pero fácilmente te da una idea…
Volviendo a mi artículo, el ejemplo dado se basa en la suposición de que puede tener condiciones complejas en casos de la vida real (por ejemplo, vende productos que pueden ser estándar, pero también pueden personalizarse).
- Productos estándar permitirá a los usuarios seleccionar un código de producto al que corresponde la forma, el ancho y la altura preestablecidos, y luego permitirá que el usuario ingrese solo la longitud deseada. También quiero que se muestre una vista previa de las formas.
- productos personalizados hará que los usuarios definan la forma, el ancho, la altura y la longitud.
La premisa es que trabajes con seguridad en tu child-theme, así que si aún no lo haces, ¡hazlo ahora!
El código se refiere a una URL de tema secundario hipotético /wp-content/themes/myTheme-child y a sus subdirectorios /catalogue y /js dentro del dominio my-domain.it. Deberá cambiar estos valores de acuerdo con su instalación de wordpress.
PASO 1: crea tu formulario de contacto. Para el ejemplo dado, construí uno: asume que tienes un myCatalogue.pdf archivo en el /catalogue subdirectorio de su tema hijo. Aquí está…
<div class="myForm">
<fieldset name="customerInfo">
<ul class="selfClearCont">
<li><label for="your-name">Name (*):</label><br />
[text* your-name class:size-full default:user_first_name]</li>
<li><label for="your-email">E-mail (*):</label><br />
[email* your-email class:size-full default:user_email]</li>
<li><label for="your-tel">Telephone number:</label><br />
[text your-tel class:size-full]</li>
</ul>
</fieldset>
<p><strong>Subject: Quote request</strong></p>
<hr class="myHr selfClearCont"/>
<fieldset name="productType">
<p><label for="product-type">Product type (*):</label><br />
[select* productType include_blank "Standard" "Customized"]</p>
</fieldset>
<div id="standardProduct">
<fieldset name="productCode">
<ul class="selfClearCont">
<li class="floatLi"><label for="productCode">Product Code (*):</label><br />
[select* productCode include_blank "TEC01" "TEC02" "TEC03" "--"] <span class="SmallerText"><a href="http://www.my-domain.it/wp-content/themes/myTheme-child/catalogue/myCatalogue.pdf" title="Product catalogue with codes" target="_blank">Product catalogue</a></span></li>
<li id="productShape" class="floatLi lastFloatLi"></li>
</ul>
</fieldset>
</div>
<div id="customProduct">
<fieldset name="productShape">
<p><label for="productShape">Upload a shape image:</label><br />
[file productShape limit:1mb filetypes:bmp|cdr|dvg|dxf|gif|jpg|pdf|png|svg]<br />
<span class="SmallerText">(bmp, cdr, dvg, dxf, gif, jpg, pdf, png, svg)</span></p>
</fieldset>
</div>
<div id="productDimensions">
<fieldset name="productDimensions">
<ul class="selfClearCont">
<li class="floatLi"><label for="productWidth">Width (*):</label><span class="labelSusbt infoSubst">Width (*):</span><br />
[number* productWidth min:0 class:size-small]<span class="my-form-control size-small infoSubst lockedSubst widthSubst"></span><span class="SmallerText" style="margin-left:3px;">cm</span></li>
<li class="floatLi"><label for="productHeight">Height (*):</label><span class="labelSusbt infoSubst">Height (*):</span><br />
[number* productHeight min:0 class:size-small]<span class="my-form-control size-small infoSubst lockedSubst heightSubst"></span><span class="SmallerText" style="margin-left:3px;">cm</span></li>
<li class="floatLi lastFloatLi"><label for="productLenght">Lenght (*):</label><br />
[number* productLenght min:0 class:size-small]<span class="SmallerText" style="margin-left:3px;">cm</span></li>
</ul>
</fieldset>
</div>
<hr class="myHr selfClearCont"/>
<fieldset name="otherInfo">
<p><label for="your-message">Notes e messages:</label><br />
[textarea your-message class:size-full]</p>
<p><strong>By selecting this checbox</strong> [acceptance Privacy default:off] (*) I accept your privacy policy.</p>
<p><label for="MyCaptchac">Captcha (*):</label><br />
<span class="MyCaptchac">[captchac captcha size:m]</span> <span class="MyCaptchar">[captchar captcha class:size-small]</span></p>
</fieldset>
<p>[submit "Send"]</p>
</div>
PASO 2: diseñe su formulario de contacto con un conjunto de directivas CSS apropiado. El mío también contiene algunas directivas para administrar las clases que agrego a través de jQuery. Aquí está…
/* Contact Form 7 */
.myForm {width: 300px;}
.wpcf7-select.wpcf7-form-control,
.wpcf7-select.my-form-control {
-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;
}
.wpcf7-text.wpcf7-form-control,
.wpcf7-email.wpcf7-form-control,
.wpcf7-number.wpcf7-form-control,
.wpcf7-textarea.wpcf7-form-control,
.my-form-control {
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;
height:1.4em;
line-height: 1.20em;
}
textarea.wpcf7-textarea.wpcf7-form-control,
textarea.my-form-control {height: auto; min-height: 100px; resize: vertical; }
.wpcf7-form-control:focus {
border: 1px solid #0000cc !important;
outline: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.wpcf7-form-control.floatCtrl,
.my-form-control.floatCtrl {float:left;}
.wpcf7-form-control.size-small,
.my-form-control.size-small {width:44px;}
.wpcf7-form-control.size-full,
.my-form-control.size-full {width:100%;}
img.productShape {width: 150px;}
.lockedField,
.infoSubst {display:none;}
.infoSubst.lockedSubst {
float: left;
background-color:rgba(0,0,0,.2);
font-family: Arial;
font-size: 12.6666669845581px;
padding-top: 1px;
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;
height:1.4em;
line-height: 1.20em;
}
/* CF7 Submit button */
.wpcf7-submit.wpcf7-form-control {
float: right;
padding: .5em 2em;
border: 1px solid #666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
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;
}
.wpcf7-submit.wpcf7-form-control:hover,
.wpcf7-submit.wpcf7-form-control:active {
cursor: pointer;
opacity: 1;
}
.wpcf7-submit.wpcf7-form-control: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;
}
.wpcf7-submit.wpcf7-form-control:disabled {
-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;
opacity: .7;
cursor: not-allowed;
}
/* END of CF7 Submit button */
/* END of Contact Form 7 */
/* Clearing Classes */
ul.selfClearCont {
display: block;
clear: both;
padding: 0 !important;
margin: 0 !important;
}
ul.selfClearCont li {
list-style-type: none;
padding: 0 0 10px 0 !important;
}
li.floatLi {
list-style-type: none;
display: inline-block;
float: left;
margin: 0 30px 0 0 !important;
}
li.floatLi.lastFloatLi {
margin-right: 0px !important;
}
.selfClearCont:before,
.selfClearCont:after {
content:"";
display:table;
}
.selfClearCont:after {
clear:both;
}
.selfClearCont {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
/* END of Clearing Classes */
PASO 3: anote algunas funciones para gestionar el trabajo sucio. El mío se ocupa de verificar las condiciones, mostrar/ocultar los campos apropiados, valores preestablecidos, sustituir campos preestablecidos con cuadros de información atenuados, mostrar una vista previa de la forma del producto. Tendrás que guardarlo como Cond1.js en el /js subdirectorio de nuestro tema hijo para que funcione con el ejemplo dado. También tendrá que guardar algunos .jpg en el /catalogue subdirectorio de su tema hijo para que la vista previa de la forma del producto funcione correctamente. Y aquí está el código…
jQuery.noConflict();
jQuery(document).ready(function($) {
/* auto-classes for form fields based on their name */
$(".wpcf7-form-control[name]").each(function() {
var MyClass = $(this).attr("name");
$(this).addClass (MyClass);
});
/* auto-classes for form labels based on their for */
$("label[for]").each(function() {
var MyClass = $(this).attr("for");
$(this).addClass (MyClass);
});
/* title for disabled submit button */
$("input.wpcf7-submit").attr( "title", "Please accept our privacy policy to continue" );
$("input.Privacy").change(function() {
if ($(this).prop('checked') == true) {
$("input.wpcf7-submit").attr( "title", "Send your request" );
}
else {
$("input.wpcf7-submit").attr( "title", "Please accept our privacy policy to continue" );
}
});
function myCFReset() {
$("#standardProduct, #customProduct, #productDimensions, .infoSubst").hide();
$(".widthSubst, .heightSubst, #productShape").html("");
$("input.productWidth, input.productHeight").val("").removeClass("lockedField");
$("label.productWidth, label.productHeight").removeClass("lockedField");
$("select.productCode, input.productLenght").val("").removeClass("floatCtrl");
}
myCFReset();
$("select.productType").change(function() {
if ($(this).val() == "Standard") {
myCFReset();
$("#standardProduct").show();
$("input.productWidth, input.productHeight, label.productWidth, label.productHeight").addClass("lockedField");
$("input.productLenght").addClass("floatCtrl");
}
else if ($(this).val() == "Customized") {
myCFReset();
$("select.productCode").val("--");
$("#customProduct, #productDimensions").show();
}
else {
myCFReset();
}
});
$("select.productCode").change(function() {
if ($(this).val() == "" || $(this).val() == "--") {
$("#productShape, .widthSubst, .heightSubst").html("");
$("input.productWidth, input.productHeight, input.productLenght").val("");
$("#productDimensions").hide();
}
else {
var targetCode = $("select.productCode").val();
var activeCodes = [
"TEC01", 12, 5, "TEC02", 15, 4, "TEC03", 12, 3
];
var ImgBaseURL = "http://www.my-domain.it/wp-content/themes/myTheme-child/catalogue/";
var imageExt = ".jpg";
var ImgURL = ImgBaseURL + targetCode + imageExt;
var MyTitle="<img class="productShape" title="Our product code "+ targetCode + '" ';
var MyAlt="alt="Our product code "+ targetCode + '" ';
var MySrc="https://stackoverflow.com/questions/7412261/src=""+ ImgURL + '" />';
$("#productShape").html(MyTitle + MyAlt + MySrc);
var id = $.inArray(targetCode, activeCodes);
$("input.productWidth").val(activeCodes[id+1]);
$("input.productHeight").val(activeCodes[id+2]);
$(".widthSubst").html(activeCodes[id+1].toString());
$(".heightSubst").html(activeCodes[id+2].toString());
$(".infoSubst, #productDimensions").show();
}
});
});
PASO 4: poner en cola el jQuery Cond1.js archivo en la página/publicación o páginas/publicaciones que necesite. Preparé el siguiente código para agregarlo al functions.php de su tema secundario: se supone que coloca el formulario en la página id 1; cambie esto de acuerdo a sus necesidades. Aquí está el código…
function loadMyScripts() {
/* Common scripts */
// insert here the scripts you want for every page
/* END of common scripts */
/* Page-based scripts */
$pageId = get_the_ID();
$pageType = get_post_type();
/* you can enqueue scripts based on post-type (e.g. for all product post-type)
if($pageType == "product") {
wp_enqueue_script('CondAll', get_stylesheet_directory_uri() . '/js/CondAll.js', array('jquery'));
}
or you can do it based on a particular post/page id
if($pageId == "294") {
wp_enqueue_script('Cond294', get_stylesheet_directory_uri() . '/js/Cond294.js', array('jquery'));
}
*/
/* for the example, we imagine to load a script called Cond1 for post id=1 */
if($pageId == "1") {
wp_enqueue_script('Cond1', get_stylesheet_directory_uri() . '/js/Cond1.js', array('jquery'));
}
/* END of page-based scripts */
}
add_action( 'wp_enqueue_scripts', 'loadMyScripts' );
Eso es todo.
nansoft
Puede usar este complemento para el formulario de contacto7.
https://wordpress.org/plugins/cf7-conditional-fields/
Este complemento agrega lógica condicional al formulario de contacto 7.
Si edita su formulario CF7, verá una etiqueta adicional llamada “Grupo de campos condicionales”. Todo lo que coloque entre la etiqueta de inicio y final se ocultará de forma predeterminada. Después de agregar los grupos de campos, haga clic en Guardar y vaya a la pestaña “Campos condicionales” para crear una o más condiciones que harán que aparezcan los grupos.
Y también puedes ver este video para el Tutorial de Campos Condicionales del Formulario de Contacto 7