ContactForm – Aplicar valores a campos desde parámetros de la url

Cómo podemos aplicar valores a campos del formulario creado con ContactForm desde parámetros pasados por la url.

Tutoriales WordPress

Previa

Empecemos con uno de nuestros tutoriales de WordPress con una de las dudas que más se generan a la hora de trabajar con formularios.

Tenemos un formulario en WordPress creado con ContactForm.

Este formulario tiene campos que queremos rellenar con datos que nos vienen como parámetros desde la url.

El formulario en ContactForm

Los que habéis trabajado con ContactForm, sabéis que para crear un campo, debe hacerse añadiendo campos de este modo:

[text* valor-nomina]
[text* nombre]

Esto creará dos Inputs de formulario con los id de valor-nomina y nombre.

Primero crearemos el ContactForm y luego lo añadiremos con un ShortCode en una página que tengamos. Pues eso, cread el formulario y quedaos con el ShortCode.

La página

Craremos la página ‘contacto’ donde como contenido pondremos un texto y el shortcode que añade el Formulario de ContactForm, que normalmente es de este tipo:

[contact-form-7 id="5" tittle="Formulario contacto"]

Veamos que funciona

Ya tenemos el contact form y la página. Pues la visitamos en la web para ver que funciona y se muestra el formulario de forma correcta:

https://miweb.com/contacto

La url

Ahora, en el botón o menú que vaya hacia la página de contacto, le añadiremos a la url, unos parámetros para que el formulario se autorellene:

https://miweb.com/contacto?valor-nomina=7500&nombre=ToniCanto

Si vamos ahora a la página no pasará nada. se mostrará el formulario como siempre. Hay que modificar el contactform para que coja bien los datos que le vienen por la Url.

Modificamos de nuevo el contactform

Vamos al formulario que hemos creado y añadimos a cada campo un código para que coja los datos por defecto. Quedaría tal que así:

[text* valor-nomina default:get]
[text* nombre default:get]

Añadiendo default:get lo que hace es buscar en la url el parámetro que tenga el mismo nombre que el campo, para aplicar ese valor por defecto al campo del formulario.

Fijaos que el nombre del campo es valor-nomina:

[text* valor-nomina default:get]

Y que en la url, el parámetro que le pasamos, se llama igual valor-nomina:

https://miweb.com/contacto?valor-nomina=7500&nombre=ToniCanto

De esta manera, cuando se cargue la págian con el formulario ContactForm, el campo valor-nomina irá a la url y buscará el parámetro con el mismo nombre, y lo asignará como valor por defecto.

Espero que este breve artículo os pueda ayudar a rellenar los campos de ContactForm paśandole valores como parámetros de la url.


Más información