Skip to content

Instantly share code, notes, and snippets.

@elton-fonseca
Created July 19, 2024 14:27
Show Gist options
  • Save elton-fonseca/ab10482a7a7457ce2316b54f5d25b255 to your computer and use it in GitHub Desktop.
Save elton-fonseca/ab10482a7a7457ce2316b54f5d25b255 to your computer and use it in GitHub Desktop.
Mautic form
<style>
* {
font-family: "Muli", sans-serif;
}
.form-embed {
padding: 1rem;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 1rem;
border-radius: 5px;
height: 367px;
background: linear-gradient(90deg, rgb(80, 80, 249) 0%, rgb(8 0 0 / 88%) 100%);
border: 0px solid rgba(255, 255, 255, 0.996);
box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 0px 0px inset;
overflow: hidden;
}
.form-embed input {
width: 100%;
box-sizing: border-box;
padding: .7rem;
}
.form-embed input:focus {
outline: blue;
}
.info {
display: flex;
align-items: flex-start;
justify-content: center;
gap: .5rem;
text-align: center;
}
.info p {
margin: 0;
font-size: .6rem;
color: #fff;
}
.titulo-form {
color: #fff;
font-size: 1rem;
font-weight: 900;
text-align: center;
}
.btn-submit {
font-size: 1rem;
display: block;
margin-inline: auto;
border: 0;
padding: 15px;
color: #000;
background-color: #48d259fe;
border-radius: 5px;
box-shadow: rgba(91, 91, 91, 0) 1px 1px 1px 1px;
font-weight: 600;
margin-bottom: .5rem;
cursor: pointer;
transition: .4s;
}
.btn-submit:hover {
transform: scale(1.05);
}
</style>
<form autocomplete="false" role="form" method="post" action="https://marketing.treinaweb.com.br/form/submit?formId=4" data-mautic-form="twformaulagratuitaamauricss" enctype="multipart/form-data" class="form-embed">
<h2 class="titulo-form">
Preencha seus dados abaixo
</h2>
<div >
<input type="text" name="mauticform[nome]" required placeholder="Nome Completo">
</div>
<div >
<input type="email" name="mauticform[email]" required placeholder="E-mail">
</div>
<div >
<input type="tel" name="mauticform[whatsapp]" required placeholder="Celular">
</div>
<div >
<button class="btn-submit" name="mauticform[submit]" value="1" type="submit">Enviar</button>
</div>
<input type="hidden" name="mauticform[formId]" id="mauticform_twformaulagratuitaamauricss_id" value="4">
<input type="hidden" name="mauticform[return]" id="mauticform_twformaulagratuitaamauricss_return" value="">
<input type="hidden" name="mauticform[formName]" id="mauticform_twformaulagratuitaamauricss_name" value="twformaulagratuitaamauricss">
<div class="info">
<img width="20" height="20" src="https://img.icons8.com/ios-glyphs/30/48d259/lock-2.png" alt="lock-2"/>
<p>
Suas informações estão seguras e não iremos utilizá-las para<br>
enviar qualquer tipo de SPAM.
</p>
</div>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment