Skip to content

Instantly share code, notes, and snippets.

@dhilditch
Created September 29, 2014 18:07
Show Gist options
  • Save dhilditch/1be3cea4b5d8f83b4117 to your computer and use it in GitHub Desktop.
Save dhilditch/1be3cea4b5d8f83b4117 to your computer and use it in GitHub Desktop.
Create a hidden Contact 7 Form which is revealed on clicking a button - great for space conscious situations - e.g. place in your sidebar
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment