Worpress : Formulario Contactenos con Plugin Piotnet Forms y Elementor free

→ Ir a la Página oficial de  Piotnet Forms  

→ Ir a  Soporte Piotnet Forms  

Al enviar el formulario si yo quiero que vaya a otra landing

En el action after del boton submit tienes alguna opción para hacer un redirect. Si la respuesta es si se te creará una sección nueva en la que podrás ingresar la url de tu landing.

Enviar Copia del mensaje a otro correo

Selecionamos el boton Submit en su configuración vamos a la sección Email

Bcc : aqui ponemos los correos para enviar una copia oculta  

Cómo crear diseños de formularios de varias columnas en Piotnet Forms

https://piotnetforms.com/docs/how-to-create-multi-column-form-layouts-in-piotnet-forms/

Agregamos un span con la clase line debajo de cada input

Deseamos agregar un span con la  clase line debajo de cada input , para que cuando pasemos el mouse la clase line muestre un efecto 

Codigo JS

 /*
  * Insertamos un span antes de la caja de texto
  */
document.addEventListener( 'DOMContentLoaded', function () {
	 jQuery(document).ready(function () {
		 var jaf = jQuery.noConflict();
         jaf("#form-field-nombre").after("<span class='line'></span>");
		 jaf("#form-field-email").after("<span class='line'></span>");
		 jaf("#form-field-telefono").after("<span class='line'></span>");
		  jaf("#form-field-asunto").after("<span class='line'></span>");
		 jaf("#form-field-mensaje").after("<span class='line'></span>");
	});   
});	

Codigo CSS

Codigo CSS paa dar el efecto al pasar el mouse

.piotnetforms-field-container {
		position: relative;
		display: inline-block;
		width: 100%;

		.line {
			display: block;
			height: 1px;
			width: 100%;
			position: relative;			
			background-color:rgba(39,22,13,0.2); // color Inicial al cargar
			transition: all 0.4s ease;
			z-index: 1;
			margin-top: -1px;
			&:before {
				content: "";
				display: block;
				width: 0;
				height: 1px;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				background-color: #27160D; // color cuando pasa el mouse
			    transition: all 0.4s ease;
			}
		}
		input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], 
        input[type="password"], input[type="search"], select, textarea, textarea.wp-editor-area {
			&:focus,
			&:active {
				+ .line:before {
					width: 100%;
				}
			}
		}
		&:hover {
			.line:before {
				width: 100%;
			}
		}		
	  	
    }     // FIn style-line antes .piotnetforms-field-container  

Implementando icono en cada  input

Vamos  a implementar los iconos de Bootstrap que son gratis desde el siguiente enlace

https://icons.getbootstrap.com/#usage

Recuerda implementar en tu archivo functions.php 

	wp_enqueue_style(  'bootstrap_icono', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css');	

Recuerda que la version gratis del Plugin Piotnet Forms  no nos permite agregar iconos asi que lo haremos mediante codigo

Codigo JS

/*
 * Implementando icono a las cajas
https://icons.getbootstrap.com/#usage
https://unidadvirtual.com/insertar-icono-gratis-en-nuestra-web-con-bootstrap
*/

document.addEventListener( 'DOMContentLoaded', function () {
   jQuery(document).ready(function () {
    var jbf = jQuery.noConflict();
    jbf ("#form-field-nombre").before("<i class='bi bi-person'></i>");

 });   
});	

document.addEventListener( 'DOMContentLoaded', function () {
   jQuery(document).ready(function () {
    var jbf = jQuery.noConflict();
    jbf ("#form-field-email").before("<i class='bi bi-envelope'></i>");

 });   
});	

document.addEventListener( 'DOMContentLoaded', function () {
   jQuery(document).ready(function () {
    var jbf = jQuery.noConflict();
    jbf ("#form-field-telefono").before("<i class='bi bi-telephone'></i>");

 });   
});	

document.addEventListener( 'DOMContentLoaded', function () {
   jQuery(document).ready(function () {
    var jbf = jQuery.noConflict();
    jbf ("#form-field-asunto").before("<i class='bi bi-exclamation-circle'></i>");

 });   
});	

document.addEventListener( 'DOMContentLoaded', function () {
   jQuery(document).ready(function () {
    var jbf = jQuery.noConflict();
    jbf ("#form-field-mensaje").before("<i class='bi bi-pencil'></i>");

 });   
});	

Codigo CSS

.piotnetforms-field-container .bi { position: absolute;z-index: 1; top: 0; left: 0;}

// margin-left es para dar separacion entre el icono y el Placeholder
// width: 45%;
.piotnetforms-size-{border: none; margin-left:30px ; width :95%}