Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing forms from netlify to apex #36

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Changing forms from netlify to apex #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
67ae4a8
refactor: Change the form from be our client to apex
allythy Jun 28, 2021
85b040e
refactor: Change the form from contact us to apex
allythy Jun 29, 2021
4c7196b
fix: Add page number from form url
allythy Jun 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 7 additions & 93 deletions _includes/client-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,99 +20,13 @@ <h1 class="title is-2 has-text-centered has-text-white">
</div>

<div class="column">
<form name="client" method="POST" data-netlify="true">
<div class="field-body">
<div class="field">
<label class="has-text-grey-light">Nome</label>
<p class="control is-expanded has-icons-left">
<input class="input" type="text" name="nome" placeholder="Nome" required/>
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</p>
</div>
<div class="field">
<label class="has-text-grey-light">Email</label>
<p class="control is-expanded has-icons-left has-icons-right">
<input class="input" type="email" name="email" placeholder="Email" required/>
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
</p>
</div>
</div>

<div class="field-body pt-4">
<div class="field">
<label class="has-text-grey-light">Empresa</label>
<p class="control is-expanded has-icons-left">
<input class="input" type="text" name="empesa" placeholder="Empresa" required/>
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</p>
</div>
<div class="field">
<label class="has-text-grey-light">Celular</label>
<p class="control is-expanded has-icons-left has-icons-right">
<input id="client-mask-phone" class="input" type="tel" name="telefone" placeholder="Celular" required/>
<span class="icon is-small is-left">
<i class="fas fa-mobile-alt"></i>
</span>
</p>
</div>
</div>

<div class="field pt-4">
<label class="has-text-grey-light">Ramo da atividade</label>
<div class="control">
<input class="input" type="text" name="atividade" placeholder="Informe atividade" required/>
</div>
</div>

<div class="field-body">
<div class="field pt-4">
<label class="has-text-grey-light">Cidade</label>
<div class="control">
<input class="input" type="text" name="cidade" placeholder="Informe sua cidade" required/>
</div>
</div>
<div class="field pt-4">
<label class="has-text-grey-light">Bairro</label>
<div class="control">
<input class="input" type="text" name="bairro" placeholder="Informe seu bairro" required/>
</div>
</div>
</div>

<div class="field-body">
<div class="field pt-4">
<label class="has-text-grey-light">Rua</label>
<div class="control">
<input class="input" type="text" name="rua" placeholder="Informe sua rua" required/>
</div>
</div>
<div class="field pt-4">
<label class="has-text-grey-light">CNPJ</label>
<div class="control">
<input class="input" type="text" name="cnpj" placeholder="Informe seu CNPJ" required/>
</div>
</div>
</div>


<div class="field pt-4">
<label class="has-text-grey-light">Ponto de Referência</label>
<div class="control">
<input class="input" type="text" name="referencia" placeholder="Informe um local de referência" required/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-link">Enviar</button>
</div>
</div>
</form>
<div class="columns forms-center">
<iframe
id="client_form"
src="https://oxar.appetiteapex.com/ords/f?p=120:2"
frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
Expand Down
74 changes: 6 additions & 68 deletions _includes/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,77 +17,15 @@ <h1 class="title is-2 has-text-centered has-text-white">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3968.842902595309!2d-35.21445968458844!3d-5.877692059520619!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7b2f8ab1c239bb7%3A0xc6eb6181da5e82a6!2sCDA%20Distribuidora!5e0!3m2!1spt-BR!2sbr!4v1601060283667!5m2!1spt-BR!2sbr" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
<div class="column">
<div class="column container-iframe">
<p class="title is-5 has-text-centered has-text-white">
{{ site.data.contact.text }}
</p>

<!-- Forms -->
<form name="contact" method="POST" data-netlify="true">

<div class="field">
<label class="label has-text-white">Nome</label>
<div class="control has-icons-left">
<input class="input" type="text" name="name" placeholder="Informe seu nome" required>
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</div>
</div>

<div class="field">
<label class="label has-text-white">Email</label>
<div class="control has-icons-left">
<input class="input" type="email" name="email" placeholder="Informe seu email" required>
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
</div>
</div>

<div class="field">
<label class="label has-text-white">Telefone</label>
<div class="field-body">
<div class="field is-expanded">
<div class="field has-addons">
<p class="control is-expanded control has-icons-left">
<input id="phone-mask-contact" class="input" type="tel" name="phone" placeholder="Informe seu número" required>
<span class="icon is-small is-left">
<i class="fas fa-mobile-alt"></i>
</span>
</p>
</div>
<p class="help has-text-white">Coloque assim o número. Exemplo: 84-9923-1632</p>
</div>
</div>
</div>


<div class="field">
<label class="label has-text-white">Assunto</label>
<div class="control">
<div class="select">
<select name="role[]">
<option value="Dúvida">Dúvida</option>
<option value="Sugestão">Sugestão</option>
<option value="Reclamação">Reclamação</option>
</select>
</div>
</div>
</div>

<div class="field">
<label class="label has-text-white">Mensagem</label>
<div class="control">
<textarea class="textarea" placeholder="Digite sua mensagem" name="message" required></textarea>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-link">Enviar</button>
</div>
</div>
</form>
<iframe
class="contact-us-iframe"
src="https://oxar.appetiteapex.com/ords/f?p=122:6"
frameborder="0">
</iframe>
</div>
</div>
</div>
Expand Down
12 changes: 12 additions & 0 deletions _sass/cda/_client.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,15 @@
background-size: cover;
background-position: center;
}

#client_form{
height: 70vh;
width: 40vw;
}

@media (max-width: 768px) {
#client_form{
height: 100vh;
width: 100vw;
}
}
18 changes: 18 additions & 0 deletions _sass/cda/_contact.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,21 @@
width: 100%;
height: 100%;
}

.container-iframe{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contact-us-iframe{
height: 45vh;
width: 40vw;
}

@media (max-width: 768px) {
.contact-us-iframe{
height: 70vh;
width: 100vw;
}
}