I have html code for a set of tabs that I want to display on my page and am using the Cornerstone Content Area or Classic Raw Content to display. I want each tab to display a Contact Form 7 contact form. I’ve pasted the form shortcode in the tab content area and it’s showing up within Cornerstone but not on the live view of my page.
What gives? Can someone tell me where I’m going wrong?
Below is the code I’m using inside the content area:
<!DOCTYPE html>
<html>
<style>
body {font-family: "Open Sans", sans-serif;}
/* Style the tab */
div.tab {
overflow: hidden;
background-color: transparent;
text-align: center;
margin-left:auto;
margin-right:auto;
display:block;
border-bottom: 1px solid #6D6E71;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: transparent;
float: center;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
font-size: 20px;
color: #cccccc;
text-transform: uppercase;
line-height:1;
margin: 1%;
height:31px;
font-weight:400;
}
/* Change background color of buttons on hover */
div.tab button:hover {
color: #F7941D;
background-color:transparent;
}
/* Create an active/current tablink class */
div.tab button.active {
color: #F7941D;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 0px;
border-top: none;
text-align:left;
}
</style>
<body>
<div class="tab">
<button class="tablinks" onclick="openToggle(event, 'Sales')" id="defaultOpen">Sales</button>
<button class="tablinks" onclick="openToggle(event, 'Customer Care')">Customer Care</button>
<button class="tablinks" onclick="openToggle(event, 'Distribution')">Distribution</button>
<button class="tablinks" onclick="openToggle(event, 'Press')">Press</button>
<button class="tablinks" onclick="openToggle(event, 'Investor')">Investor</button>
<button class="tablinks" onclick="openToggle(event, 'Careers')">Careers</button>
<button class="tablinks" onclick="openToggle(event, 'Other')">Other</button>
</div>
<div id="Sales" class="tabcontent">
<div style="margin-left:auto; margin-right:auto; display:block;">
[contact-form-7 id="6317" title="Sales Inquiry"]
</div>
</div>
<div id="Customer Care" class="tabcontent">
<div style="margin-left:auto; margin-right:auto; display:block;">
[contact-form-7 id="6333" title="Customer Care"]
</div>
</div>
<div id="Distribution" class="tabcontent">
<div style="margin-left:auto; margin-right:auto; display:block;">
[contact-form-7 id="6334" title="Distribution"]
</div>
</div>
<div id="Press" class="tabcontent">
<div style="margin-left:auto; margin-right:auto; display:block;">
[contact-form-7 id="6335" title="Press"]
</div>
</div>
<div id="Investor" class="tabcontent">
<div style="margin-left:auto; margin-right:auto; display:block;">
[contact-form-7 id="6336" title="Investor"]
</div>
</div>
<div id="Careers" class="tabcontent">
<div style="margin-left:auto; margin-right:auto; display:block;">
[contact-form-7 id="6337" title="Careers"]
</div>
</div>
<div id="Other" class="tabcontent">
<div style="margin-left:auto; margin-right:auto; display:block;">
[contact-form-7 id="6338" title="Other"]
</div>
</div>
<script>
function openToggle(evt, ToggleName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(ToggleName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>