GravityFormsSnippets.md

Gravity Forms Snippets

1. Carregar o script para mascara de telefones

<script src="/wp-content/themes/<child_theme>/js/maskphone.js" type="text/javascript"></script>

2. Carregar o formulário

Ex.: [gravityform id="1" title="false" description="false" ajax="true"]

3. Aplica mascara de telefone no input_2 do gform_1

<script type="text/javascript">
  mascaraTelefone(gform_1.input_2); // Form ID e NAME input
</script>

4. Altera o tipo dos campos

<script type="text/javascript">
window.addEventListener('load', function() {
  document.getElementById('input_1_2').type = 'email'; // Altera field email
  document.getElementById('input_1_3').type = 'tel'; // Altera field telefone
  document.getElementById('input_1_5').type = 'tel'; // Altera field idade do aniversariante
  document.getElementById('input_1_9').type = 'tel'; // Altera field data da festa
  document.getElementById('input_1_7').type = 'tel'; // Altera field numero convidados
})
</script>

maskphone.js

function mascaraTelefone( campo ) {

	function trata( valor,  isOnBlur ) {
		
		valor = valor.replace(/\D/g,"");
		valor = valor.replace(/^(\d{2})(\d)/g,"($1)$2");
		
		if( isOnBlur ) {
			
			valor = valor.replace(/(\d)(\d{4})$/,"$1-$2");
		} else {
			valor = valor.replace(/(\d)(\d{3})$/,"$1-$2");
		}
		return valor;
	}
	
	campo.onkeypress = function (evt) {
		 
		var code = (window.event)? window.event.keyCode : evt.which;
		var valor = this.value
		
		if(code > 57 || (code < 48 && code != 8 )) {
			return false;
		} else {
			this.value = trata(valor, false);
		}
	}
	
	campo.onblur = function() {
		
		var valor = this.value;
		if( valor.length < 13 ) {
			this.value = ""
		}else {		
			this.value = trata( this.value, true );
		}
	}
	
	campo.maxLength = 14;
}