Crear formularios en Frontend con ACF

Es muy f√°cil crear un grupo de campos de ACF y luego utilizar sus formularios en el Backend para gestionar la informaci√≥n de una p√°gina web, pero ¬Ņqu√© pasa si este formulario tenemos que mostrarlo en el Frontend para que los usuarios carguen datos?

A continuación voy a mostrarte los pasos para crear el formulario ACF en el Frontend utilizando la función acf_form() y sus parámetros.

Caso de ejemplo

Vamos a suponer que un cliente nos pide tener una agenda con contactos que él mismo pueda cargar desde el backend del sitio web, pero también necesita que los visitantes puedan dejar sus datos en la página web (sin tener la necesidad de loguearse).

Posible solución:

  • Creamos un Custom Post Type «Contacto»
  • Creamos los campos personalizados con ACF para el Custom Post Type «Contacto».
  • Creamos una p√°gina llamada «D√©jame tus datos»
  • Creamos una plantilla para esa p√°gina page-dejame-tus-datos.php donde desplegaremos el formulario con el siguiente c√≥digo:
<?php

// Parámetros de la función acf_form().
$args = [
	'new_post'		=> array(
		'post_type'		=> 'contacto',
		'post_status'	=> 'publish'
	),
	'post_id'         => 'new_post',
	'post_title'      => true,
	'submit_value'    => 'Actualizar',
	'updated_message' => 'Contacto actualizado',
];

// Llamamos a la función acf_form() de ACF pasando los parámetros definidos en el paso anterior.
acf_form( $args );</pre>

El código paso a paso

Una vez mostrado el código final vamos a ir desgranándolo paso a paso para entenderlo mejor y ver que otras posibilidades podemos implementar.

Creación del Custom Post Type Contacto

Primero vamos a crear el Custom Post Type «Contacto» para luego poder a√Īadirle el conjunto de campos personalizados. Tambi√©n adjuntaremos al CPT una taxonom√≠a «Intereses» para que los contactos puedan seleccionar sobre qu√© temas est√°n interesados.

<?php

// Función para crear el CPT 'contacto' y la taxonomía 'intereses'.
function crear_custom_post_type_contacto() {
	
	// Parámetros para la creación del CPT contacto.
	$args = [
		'has_archive' =>; false,
		'labels'    =>; [
			'name' =>; 'Contactos',
		],
		'public' =>; 'true',
		'show_ui'           =>; true,
		'show_in_menu'      =>; true,
		'show_in_rest'      =>; true,
	];
	register_post_type( 'contacto', $args );

	// Parámetros para la creación de la taxonomía 'intereses'.
	$args = [
		'labels' =>; [
			'name' =>; 'Intereses',
			'singular_name' =>; 'Interés',
			'menu_name' =>; 'Intereses'
		],
	];
	register_taxonomy( 'interes', 'contacto', $args  );
	
}
add_action( 'init', 'crear_custom_post_type_contacto' );

Creación de los campos personalizados con ACF

Creamos los siguientes campos con el plugin de ACF:

  • Email: la direcci√≥n de correo electr√≥nico del contacto. El campo ser√° del tipo Email para agregar los controles de validaci√≥n.
  • Direcci√≥n: Un simple campo de texto para que el contacto pueda cargar su direcci√≥n f√≠sica.
  • ¬ŅC√≥mo nos has conocido?: Un campo del tipo selector con 3 posibles valores («A trav√©s de la p√°gina de Facebook», «A trav√©s de vuestro Newsletter» y «A trav√©s de un referido»).
  • Intereses: Campo del tipo taxonom√≠a, donde mostraremos los t√©rminos cargados en la taxonom√≠a «Intereses».

Una vez cargados todos los campos solo debemos especificar la «Ubicaci√≥n» del mismo, para ello seleccionaremos que el «Post Type es igual a Contactos».

Resultado final de la carga de campos en ACF.

Creaci√≥n de la p√°gina «D√©jame tus datos»

Vamos a crear una p√°gina de WordPress para luego poder asignarle una plantilla personalizada. Para ello basta con ir al men√ļ P√°ginas ¬Ľ A√Īadir nueva y publicarla con el t√≠tulo «D√©jame tus datos» (esto crear√° un slug dejame-tus-datos que utilizaremos en el siguiente paso).

Creación de la plantilla personalizada

Vamos a agregar un nuevo fichero a nuestro tema (o tema hijo) para personalizar el HTML de la p√°gina «D√©jame tus datos». Para ellos necesitamos crear un nuevo fichero llamado page-dejame-tus-datos.php siguiendo la nomenclatura de la jerarqu√≠a de plantillas de WordPress.

En este fichero agregaremos el siguiente código:

<?php
// Debemos agregar esta función al principio de todo para que
// cargue las dependencias necesarias para renderizar el formulario.
acf_form_head();

get_header();
?>

<section>

	<main role="main">
		<?php
		while ( have_posts() ) : the_post(); ?>

			<h1><?php the_title(); ?></h1>
			<?php
			the_content();

			$args = [
				'new_post'        => [
					'post_type'   => 'contacto',
					'post_status' => 'publish'
				],
				'post_id'         => 'new_post',
				'post_title'      => true,
				'submit_value'    => 'Actualizar',
				'updated_message' => 'Contacto actualizado',
			];

			acf_form( $args );

		endwhile;
		?>

	</main>

</section>
Renderizado del formulario ACF en el Frontend de WordPress

Detalles importantes del código

La función acf_form() tiene dos parámetros especiales llamados post_id y new_post que configurados correctamente nos permiten guardar la información en nuestra estructura de datos.

El par√°metro post_id se utiliza para editar una entrada (o Custom Post Type) que ya existe, pero si le asignamos el valor 'new_post', crear√° una nuevo registro.

El parámetro new_post tendrá un array con los datos del post a guardar. Los valores de este array son los mismos que utilizamos con la función estándar de WordPress wp_insert_post(). En el CODEX podrás encontrar más detalles sobre los parámetros de esta función.

acf_form_head()

Hay que tener en cuenta que la función acf_form() solamente creará el formulario para que los usuarios puedan carga información, la programación para guardar verdaderamente estos datos se encuentra en la función acf_form_head() que debemos llamar al principio de nuestra plantilla antes de renderizar cualquier código HTML (inclusive antes de la función wp_head() estándar de WordPress).

Otros parámetros de la función acf_form()

En mi ejemplo solo he utilizado algunos de los tantos parámetros que tiene esta opción. Aquí te dejo el resto para que puedas investigar un poco más y adaptar el formulario a tus necesidades.

<?php
$settings = array(

	/* (string) Ser√° el nombre del atributo ID del formulario. Por defecto 'acf-form' */
	'id' => 'acf-form',
	
	/* (int|string) El ID del post para cargar y guardar la información. Por defecto es el ID del post actual.
	También se puede especificar el valor 'new_post' para crear un nuevo post con el envío de los datos.*/
	'post_id' => false,
	
	/* (array) Un array con información para crear el nuevo post. Puedes ver todos los parámetros disponibles en la función wp_insert_post de WordPress.
	El par√°metro 'post_id' debe tener el valor 'new_post'*/
	'new_post' => false,
	
	/* (array) Un array con los ID/Keys de los grupos de campos personalizados para sobrescribir los del formulario */
	'field_groups' => false,
	
	/* (array) Un array con los IDs/keys de los campos para sobrescribir los del formulario. */
	'fields' => false,
	
	/* (boolean) Si es true se muestra un campo de texto para cargar el título del post. Por defecto es false */
	'post_title' => false,
	
	/* (boolean) Si es true se muestra un textarea para cargar el contenido del post. Por defecto es false */
	'post_content' => false,
	
	/* (boolean) Si es true crear√° la etiqueta <form>. √ötil cuando se agrega a un formulario que ya existe. Por defecto es  true */
	'form' => true,
	
	/* (array) Un array de atributos para agregar a la etiqueta <form> */
	'form_attributes' => array(),

	/* (string) La URL a la que se redireccionar√° luego de haber enviado el formulario. Por defecto es la URL actual con un par√°metro GET '?updated=true'.
	Podemos utilizar el comodín '%post_url%' que se convertirá en el permalink.
	Podemos utilizar el comodín '%post_od%' que se convertirá en el ID del post.*/
	'return' => '',
	
	/* (string) HTML extra que se a√Īadir√° antes de los campos. */
	'html_before_fields' => '',
	
	/* (string) HTML que se a√Īadir√° despu√©s de los campos. */
	'html_after_fields' => '',
	
	/* (string) El texto que se muestra en el botón. */
	'submit_value' => __("Update", 'acf'),
	
	/* (string) Un mensaje que se mostrará sobre el formulario una vez que se haya hecho la redirección. también se puede espeificar el valor false para que no haya mensajes. */
	'updated_message' => __("Post updated", 'acf'),
	
	/* (string) Determina dónde se ubicarán las etiquetas de los campos. Por defecto es 'top'.
	Los valores posibles son: 'top' (arriba de los campos) o 'left' (a la izquierda de los campos). */
	'label_placement' => 'top',
	
	/* (string) Determina dónde se ubicarán las instrucciones de los campos. Por defecto es 'label'
	Los posibles valores son: 'label' (debajo de las etiquetas) or 'field' (debajos de los campos) */
	'instruction_placement' => 'label',
	
	/* (string) Define la etiqueta que se utilizar√° para envolver el campo. Por defecto es 'div' 
	Los posibles valores son: 'div', 'tr', 'td', 'ul', 'ol', 'dl' */
	'field_el' => 'div',
	
	/* (string) Determina si utilizar el WP upload o un input b√°sico para la carga de im√°genes. Por defecto es 'wp' 
	Los posibles valores son:'wp' o 'basic'.*/
	'uploader' => 'wp',
	
	/* (boolean) Si es true se incluye un campo oculto para evitar los envíos que no hayan sido enviados por humanos. Por defecto es true. */
	'honeypot' => true,
	
	/* (string) HTML que se usa para renderizar el mensaje de actualización. */
	'html_updated_message'	=> '<div id="message" class="updated"><p>%s</p></div>',
	
	/* (string) HTML que se usa para renderizar el botón de envío. */
	'html_submit_button'	=> '<input type="submit" class="acf-button button button-primary button-large" value="%s" />',
	
	/* (string) HTML que se usa para renderizar la animación de cargando del botón de envío. */
	'html_submit_spinner'	=> '<span class="acf-spinner"></span>',
	
	/* (boolean) Si es true sanitiza todos los datos enviados en la variable $_POST con la función wp_kses_post(). Por defecto es true. */
	'kses'	=> true
			
);

Agregar m√°s funcionalidad

¬ŅQu√© pasa si queremos realizar m√°s acciones cuando el usuario guarda los datos? Para ello podemos utilizar la acci√≥n acf/save_post, el cual nos permite agregar cualquier otra l√≥gica que necesitamos para el negocio tanto antes como despu√©s del guardado de los datos.

Agregar m√°s funcionalidad ANTES

Para agregar más funcionalidad antes de que se guarden los datos, solamente debemos especificar una prioridad menor a 10 en la llamada a la acción acf/save_post, por ejemplo:

<?php

// Esta funci√≥n a√Īade nuevas funcionalidades
// antes de guardar los datos enviados desde
// el Frontend.
function acf_guardar_antes( $post_id ) {
	// Por ejemplo validar los datos con otro sistema.
	ValidarDatosEnOtroSistema( $_POST );

	// O bien registrar un log.
	wp_insert_post( ['post_type' =>; 'log'], 'post_title' =>; 'Nuevo Contacto desde Frontend' ] );
}

add_action('acf/save_post', 'acf_guardar_antes', 1);

Agregar m√°s funcionalidad DESPU√ČS

Y como era de esperarse, para agregar m√°s funcionalidades despu√©s de guardar los datos, solamente debemos cambiar la prioridad de la acci√≥n a un n√ļmero mayor que 10, por ejemplo:

<?php

/*
Esta funci√≥n a√Īade nuevas funcionalidades
después de guardar los datos enviados desde
el Frontend.
*/
function acf_guardar_despues( $post_id ) {
	// Enviar email al administrador notificando del nuevo contacto.
	EmailDeNuevoContacto( $post_id );

	// También podríamos enviar un email de agradecimiento al contacto.
	EmailDeBienvenida( $post_id );
}

add_action('acf/save_post', 'acf_guardar_despues', 20);

Conclusión

Yo no soy muy fan√°tico de crear formularios de Frontend con ACF, pero es verdad que puede ayudar a mucha gente a resolver alg√ļn que otro tipo de solicitud. Si ese es tu caso, espero que este art√≠culo te haya valido.

Si tienes alguna duda/mejora sobre el funcionamiento de este código déjame un comentario y con gusto le echaré un ojo.

Happy coding!
Mauricio


¬ŅQu√© te pareci√≥ el art√≠culo?
No molaPobreMolaMuy bueno¬°Excelente! (3 votos, promedio: 5,00 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Inform√°tica y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializ√≥ en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es N√≥made Digital desde el a√Īo 2015, actividad que combina sus dos principales pasiones: la inform√°tica y los viajes, y refleja sus experiencias a trav√©s de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


4 thoughts on “Crear formularios en Frontend con ACF”

  1. Genial, muchas gracias por explicarlo paso a paso, en cuanto a tu conclusi√≥n «Yo no soy muy fan√°tico de crear formularios de Frontend con ACF» yo tengo pensado en crear a manija una intranet para el colegio donde trabajo de manera que el personal pueda rellenar diversas solicitudes y actualizar sus datos personales cuando lo necesiten, ¬Ņcrees que hay otra manera m√°s «c√≥moda» que trabaje igualmente con ACF?.

    Muchas gracias nuevamente por tus explicaciones y por la aportaci√≥n que haces para los que empezamos con WP y estamos a√ļn un poco despistados.

    1. Hola Tino…
      Escribí el artículo para mostrar lo fácil que es implementar un formulario con ACF y guardar los valores en los Custom Post Types.
      Pero si tienes un escenario un poco m√°s complicado como el que me mencionas bien podr√≠as hacerlo a mano (ser√° un gran trabajo porque tienes que picar todo, hasta los controles de datos con Javascript) o bien utilizar Gravity Form m√°s un plugin que te habilita a guardar los valores en CPT’s llamado ¬ęGravity Forms + Custom Post Type¬Ľ (https://wordpress.org/plugins/gravity-forms-custom-post-types/).

      Un saludo,
      Mauricio

  2. De 10 como siempre tus aportaciones ūüôā no sab√≠a que se pod√≠an hacer con ACF formularios en el frontend. Siempre he usado otros plugins, pero nunca est√° de m√°s saber que se pueden hacer tambi√©n as√≠…gracias!!!

    1. Me alegro que te gusten Jorge. ACF es un mundo que no deja de sorprenderme. Intentaré seguir subiendo contenido de este tipo para seguir aprendiendo y dar algo más de luz a los demás desarrolladores.
      Un saludo,
      Mauricio

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

× ¬ŅPuedo ayudarte?