Cómo crear un formulario front-end con ACF

En este tutorial, le mostraré cómo crear un formulario front-end con campos personalizados avanzados (ACF). Entraré en detalles sobre cómo funciona y cómo puedes ajustarlo para que se ajuste a tus necesidades.

Advanced Custom Fields (ACF) es un complemento gratuito que lo ayuda a agregar configuraciones de campo de un montón de tipos a casi cualquier tipo de contenido en WordPress. Puede agregar campos a publicaciones, taxonomías, menús, widgets, usuarios e incluso páginas de administración personalizadas. Su uso principal es para el administrador, pero también puede usarlo para generar los campos en el front-end.

Las aplicaciones para agregar campos ACF al front-end son muchas; puede agregar un formulario para crear y actualizar publicaciones, categorías o usuarios. Con algún código, incluso puede crear un formulario de contacto general donde las respuestas se guardan como publicaciones personalizadas y el código activa notificaciones por correo electrónico en las respuestas del formulario. Como un formulario de contacto normal. Los usos comunes son el uso de la funcionalidad de formulario frontal de ACF para crear formularios y permitir que los visitantes creen o editen contenido del sitio sin iniciar sesión. Pero usa esto con precaución. Esto se abre fácilmente para el spam y el abuso, y en el peor de los casos, los visitantes pueden destruir el contenido o la configuración de su sitio. Como mínimo, debe solicitar a los visitantes que inicien sesión con usuarios válidos para obtener acceso a formularios que pueden alterar el contenido crítico de WordPress (perfil de usuario, publicaciones, etc.).

que haremos

Supongo que el sitio de WordPress ha definido un conjunto de campos adicionales en los usuarios de un rol personalizado (‘ member‘) usando ACF. Estos usuarios no tienen acceso de administrador, pero queremos ofrecerles la posibilidad de editar sus campos personalizados en su perfil. La solución por la que opté es crear una plantilla de página personalizada para actualizar su perfil, que solo muestra el formulario si está conectado y tiene el rol correcto.

Lo mantengo bastante simple en este tutorial, por lo que no incluiré un ejemplo de cómo agregar los campos de perfil de usuario estándar en WordPress (correo electrónico, contraseña, etc.). Eso cae un poco fuera del alcance de este tutorial. Solo permitiré editar los campos ACF en esta página de edición de perfil.

Con ACF, he creado un grupo de campo con un conjunto de configuraciones para los usuarios miembros:

Y tengo una plantilla de página personalizada en mi tema que actualmente se parece a esto: en este momento, solo una plantilla de página única estándar simple;

En línea #11comprobamos si el usuario actual está conectado y tiene el rol personalizado member. Cambie el rol o la regla mínima a lo que quiera permitir para este formulario de front-end. Solo recuerda que incluso el rol más bajo en WordPress subscriber, tiene acceso para editar su perfil en el panel de administración.

En resumen, queremos agregar estos campos en cada miembro en esa página de inicio personalizada:

Cómo funcionan los formularios front-end de ACF

Debe agregar dos llamadas de función en la plantilla en la que desea el formulario de front-end; [acf_form_head](https://www.advancedcustomfields.com/resources/acf_form_head/)()y [acf_form](https://www.advancedcustomfields.com/resources/acf_form/)().

La función acf_form_head()debe colocarse en la parte superior de su plantilla, antes de cualquier salida. Por lo general, en una plantilla esto significa antes [get_header](https://developer.wordpress.org/reference/functions/get_header/)(). La llamada a la función se asegura de que se agreguen todos los scripts y estilos para que los campos ACF se representen correctamente, así como toda la funcionalidad para procesar, validar y enviar el trabajo. No necesitamos agregar ningún parámetro a esta función.

La acf_form()función es la que representa el formulario front-end y debe colocarse donde desea que aparezca el formulario. Acepta una variedad de configuraciones. Necesitamos como mínimo informar sobre qué campos o grupos mostrar y dónde guardarlos.

Cuando se trata de decidir qué campos mostrar, normalmente proporciona un grupo de campos (propiedad field_groups). Pero la acf_form()función también admite proporcionar campos individuales específicos (propiedad fields). También puede proporcionar varios campos o grupos de campos para combinarlos en el mismo formulario. Debido a esto field_groupsespera una matriz. Entonces, incluso si solo desea mostrar un grupo de campos, debe proporcionar esa ID o slug dentro de una matriz.

La segunda propiedad requerida que debe proporcionar en el formulario acf_form()es desde dónde se deben cargar los datos y dónde se deben guardar, en la propiedad post_id. No se deje engañar por el nombre ‘post’. Las reglas para post_idson las mismas cuando usa get_field(), si está familiarizado con el trabajo con ACF desde antes. Si los campos son para una publicación (publicación, página, publicación de tipo de publicación personalizada), solo necesita proporcionar la identificación aquí. Pero si desea cargar y actualizar datos sobre los usuarios, debe seguir este formato: user_{user ID}. Del mismo modo con los campos de una categoría: category_{category ID}. Consulte todas las reglas bajo el encabezado "Obtener un valor de diferentes objetos" en la documentación de ACF enget_field().

Adición del formulario de front-end de ACF a nuestra plantilla

Primero agregamos acf_form_head()en la parte superior, justo antes get_header(), pero después de la declaración de plantilla de página (línea #3). Luego, en el lugar donde queremos representar el formulario, agregamos acf_form()dos propiedades.

Necesitamos averiguar nuestro ID de grupo de campo. Si agregó el grupo de campos por código (tengo una publicación que profundiza sobre cómo agregar campos ACF por código ), ya ha proporcionado un slug de grupo de campos. Luego, proporcionaría el slug a la field_groupspropiedad, en una matriz. Si agregó el grupo de campo en el panel de administración, debe abrir el grupo en el navegador y verificar la URL. Nos interesa el ID que aparece después de ” ?post=“:

En mi ejemplo, el ID es 1145. Entonces eso es lo que proporciono en la matriz de field_groups.

PD: ¡No recomiendo codificar una ID ya que esta ID será diferente en cada instancia de WordPress! Si está trabajando en una instalación local, así como en un servidor de ensayo y producción, definitivamente recomendaría agregar los campos por código en su lugar. De esa manera, puede definir un nombre de grupo de campo y funcionará en todas partes.

En cuanto a la post_idpropiedad, puedo obtener la identificación de usuario actual usando la función de WordPress [get_current_user_id](https://developer.wordpress.org/reference/functions/get_current_user_id/)(). Concateno la cadena ‘ user_‘ y el retorno de esta función como post_id.

¡Y eso es básicamente todo!

Si visito esta página iniciando sesión como usuario miembro, obtendría los valores actuales para ese usuario. Todos los tipos de campo ACF funcionan y se ven bien. Y puedo actualizar los valores usando el formulario de front-end y ver que también se actualicen en el administrador.

Personalización adicional del formulario

Podemos ajustar aún más la configuración pasada a acf_form(). Consulte la documentación de ACF sobre acf_form() para ver todas las configuraciones posibles.

En este momento, nuestro formulario de perfil de usuario muestra "Publicación actualizada" cuando se envía la configuración. Esto no tiene sentido para la configuración del perfil. Podemos personalizar el mensaje con la propiedad updated_message.

Si lo desea, puede definir una URL diferente para redirigir después de que se haya enviado el formulario. Por defecto, la misma página se recarga con el parámetro GET ‘ ?updated=true‘. Puede especificar una URL específica para una página de agradecimiento o, si el formulario es para una publicación, es posible que desee redirigir para ver esa publicación. Podemos proporcionar la URL en la propiedad return.

Si queremos un texto diferente en el botón de envío del formulario, podemos especificarlo en la propiedad submit_value.

También puede indicar acf_form()que no represente la <form>etiqueta. Si desea combinar el formulario de ACF con su propio formulario personalizado, puede configurar formy falseescribir el <form>y <input type="submit"/>manualmente. Si hace esto, ACF aún podrá actualizar los valores, pero debe encargarse de actualizar cualquier otro campo dentro de su formulario personalizado.

Desencadenar acciones al enviar formularios

A veces, es posible que desee activar algunas funciones o eventos personalizados cuando se actualiza un formulario front-end. Un ejemplo común es escribir una función que envíe una notificación por correo electrónico cada vez que envíe un formulario.

Campos personalizados avanzados ofrece dos ganchos útiles para cuando se actualizan los campos; la acción [acf/save_post](https://www.advancedcustomfields.com/resources/acf-save_post/)y el filtro [acf/pre_save_post](https://www.advancedcustomfields.com/resources/acf-pre_save_post/). Nuevamente, no se deje engañar por el nombre ‘post’. Se activan para cualquier actualización de campos de ACF, incluidos los campos para un usuario, categoría, menú, etc.

El filtro soloacf/pre_save_post se ejecuta en formularios front-end usando. Como parámetro para este filtro obtenemos, el mismo valor que pasamos arriba. El filtro espera que regreses. Recuerde que necesitamos analizar esto si no nos referimos a una ID de publicación. Por ejemplo, para el usuario necesitaría hacer algo como:acf_form()``post_id``post_id``acf_form()``post_id

add_filter('acf/pre_save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    $user_id = intval(substr($post_id, 5));  // Extracts the user ID
 
    // Do your thing. You'll find the submitted values in $_POST
 
    return $post_id;
});

Alternativamente, puede usar el enlace acf/save_post, pero recuerde que también se activa en el administrador. Como parámetro de este gancho obtendrás post_id, igual que acf/pre_save_post. Una cosa importante que debe recordar al usar acf/save_postes que puede usar la prioridad de enlace para controlar si su función se ejecuta antes de que se guarden los campos o después. Una función enganchada con prioridad 10 o superior se activará después de que se guarden los campos. Y se activará una prioridad de menos de 10 antes de que ACF guarde los valores.

add_action('acf/save_post', function($post_id) {
    // You can fetch the values with standard get_field()
});
 
add_action('acf/save_post', function($post_id) {
    // You can access the submitted values in $_POST
}, 8);

Cuando haya enganchado la función antes de guardar (prioridad inferior a 10), puede comparar los valores enviados con lo que guardará ACF. Puede hacer get_field()para obtener el valor actual y compararlo con el valor correspondiente en $_POST.

Si desea hacer algo solo cuando los campos se actualizaron en el front-end, simplemente puede verificar si estamos en administración con [is_admin](https://developer.wordpress.org/reference/functions/is_admin/)(). A continuación se muestra un ejemplo de cómo configuraría las notificaciones por correo electrónico cuando un usuario está actualizando su configuración en el front-end;

add_action('acf/save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    if (is_admin()) {
        return;  // Bail if we are updating in admin
    }
 
    $user_id = intval(substr($post_id, 5));
 
    // Use get_field() to get the saved/submitted values if needed
    // Then use wp_mail() to send an email
});