פעולות מותנות (בתנאי) בטופס CF7 וביצוע סימון אוטומטי

על מנת לבצע פעולות מותנות וסימון אוטומטי, יש להשתמש בקוד JS ייעודי, שיש להוסיף תחת Custom CSS & JS, קוד JS, כך לדוגמא:

jQuery(function() {
    jQuery(".first input[name='preference']").click(function() {
        alert("Clicketh YES");
      });
    jQuery(".last input[name='preference']").click(function() {
        alert("Clicketh NO");
      });
  });

הקוד הנ"ל לוקח את השדה של preference ומתריע בהתאמה לבחירה (ראשונה, אחרונה).

ניתן אפילו להוציא את הקוד מחוץ לטופס CF7, ולממש את הפונקציונליות בנפרד, כך: (כולל סימון אוטומטי של האופציה הראשונה)

<div class="column one cb1 makewhite">
<p>הדרכה בלשון - <span class="wpcf7-form-control-wrap preference"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><input type="radio" name="preference" value="הדרכה בלשון זכר" checked="checked"><span class="wpcf7-list-item-label">הדרכה בלשון זכר</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="preference" value="הדרכה בלשון נקבה"><span class="wpcf7-list-item-label">הדרכה בלשון נקבה</span></label></span></span></span></p></div>

כך לדוגמא, מימוש קוד שמסתיר קופסאות (טפסים שונים) לפי בחירת הלקוח, עם הסתרה של הטופס הראשון עם טעינת העמוד:

jQuery(function() {
    jQuery(".first input[name='preference']").click(function() {
        /*alert("Clicketh YES");*/
      	jQuery("#wpcf7-f77-p3-o1").addClass("hideme"); /*Hide second form*/
      	jQuery("#wpcf7-f847-p3-o2").removeClass("hideme"); /*Show first form*/
      });
    jQuery(".last input[name='preference']").click(function() {
        jQuery("#wpcf7-f847-p3-o2").addClass("hideme"); /*Hide first form*/
      	jQuery("#wpcf7-f77-p3-o1").removeClass("hideme"); /*Show second form*/
      });
  });

function theInit() {
    /*alert("INIT just so good");*/
  	jQuery("#wpcf7-f77-p3-o1").addClass("hideme"); /*Hide second form on load*/
 }
 window.onload = theInit;