dawn theme - put Shopify's contact form into custom link popup?

[xnyjyh]

Hello, how can one put shopifys default contact form into my custom link popup? code below...

<div class="box">
<a class="button" href="#popup1">Contact us</a>
</div>

<div id="popup1" class="overlay">
<div class="popup">
<h2 style="font-size:20px">XXXXXXXX</h2>
<a class="close" href="#">&times;</a>
<div class="content" style="font-family: work sans; font-size:14px;">

-----------ENTER SHOPIFY DEFAULT CONTACT FORM HERE -----------

</div>
</div>
</div>

<style>
h2 {
text-align: left;
font-family: work sans;
font-weight:500;
color: #000;

}

.payment {
max-width: 200px;
}

.button {
font-family: work sans;
font-weight: 500;
font-size: 14px;
padding: 10px;
color: #000;
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
text-decoration: none;
}

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}

.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
}

.popup h2 {
margin-top: 0;
color: #000;
font-family: work sans;
}
.popup .close {
position: absolute;
top: 10px;
right: 20px;
transition: all 200ms;
font-size: 30px;
font-weight: 500;
text-decoration: none;
color: #000;
}
.popup .content {
max-height: 30%;
overflow: auto;
}

@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
.secure{font-weight:500;}
.free{font-weight:500;}

</style>

[Dan-From-Ryviu]

Hi @xnyjyh 

You can try to update your code to this and check 

<div class="box">
<a class="button" href="#popup1">Contact us</a>
</div>

<div id="popup1" class="overlay">
<div class="popup">
<h2 style="font-size:20px">XXXXXXXX</h2>
<a class="close" href="#">&times;</a>
<div class="content" style="font-family: work sans; font-size:14px;">
{% section 'contact-form' %}
</div>
</div>
</div>

<style>
h2 {
text-align: left;
font-family: work sans;
font-weight:500;
color: #000;

}

.payment {
max-width: 200px;
}

.button {
font-family: work sans;
font-weight: 500;
font-size: 14px;
padding: 10px;
color: #000;
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
text-decoration: none;
}

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}

.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
}

.popup h2 {
margin-top: 0;
color: #000;
font-family: work sans;
}
.popup .close {
position: absolute;
top: 10px;
right: 20px;
transition: all 200ms;
font-size: 30px;
font-weight: 500;
text-decoration: none;
color: #000;
}
.popup .content {
max-height: 30%;
overflow: auto;
}

@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
.secure{font-weight:500;}
.free{font-weight:500;}

</style>

[xnyjyh]

Hi Dan,

I get this error:

Liquid error (sections/main-product line 297): Cannot render sections inside sections

[Dan-From-Ryviu]

I recommend you put that code in your theme.liuqid file instead of adding code in another section liquid file

[xnyjyh]

So should I leave :

<div class="box">
<a class="pop-button" href="#popup1">Shipping & Returns</a>
</div>

and the rest in theme.liquid?

[xnyjyh]

Yes, it worked leaving the :

<div class="box">
<a class="pop-button" href="#popup1">Contact us</a>
</div>

...in product-main and rest of code in theme.liquid!

[xnyjyh]

Hmmm, i ran into a weird problem! when I refresh any page and after even clearing cache/cookies. the contact form flashes for a quick moment. If you go to my site you will see what I mean when you refresh any page.