Wordpress

Show/hide form fields based on a selection from a drop down menu

saikumartekumatla3 November 29, 2021 216 Comments

How to i achieved this check step by step (STEP-1 FORM CODE)

You need to install and activate the Contact Form 7 plugin
After that Click on “Add New” create a new form by giving form name.
Then copy and paste the below code in form section.

<h2>Your Favorite Hero and Movie</h2>

<label>Name :
			[text name]</label>


 <label>Email:
			[text email]</label>



 <label>Message:
			[textarea message 2x2]</label>


<label>Favorite Hero: [select Hero "Maheshbabu" "Prabhas" "Rajnikanth" "NTR" "Pawan kalyan" "Balakrishna" "Chiranjeevi" "Other_Hero"]</label>

<label class="Hero">Enter Other Hero: 
[text hero_option]</label>

<label>Favorite Movie: [select Movie "KGF" "Bahubali" "Robo" "Bhadra" "Gabbarsingh"  "Other_Movie"]</label>

<label class="Movie">Enter Other Movie: 
[text movie_option]
     
 <label>Enter correct values:
[captchac captcha-778 size:s fg:#ffffff bg:#000000 ]
[captchar captcha-778 4/4] </label>

<strong>[submit "Submit"]</strong>

Form message body (mail) (STEP-2)

<table style="background:rgb(224, 238, 251);font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#000;padding-bottom:45px" width="100%" cellspacing="10" cellpadding="0">
<tbody>
<tr style="text-align:center"><td style="padding:0 0 10px 0;width:600px"><a href="https://englishmoral.com" target="_blank"><img style="width:160px" src="http://englishmoral.com/wp-content/uploads/2021/11/thumb.jpg" alt="Mallesh Tekumatla"></a></td></tr>
<tr><td>
	<table style="background:#fff;border-radius:20px;font-size:12px" align="center" cellpadding="10" border="0">
	<tbody>
	<tr><td style="color:#00abff;font-family:Verdana,Geneva,sans-serif;padding-top:30px"><strong>Hello <span class="il">Mallesh Tekumatla</span>, </strong></td></tr>
	<tr><td style="padding-top:0px;font-family:Verdana,Geneva,sans-serif;line-height:18px">You have received a new Message. Kindly review this and respond accordingly.</td></tr>
	<tr><td>
	<table style="background:#fff;border-radius:20px;font-size:12px" cellpadding="10" border="0"><tbody>


<tr>
<td><label>Name : </label>[name]</td>
</tr>


<tr>
<td><label>Email  : </label>[email]</td>
</tr>
<tr>
<td><label>Message  : </label>[message]</td>
</tr>
	
<tr>
<td><label>Favorite Hero : </label>[Hero]</td>
<td><label>Enter Other Hero : </label>[hero_option]</td>
</tr>
<tr>
<td><label>Favorite Movie: </label>[Movie]</td>
<td><label>Enter Other Movie: </label>[movie_option]</td>
</tr>


</table>

Mail(2) Message body (STEP-3)

In To section when user submits the form, whom you want to send the mail that mail you have to mention. If You want to keep it as default site admin mail. Then it will take site registered mail id.

<table style="background:rgb(224, 238, 251);font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#000;padding-bottom:45px" width="100%" cellspacing="10" cellpadding="0">
<tbody>
<tr style="text-align:center"><td style="padding:0 0 10px 0;width:600px"><a href="https://englishmoral.com" target="_blank"><img style="width:160px" src="http://englishmoral.com/wp-content/uploads/2021/11/thumb.jpg" alt="Mallesh Tekumatla"></a></td></tr>
<tr><td>
	<table style="background:#fff;border-radius:20px;font-size:12px" align="center" cellpadding="10" border="0">
	<tbody>
	
	<tr><td style="padding-top:0px;font-family:Verdana,Geneva,sans-serif;line-height:18px"></td></tr>
	<tr><td>
	<table style="background:#fff;border-radius:20px;font-size:12px" cellpadding="10" border="0"><tbody>
<tr>
<td style="color:#00abff;font-family:Verdana,Geneva,sans-serif;padding-top:30px"><strong>Hello <span class="il" style="text-transform: capitalize;"> [name]</span> </strong></td>
</tr>
<tr>
<td style="padding-top:0px;font-family:Verdana,Geneva,sans-serif;line-height:18px">Greetings! </td>
</tr>
<tr>
<td>
<table style="background:#fff;border-radius:20px;font-size:12px" cellpadding="10" border="0">
<tbody>
<tr>
<td ><label>Thank You for your Registration. Our support staff will revert to you.</td>
</tr>


<tr>
<td style="color:#00abff;font-family:Verdana,Geneva,sans-serif"><strong>Best Regards,<br/>
Support Team,<br/>
Mallesh Tekumatla.</strong></td>
</tr>
<tr>
<td><span></span></td>
</tr>
</tbody></table></div>
</td>
</tr>
</tbody></table>

CSS USED FOR THIS FORM (STEP-4)

Aadd this css style.css (or) appearence->customize->Additional CSS SECTION

label.Hero {
    display: none;
}
label.Movie {
    display: none;
}

JAVASCRIPT USED IN THIS FORM (STEP-5)

Aadd this script between or or footer.php

<script>
	jQuery(document).ready(function($){


	$('select').change(function() {
  if ($(this).val() == 'Other_Hero') {
    $('label.Hero').show();
  } else {
    $('label.Hero').hide();
  }
		/*for other */
		   if ($(this).val() == 'Other_Movie') {
    $('label.Movie').show();
  } else {
    $('label.Movie').hide();
  }
	
});

});


</script>