Nuestro Blog

Manuel Piquer Estudio

Hacer una página de gracias personalizada, formulario con elementor, Variables POST

Ya vimos como crear una única página de «Gracias» con el nombre de los visitantes colocado dinámicamente en el título mediante Variables GET.

VER EL ARTICULO DONDE HABLAMOS DE VARIABLES GET

Comenzamos con el método POST

Paso 1: El Formulario

El primer paso, es crear un formulario de contacto, que realizaremos usando el widget Elementor Form.

Paso 1a:  Lo primero en este caso es poner nombre al formulario , por ejemplo Form Name: Contacto.

Como hicimos en el anterior vamos a recopilar el nombre del visitante (En este ejemplo, solo necesitamos el nombre, pero podríamos recopilar todos los datos que nos interesen).

Dentro del campo de formulario para el nombre, ves a la configuración «Avanzada» y toma nota de la «ID» de ese campo (en este ejemplo, usare «fname» como referencia al «nombre del visitante»).

Redirigir después del envío del formulario

Paso 1b:  Después queda configurar una redirección hacia la página de agradecimiento después de enviar el formulario. Para hacer esto, navega a la pestaña «Acciones después del envío» dentro de la configuración del formulario y seleccione «redireccionar» de la lista desplegable.

Después de agregar «Redireccionar» a sus acciones, obtendrás una nueva pestaña llamada «Redireccionamiento» en la configuración del formulario.
Abre la pestaña Redirigir y escribe la URL para la página de agradecimiento » /Gracias «.

 

Paso 2: La página de gracias

A continuación, vamos a abrir nuestra página de gracias con el editor de Elementor.
Por lo general, pondré un texto, una foto Antes del ¡Gracias! y después, para vestir un poco mas la pagina, para ellos usare, siguiendo el ejemplo:

  • el widget Titulo para «Solicitud recibida»,
  • el widget Imagen para la carta ,
  • el widget SHOTCODE para nuestro gracias personalizado , que llamaremos [1000Gracias]
  • y por ultimo de nuevo el widget Titulo para «Nuestro equipo se pondrá en contacto…..»

Paso 3: El codigo

Validación del Formulario

Nos vamos a nuestro panel de WordPress >> Apariencia / editor de archivos de temas /
y seleccionamos y editamos  la pagina functions .php para añadir este código.

/* datos de Formulario Elementor de Nombre: 'Contacto' */

add_action( 'elementor_pro/forms/new_record', function( $record, $ajax_handler ) {
//verfifica formulario
$form_name = $record->get_form_settings( 'form_name' );
if ( $form_name != 'Contacto' ) {
return;
}

$raw_fields = $record->get( 'fields' );
$fields = [];
foreach ( $raw_fields as $id => $field ) {
$fields[ $id ] = $field['value'];
}

$fnombre = $fields['fname'];
$output['result'] = datos_ajax($fnombre);
$ajax_handler->add_response_data( true, $output );

error_log(print_r($record, TRUE));
$form_name = $record->get_form_settings( 'form_name' );
$ajax_handler->add_response_data( 'form_name', $form_name );
}, 10, 2);

function datos_ajax ($fnombre) {
session_start();
$_SESSION['Vpost'] = ', '.$fnombre; // Nombre
}

function gracias ($atr) {
echo '<h2 class="elementor-heading-title elementor-size-default" style=" text-align: center; ">¡Gracias'. $_SESSION['Vpost']. '!</h2>';
}
add_shortcode ('1000Gracias', 'gracias');

Básicamente lo que hace este código es recoger el valor del campo nombre y crear el Shortcode 1000Gracias.

Ya tendríamos nuestra pagina de  Gracias, Francisco! , espero que te sirva en tus proyectos.

 

Otros Articulos