Formulário Interago Estilo 01 - Comp. Interago

Formulário dinâmico composto por scripts e estilos prontos.

by francisco_negrao

HTML

<link rel="stylesheet" href="https://componentes.interago.com.br/bootstrap-grid.css">
<link rel="stylesheet" href="https://componentes.interago.com.br/global-css.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
      <div class="i-form-01">
          <script src="https://www.interago.com.br/App/Extensions/1/tag/components/form.js"></script>
      </div>

CSS

.i-form-01 {
  padding: 20px;
  background-color: #fff;
}

.i-form-01 input, .i-form-01 textarea {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  border: solid 1px #ccc;
}

.i-form-01 input::placeholder {
  color: #bbb;
}

.i-form-01 input:focus, .i-form-01 textarea:focus {
    border-color: rgb(81 191 255 / 80%);
    box-shadow: 0 1px 1px rgb(229 103 23 / 8%) inset, 0 0 4px rgb(23 134 229 / 60%);
    outline: 0 none;
}

.i-form-01 label {
  font-weight: 600;
}

.i-form-01 .formLink {
    display: inline-block;
    border-radius: 5px;
    background-color: #00afef;
    border: solid 2px transparent;
}

.i-form-01 .formLink:hover {
    background-color: #fff;
    color: #000;
    border: solid 2px #00afef;
}

.i-form-01 i {
  font-size: 12px;
  margin-left: 5px;
}

#formSuccessfullSend {
    background-color: #a8d79d;
    max-width: 100%;
    display: inline-block;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    font-weight: 500;
}

#formContainer .sendOk {
    display: none;
    padding: 10px;
    background-color: #ace3ac;
    border: solid 1px #5fa95f;
    border-radius: 5px;
    color: #000;
    font-size: 14px;
}

JavaScript

//submit on js
  let sendButton = document.getElementById('iSendButton');
  sendButton.addEventListener('click', e => {
  
	sendButton.style.pointerEvents = 'none';
	  
    //all cool to send - Lets lead the contact to a conversion page
        
		setTimeout(function(){
    
			window.location.href = "https://www.meudominio.com.br/obrigado-pelo-contato";
      
      //uncomment this part, if you dont want a conversion page
      
			//document.getElementById('#formContainer').innerHTML = '<div class="col-12"><p class="sendOk">Sua mensagem foi enviada com sucesso. Obrigado!</p></div>'; 
    
		}, 1000);
});