Create a hidden Contact 7 Form which is revealed on clicking a button - great for space conscious situations - e.g. place in your sidebar

hidden contact 7 form

<div class="requesttour">
	<input id="requesttourbutton" type="button" class="button" value="Request a tour">
	<div class="hiddenrequestform" id="requesttourhiddenform" style="display:none">
		<h3>Request a tour</h3>
		<div class="rflabel">
		Your name
		</div>
		<div class="rffield focusbox">
		[text* your-name placeholder "Your name"]
		</div>
		<div class="rflabel">
		Your email address
		</div>
		<div class="rffield">
		[email* your-email placeholder "Your email"]
		</div>
		<div class="rflabel">
		Your phone number
		</div>
		<div class="rffield">
		[text* your-phone placeholder "Your phone number"]
		</div>
		<div class="rfsubmit woocommerce">[submit class:button "Submit"]</div>
	</div>
</div>
<style>
.requesttour {
color:black;
}
.hiddenrequestform {
background-color:#eee;
padding:0px 10px;
border:1px solid #ddd;
border-radius:5px;
}
.hiddenrequestform .rflabel {
margin-top:10px;
display:none;
}
.hiddenrequestform .rfsubmit, .requesttour {
margin-top:10px;
text-align:center;
}
.hiddenrequestform .rffield input {
max-width:100%;
padding: 2px 3px 1px 3px;
margin-bottom:5px;
}
.hiddenrequestform h3 {
font-family:'Josefin Sans';
margin-top:10px;
font-size:14px;
text-transform:uppercase;
}
.sidebar div.wpcf7-validation-errors {
display:none!important;
}
.sidebar span.wpcf7-not-valid-tip {
font-size:12px;
}
aside.sidebar img.ajax-loader {
position: absolute;
width: 20px;
border-bottom: 1px solid #000;
top:auto;
left:auto;
border:none!important;
}
.sidebar div.wpcf7-mail-sent-ok {
margin: 0px;
border: none;
background-color: black;
color: white;
font-size: 12px;
}
</style>
<script language="javascript" type="text/javascript">
jQuery('#requesttourbutton').click(function() {
  jQuery('#requesttourhiddenform').css('display', 'block');
  jQuery('#requesttourbutton').css('display', 'none');
  jQuery('.hiddenrequestform .focusbox input').focus();
});
</script>