Como adicionar o formulário de contato do Shopify a uma página de produto do Shopify

 <estilo> _
 #ContactFormMessage {
 largura : 100 %;
 }
 . campo {
 margem inferior : 10px ;
 }
 . entrada de campo {
 exibição : bloco ;
 min - largura : 100 %; 
altura da linha : 1 ;
 tamanho da fonte : 14px ;
 }
 #modal-contact-dark-overlay {
 Mostrar nenhum ;
 posição : fixa ;
 índice z : 1 ;
 topo : 0 ;
 esquerda : 0 ; 
largura : 100 %;
 altura : 100 %;
 cor de fundo : rgba ( 0 , 0 , 0 , 0,7 ) ;
 estouro : automático ;
 nome da animação : animateopacidade ; 
animação - duração : 0,5s ;
 }
 @keyframes animateopacidade {
 de {
 cor de fundo : rgba ( 0 , 0 , 0 , 0 ) ;
 }
 para { 
cor de fundo : rgba ( 0 , 0 , 0 , 0,7 ) ;
 }
 }
 #contato-modal-contêiner {
 Mostrar nenhum ;
 posição : fixa ;
 superior : 50 %; 
esquerda : 50 %;
 largura : 100 %;
 altura : 100svh ;
 índice z : 100 ;
 transformar : traduzir ( -50 % , -50 % ) ; 
alinhar - conteúdo : centro ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 #contato-modal {
 posição : relativa ;
 cor de fundo : branco ;
 margem : 2rem ;
 largura : 100 %; 
largura máxima : 400px ;
 altura : automático ;
 preenchimento : 20px 40px 50px 40px ;
 caixa - sombra : -1px 3px 18px 0px rgba ( 128 , 128 , 128 , 1 ) ; 
animação : drop - in 0,5s cúbico - bezier ( 0,175 , 0,885 , 0,32 , 1,275 ) ;
 }
 @media ( largura máxima : 1200px ) {
 #contato-modal {
 largura : 40 %;
 } 
}
 @media ( largura máxima : 770px ) {
 #contato-modal {
 largura : 85 %;
 superior : 10 %;
 preenchimento : 20 % 5 % 5 % 10 %;
 }
 } 
@keyframes drop - in {
 de {
 Os 100 melhores % ;
 }
 para {
 topo : 0 %;
 }
 }
 #contato-modal-exit {
 posição : absoluta ;
 direita : 20px ;
 borda : nenhuma ;
 plano de fundo : nenhum ; 
tamanho da fonte : 18px ;
 }
 . ocultar - modal - conteúdo {
 Mostrar nenhum ;
 }
 #botão-modal de contato {
 posição : relativa ;
 exibição : bloco ;
 largura : 100 %;
 }
 entrada #ContactFormTitle { 
fundo - cor : #f5f5f5;
 estilo da fonte : itálico ;
 }
 insira #ContactFormSKU {
 fundo - cor : #f5f5f5;
 estilo da fonte : itálico ;
 }
 entrada #ContactFormTitle: foco {
 esboço : nenhum ;
 }
 entrada #ContactFormSKU: foco { 
esboço : nenhum ;
 }
 </ estilo >
 < shopify - contato - formulário >
 < button class = "shopify-contact-form-btn btn button" > Dúvida sobre este produto? </ botão > 
< div id = "modal-contact-dark-overlay" </ div >
 < div id = "contato-modal-container" >
 < div id = "contato-modal" >
 < botão id = "contato-modal-exit" >& #x2715;</button> 
< p id = "mensagem de sucesso modal" </ p >
 < div id = "contato-modal-form-content" >
 < h2 class = "h2" > Contato { { loja. nome } } </ h2 > 
{ %- formulário 'contato' , id : 'ContactForm' , classe : contact_form_class -% }
 < input type = "oculto" nome = "contato[página do produto]" valor = " {{ product.title }} - {{ product.url }} " > 
{ %- se formulário. postado_com sucesso ? -% }
 < h2 class = "form-status form-status-list form__message" tabindex = "-1" foco automático >
 { % renderizar 'sucesso do ícone' % } 
{ { 'templates.contact.form.post_success' | } }
 </ h2 >
 { %- formato elsif. erros -% }
 < div class = "form__message" > 
< h2 class = "form-status caption-large text-body" role = "alert" tabindex = "-1" foco automático >
 { % renderizar 'erro de ícone' % }
 { { 'templates.contact.form.error_heading' | } } 
</ h2 >
 </div> _ _
 < ul class = "form-status-list caption-large" role = "list" >
 <li> _
 <a href = "#ContactForm-email" class = "link" > _ _ _ _ _ _ 
{ { forma. erros . campos_traduzidos . e-mail | capitalizar } }
 { { forma. erros . mensagens . e-mail } }
 </a> _
 </ li >
 </ul> _ 
{ %- fim se -% }
 < div class = "contato__campos" >
 < div classe = "campo" >
 < entrada
 classe = "campo__input"
 preenchimento automático = "nome" 
tipo = "texto"
 id = "Nome do ContactForm"
 nome = "contato[ {{ 'templates.contact.form.name' | t }} ]"
 value = " {% if form.name %} {{ form.name }} {% elsif customer %} {{ customer.name }} {% endif %} "
 placeholder = " {{ 'templates.contact.form.name' | t }} "
 > 
< label class = "field__label" for = "ContactForm-name" > { { 'templates.contact.form.name' | t } } </ rótulo >
 </div> _ _ 
< div class = "campo campo com erro" >
 < entrada
 preenchimento automático = "e-mail"
 tipo = "e-mail"
 id = "ContactForm-e-mail"
 classe = "campo__input"
 nome = "contato[e-mail]"
 verificação ortográfica = "falso" 
autocapitalizar = "desligado"
 valor = " {% if form.email %} {{ form.email }} {% elsif customer %} {{ customer.email }} {% endif %} "
 aria - obrigatório = "verdadeiro"
 { % se formulário. erros contém 'e-mail' % } 
aria - inválido = "verdadeiro"
 aria - descrito por = "ContactForm-email-error"
 { % fim se % }
 placeholder = " {{ 'templates.contact.form.email' | t }} "
 > 
< label class = "field__label" for = "ContactForm-email" >
 { { - 'templates.contact.form.email' | } }
 < span aria - hidden = "true" >*</ span ></ label 
>
 { %- se formulário. erros contém 'e-mail' -% }
 < classe pequena = "contact__field-error" id = "ContactForm-email-error" > 
< span class = "visualmente oculto" > { { 'accessibility.error' | t } } </ span >
 < span class = "form__message" > 
{ %- renderizar 'erro de ícone' -% }
 { { - forma. erros . campos_traduzidos . e-mail | capitalizar } }
 { { forma. erros . mensagens . e-mail - } } 
</span> _
 </ pequeno >
 { %- fim se -% }
 </div> _ _
 </div> _ _
 < div classe = "campo" >
 < entrada 
tipo = "tel"
 id = "ContactForm-telefone"
 classe = "campo__input"
 preenchimento automático = "tel"
 nome = "contato[ {{ 'templates.contact.form.phone' | t }} ]"
 padrão = "[0-9\-]*" 
valor = " {% if form.phone %} {{ form.phone }} {% elsif customer %} {{ customer.phone }} {% endif %} "
 placeholder = " {{ 'templates.contact.form.phone' | t }} "
 > 
< label class = "field__label" for = "ContactForm-phone" > { { 'templates.contact.form.phone' | t } } </ rótulo >
 </div> _ _ 
< div classe = "campo" >
 < área de texto
 linhas = "10"
 id = "ContactForm-corpo"
 class = "campo de área de texto__input"
 nome = "contato[ {{ 'templates.contact.form.comment' | t }} ]"
 placeholder = " {{ 'templates.contact.form.comment' | t }} " 
>
 { { - forma. corpo - } }
 </ área de texto >
 < label class = "form__label field__label" for = "ContactForm-body" > Mensagem </ label > 
</div> _ _
 < div class = "contato__button" >
 < button type = "submit" class = "button" > Enviar e-mail </ button >
 </div> _ _ 
{ %- formulário final -% }
 </div> _ _
 </div> _ _
 </div> _ _
 </ shopify - contato - formulário >
 <roteiro> _
 classe ShopifyContactForm estende HTMLElement { 
construtor ( ) {
 super ( ) ;
 esse . botão = isto . querySelector ( '.shopify-contact-form-btn' ) 
esse . closeButton = isto . querySelector ( '#contact-modal-exit' ) ;

 janela. addEventListener ( " clique " , isto.windowClicked.bind ( este ) ) 
esse . botão fechar . addEventListener ( ' clique ' , isto.closeModal.bind ( isto ) ) 
esse . botão . addEventListener ( 'clique' , este . botãoClicked . vincular ( isto ) )
 }

 botãoClicado ( ) { 
esse . querySelector ( "#modal-contact-dark-overlay" ) . estilo . exibir = "bloco" ;
 esse . querySelector ( "#contact-modal-container" ) . estilo . exibir = "flexível" ;
 }
 
fecharModal ( ) {
 esse . querySelector ( "#modal-contact-dark-overlay" ) . estilo . exibir = "nenhum" ; 
esse . querySelector ( "#contact-modal-container" ) . estilo . exibir = "nenhum" ;
 }

 janelaClicada ( ) { 
if ( evento. alvo === documento. querySelector ( '#contact-modal-container' ) ) {
 esse . fecharModal ( )
 }
 }
 }
 
elementos personalizados. define ( 'shopify-contact-form' , ShopifyContactForm ) ;
 </roteiro> _