Contact Form 7 Issues Tricks and Solution

Promo Code or Coupon Code field in Contact Form 7 or changing value based on specific key typed


Few days ago one of my client requested me to implement a promo code field ( screenshot attached) in payment form (which i helped him created using contact form 7) to show a discounted price. I helped him implemented this and sharing you the code.

Procedure

  1. Here is the Contact form 7 field to use
[text couponcode placeholder "Promo Code"]

<span class="discountedPrice"> </span>

2. Here is the jQuery code ( Use Simple Custom CSS and JS plugins for this)

jQuery(document).ready(function(){
 
  
     jQuery('input[name="couponcode"]').on('input keyup', function(e){	
 
	let couponcode= jQuery( 'input[name="couponcode"]' ).val().trim(); 
       
if(couponcode=="ab123"){
	   jQuery('span.discountedPrice').html("$100");
	   }

         if(couponcode=="BC9287"){
	   jQuery('span.discountedPrice').html("$499");
	   }     
     
     });

  	});

Feel free to do ask comments in the comments box if you face any issue.

Contact Form 7 Issues Tricks and Solution

Click on Paypal button or Redirect to Paypal page after successful submssion or mail sent.


Suppose you have a paypal button to collect money or sale product and you want your client to submit Contact form 7 form too. To make that work easy for your client it is wise to redirect your client to paypal payment collection after successful submission of the form. Here is the procedure

  1. Add this plugins Contact Form 7 Redirection

2. Like the image a new tab “Redirect Settings” will be added

3. Like the Screenshot above you can put the External URL or Paypal url and select “Use External URL”

Instead or redirecting to external url or paypal url if you want to Click Automatically to Paypal Payment button, then use this technique

jQuery(document).ready(function() {
 
jQuery('button.paypal-button.large').click();
 
  });

please replace this selector button.paypal-button.large with your payment button selector.

If you face issue or need help please do comments in the comments box.

Contact Form 7 Issues Tricks and Solution

Contact Form 7 Multi Step Form: Solution of Redirecting Different Form Based On Selection


Contact Form 7 Multi Step Form Redirect to Different Form Based on Selection

This Post is for advanced users. So if you are using Contact Form 7 and Contact Form 7 Multi Steps Form and want your form to go to or Redirect Different Form based on Radio button or Drop down or Checkbox selection, then this post can help you.

I have used Jquery and Ajax to solve this issue. If you have any Question, Please ask question in the comments section.

<script>

jQuery(document).ready(function(){
 jQuery('input[type="radio"][name="radio-20"]').bind('click',function(){
	var ompp= jQuery(this).val();
	 console.log(ompp);
  
  jQuery.ajax({
		url:"<?php echo admin_url('admin-ajax.php');?>",
		type:"GET",
		contentType: "application/x-www-form-urlencoded;charset=UTF-8",
		 
		data:{
			
    		action: 'stravyfuncajax23',
	 		radiovalue:ompp
		     },
	  success: function(responsea){
		  jQuery("#bm").html(responsea);
console.log(responsea);
if(responsea=="Build Muscle"){
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( event.detail.contactFormId === "1719") { location.replace("http://example.com/build-muscle-form-page/");}}, false );
}
else{
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( event.detail.contactFormId === "1719") { location.replace("http://example.com/lose-weight-form-page/");}}, false );
}

}
	
});

 });		


});

</script>
in Function.php

add_action('wp_ajax_stravyfuncajax23','searchbyom');
add_action('wp_ajax_nopriv_stravyfuncajax23','searchbyom');
function searchbyom(){
$searchword1= $_GET['radiovalue'] ; 

if($searchword1=="Build Muscle"){

 echo "Build Muscle";
}else
{
echo "Lose Weight";
}
die();
}
The Contact Form 7 Code i used

First Name:
[text your-name]

Last Name:
[text last-name]


What is your goal?
[radio radio-20 default:0 "Lose Weight" "Build Muscle"]

[submit "Continue Questionnaire"][multistep "2-5"]
 
 
<div id="bm"></div>
Contact Form 7 Issues Tricks and Solution

Send emails to specific people depending on selection within the Form: Contact Form 7 technique


If you want to implement a form using Contact Form 7 where  users will select  Tutor name or Department name and the mail will be delivered to that specific tutor or department then this tutorial is for you.

contact form 7 send mails based on drop down person or department selectionTo solve the issue, I am sharing you what to do in the steps below

Continue reading “Send emails to specific people depending on selection within the Form: Contact Form 7 technique”

Contact Form 7 Issues Tricks and Solution

Greater then or Less then Conditional fields in Contact Form 7 : Show different fields based on a specific field value


Contact Form 7 Conditional field IF Then Else Logic
Sometimes you may want to show certain fields based on the value of another field.

For example
If age is greater then 18 Years you want to show Profession field
Contact Form 7 Conditional field IF Field value is greater then certain field new field will appear
and
If age is less then 18 years then School field will show

Contact Form 7 Conditional field IF Field value is less then new field appear
But you can use this technique for any other conditions

Here i am sharing you the Contact Form 7 code and corresponding jQuery code

Continue reading “Greater then or Less then Conditional fields in Contact Form 7 : Show different fields based on a specific field value”

Contact Form 7 Issues Tricks and Solution

How to add auto calculation fields or calculator in Contact Form 7 using Jquery


This tutorial is only for those who are trying to add calculator fields like where user will put value in one field and some calculation will be done automatically and result will be viewable in other single or multiple fields in contact form.

This technique I have shared is for advance level users who have knowledge of Jquery and using Contact form 7 . If you are new or facing problem to implement such type of fields, feel free to message me in comments section or take my personal help in my fiverr profile.

Here is the technique

1. At first put your calculator fields where you want to do or show calculation

calculator field in contact form 7

2. Use Jquery code something like this

Calculation and value show in contact form 7 field

I have shared you the Jquery auto calculation code for contact form 7 below

<script>

jQuery(document).ready(function(){
//alert("Welcome");
 var ce;
var ps;
var ar;
 

jQuery("#ce").on("change", function() {
 ce= this.value ;

ps=(((ce/30))/5)*1.2;
ar=(((ps*1000)/250)*(0.941*1.65)*1.6);
jQuery("#ps").val(ps.toFixed());
jQuery("#ar").val(ar.toFixed());

}); 


});
</script>

3. Result

Contact Form auto calculation

If you have any issue feel free to ask me question here in comments section

OR

Pay me some, I will help you for CSS Issue Personally CLICK HERE….