Registrar CPT desde el front-end con ACF en Divi

Al terminar habrás aprendido a crear y conectar un formulario de ACF Pro para que tus usuarios registren cualquier tipo de contenido en un directorio hecho con Divi. Es perfecto para un directorio inmobiliario donde cada agente publica sus propiedades, un portal de empleos, o cualquier plataforma donde el contenido lo genera la comunidad.

Para que el sistema tenga sentido de negocio, lo ideal es combinarlo con un sistema de membresías: bloqueas el formulario detrás de un plan de suscripción y solo los usuarios suscritos pueden publicar. Como el formulario lo generamos mediante un shortcode, puedes envolverlo fácilmente con las reglas de restricción de WooCommerce Memberships. Para montar todo ese sistema de membresías, te apoyas en el Mastery en WordPress.

Una aclaración antes de arrancar: trabajamos bajo el supuesto de que el usuario que carga el formulario ya está logueado en tu WordPress, sea por un plan de membresía activo o porque se registró antes. No cubrimos aquí el registro en sí. Si solo necesitas permitir registros sin membresía, ve a Ajustes → Generales y activa la casilla "Cualquiera puede registrarse".

Ejemplo de formulario de registro:

Los dos plugins que necesitas

Todo este sistema se apoya en dos plugins que trabajan juntos. El primero es Advanced Custom Fields PRO (ACF Pro), la versión de pago del conocido plugin de campos personalizados; es el que define y maneja todos los campos de tus propiedades. La versión PRO funciona de forma independiente, así que si tenías la gratuita, puedes desactivarla sin perder tus campos.

El segundo plugin es ACF Extended, gratuito y disponible en el repositorio oficial de WordPress. Este aporta la pieza clave: generar formularios a partir de tus grupos de campos. Al activarlo, en "Campos personalizados" verás opciones nuevas — block types, formularios, options pages y más. Aquí nos centramos exclusivamente en la sección de Formularios.

Paso 1: Crea el formulario de registro

Ve a Campos personalizados → Formularios y crea un formulario nuevo. Ponle un título claro, por ejemplo "Registro de propiedad", y deja que ACF Extended genere el slug. Lo primero que te pide es el field group: seleccionas el grupo de campos que ya tienes definido para tus propiedades.

Lo siguiente es agregar una acción (Add Action), que define qué hace el formulario al enviarse. Eliges "Post Action", porque queremos que el resultado sea un post. Dentro hay dos opciones: Create Post (crear) y Update Post (actualizar); aquí usamos Create Post, porque creamos propiedades nuevas. Dejas el nombre por defecto y publicas; al hacerlo, ACF Extended genera unos shortcodes listos para insertar el formulario donde quieras.

Consejo: piensa de antemano qué campos quieres que llene el usuario y cuáles prefieres reservarte como administrador. Por ejemplo, el enlace de WhatsApp o el enlace de llamada conviene que los pongas tú, mientras que el número de teléfono y el email sí puede capturarlos el usuario. Definir esto antes te ahorra rehacer el formulario más tarde.

Paso 2: Inserta el formulario en una página con Divi

Crea una página nueva, ábrela con el constructor visual de Divi, agrega un módulo de Código y pega dentro el shortcode del formulario que generó ACF Extended. Al guardar, el formulario aparece con todos los campos definidos en tu propiedad: refleja automáticamente la estructura de campos de tu CPT.

Aquí aparece la primera complicación. Los campos personalizados de ACF (precio, baños, dirección, características) salen solos. Pero los campos nativos de WordPress — el título, la descripción, la imagen destacada y las taxonomías (categorías y etiquetas) — no aparecen, porque no son de ACF. Para que el usuario pueda llenarlos desde el front-end, tienes que recrearlos como campos personalizados dentro de tu grupo.

Paso 3: Recrea los campos nativos de WordPress

Ve a Campos personalizados → Grupos de campos y edita tu grupo. Lo más ordenado es crear una pestaña nueva ("Datos generales") y agregar dentro estos campos:

• Título de propiedad: un campo de tipo Texto. Márcalo como requerido.
• Descripción de propiedad: un campo de tipo Área de texto.
• Portada de propiedad: un campo de tipo Imagen. Muy importante: en sus opciones, selecciona que actúe como featured thumbnail (imagen destacada).
• Categoría de propiedad y Etiqueta de propiedad: campos de tipo Relationship (relación), no de tipo "WordPress Taxonomy".

Presta especial atención a las categorías y etiquetas, porque es donde más gente se traba. La clave está en elegir el tipo Relationship e indicar dentro la taxonomía correcta (la de categorías para uno, la de etiquetas para el otro), configurarlo como checkbox y activar "crear términos" y "guardar términos". Si en su lugar eliges el tipo "Taxonomy" genérico de WordPress, no aparecerán tus categorías reales y perderás tiempo buscando el error.

Consejo: en los campos de selección cerrada (como municipio o estado), activa "permitir personalización" y "guardar personalización". Así, si un usuario no encuentra la opción que necesita —su municipio, por ejemplo— puede añadir un valor nuevo sobre la marcha en lugar de quedarse bloqueado. Esto hace tu directorio mucho más flexible para quien publica.

Paso 4: Conecta los campos en la acción de guardado

Ahora viene el paso que hace que todo funcione de verdad. Vuelve al formulario, entra en la Post Action que creaste y ve a la sección Save. Aquí emparejas los campos nuevos que recreaste con los campos reales del post de WordPress:

• Post Type: selecciona tu CPT (en nuestro caso, "propiedades").
• Post Status: define en qué estado queda la propiedad al registrarse. Puedes dejarla "publicada" para que salga al directorio automáticamente, o "pendiente de revisión" si prefieres revisarla antes como filtro de calidad.
• Title: apúntalo al campo personalizado "título de propiedad".
• Post Content: apúntalo al campo "descripción de propiedad".
• Post Terms: aquí conectas las categorías y etiquetas que definiste.
• Autor y Post Parent: déjalos por defecto. El autor se toma automáticamente del usuario logueado.

En "Save ACF fields" eliges qué campos de ACF guardar en el post: todos, o excluyendo los que decidiste reservarte. Mientras estás aquí, personaliza dos detalles que mejoran la experiencia: el texto del botón de envío (cámbialo por "Registrar propiedad") y el mensaje de éxito que ve el usuario tras enviar, que puedes adaptar según publiques automáticamente o uses revisión previa.

Una limitación importante: el mapa (iframe)

Conviene tener claro un detalle desde el principio. Por seguridad, WordPress no permite publicar etiquetas iframe enviadas desde el front-end. Si tu propiedad incluye un mapa de Google Maps (que se inserta con un iframe), ese campo no se guarda automáticamente: el dato te llega en el registro del formulario, pero tienes que pegarlo manualmente desde el panel. La alternativa más práctica es pedirle al usuario que, en lugar del iframe completo, pegue solo el enlace de la ubicación, que sí se guarda sin problema; luego tú lo conviertes en iframe al revisar la propiedad. Deja instrucciones claras en ese campo.

Estilos y bloqueo del formulario

Por defecto, el formulario de ACF se ve bastante plano. Para darle un aspecto profesional, aplicamos un CSS personalizado (lo tienes completo más abajo, en recursos): lo pegas de forma global en las opciones de Divi o en el personalizador dentro de "CSS adicional", y ajustas los colores —el azul principal y los negros que están en ese CSS— para que combinen con tu plantilla. Si algún estilo no se aplica, refuerza la regla con !important. Para pulir la página, envuelve el formulario en una sección de Divi con fondo blanco, un borde sutil de 3 a 5 píxeles y algo de margen lateral, y enlázala desde tu menú o un botón visible solo para usuarios logueados.

Y aquí entra la parte de negocio: para que únicamente tus suscriptores puedan publicar, bloquea esta sección. Puedes ocultarla a los no logueados con un CSS de contenido condicional o —mejor aún— aplicar las reglas de restricción de WooCommerce Memberships para que sea visible solo para quienes tengan un plan activo.

Por qué los campos se "duplican" (y por qué no es un problema)

Cuando edites una propiedad creada con este sistema, notarás que algunos datos aparecen dos veces: el título como campo nativo y como campo ACF, la imagen destacada repetida, las categorías por duplicado. Es completamente normal: sucede porque recreamos esos campos como ACF para capturarlos desde el front-end, pero en Save los conectamos también a los campos reales de WordPress. Lo importante es que de cara al front-end —y a Google— solo existe una versión de cada dato. La duplicación es interna, en la pantalla de edición, y no afecta ni al SEO ni a cómo se ve la propiedad publicada.

¿Necesito ACF Pro o me sirve la versión gratuita?

Necesitas ACF Pro. La versión gratuita no incluye varias funcionalidades que este flujo requiere. La combinación correcta es ACF Pro + ACF Extended (este último, gratuito).

¿Sirve esto para cualquier Custom Post Type, no solo propiedades?

Sí. El ejemplo usa un directorio inmobiliario, pero el mismo método funciona para cualquier CPT: vacantes de empleo, perfiles de profesionales, fichas de negocios, eventos. Solo cambian los campos que defines; la lógica de crear el formulario, recrear los campos nativos y conectarlos en Save es idéntica.

¿Cómo evito que un usuario envíe el formulario incompleto?

Marca como "requeridos" todos los campos que consideres obligatorios. Vas campo por campo en tu grupo de ACF, activas la opción de requerido, y el formulario no dejará enviar hasta que estén llenos.

¿Puedo revisar las propiedades antes de que se publiquen?

Sí, y es muy recomendable. En el Post Status de la acción de guardado, elige "pendiente de revisión" en lugar de "publicada". Así cada propiedad queda en espera hasta que la apruebas, funcionando como un filtro de calidad para tu directorio.

Conclusión

Permitir que tus usuarios registren contenido desde el front-end transforma un directorio estático en una plataforma viva que crece sola. Con ACF Pro y ACF Extended montas un formulario completo, lo conectas a tu Custom Post Type y, combinándolo con un sistema de membresías, lo conviertes en una fuente de ingresos recurrente: cobras por el derecho a publicar. Los pasos que vimos son el esqueleto reutilizable para cualquier proyecto de este tipo.

Define bien tus campos obligatorios y decide desde el inicio si publicas automáticamente o revisas antes. Esos detalles marcan la diferencia entre un directorio que se llena de contenido a medias y uno que se ve profesional. Si tienes dudas, déjame un comentario aquí abajo y con gusto te ayudo.

🎓 ¿Quieres construir directorios y plataformas con WordPress de principio a fin?
En uxdivi.com/cursos tienes el Mastery en WordPress, donde aprendes a crear Custom Post Types, sistemas de membresía, restricción de contenido y mucho más. Accede como suscriptor y descarga abajo el plugin ACF Pro junto a todos los recursos de este tutorial.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

/*** ESTILOS FORMULARIO ACF PROPIEDADES UXDIVI ***/
.acf-field input[type="text"], .acf-field input[type="password"], .acf-field input[type="date"], .acf-field input[type="datetime"], .acf-field input[type="datetime-local"], .acf-field input[type="email"], .acf-field input[type="month"], .acf-field input[type="number"], .acf-field input[type="search"], .acf-field input[type="tel"], .acf-field input[type="time"], .acf-field input[type="url"], .acf-field input[type="week"], .acf-field textarea, .acf-field select {
    width: 100%;
    padding: 9px 10px !important;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    border-radius: 4px;
    border: 1px solid #c0c5cb;
}

.acf-field .acf-label label {
    font-weight: 700;
    font-size: 16px;
    color: #282f45;
}

ul.acf-radio-list li, ul.acf-checkbox-list li {
    font-size: 14px !important;
    line-height: 28px !important;
}

/* Boton Formulario ACF */
.acf-form-submit .acf-button {
    background-color: #4c7ce3;
    border: none;
    color: white;
    font-weight: 600;
    padding: 14px 48px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 20px 16px 10px 10px;
    border-radius: 3px;
    cursor: pointer;
}

/* Rango ACF */
.acf-range-wrap input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
}
.acf-range-wrap input[type=range]:focus {
  outline: none;
}
.acf-range-wrap input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #282f45;
  background: #444;
  border-radius: 1px;
  border: 0px solid #282f45;
}
.acf-range-wrap input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 2px solid #000;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
.acf-range-wrap input[type=range]:focus::-webkit-slider-runnable-track {
  background: #4c7ce3;
}
.acf-range-wrap input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #4c7ce3;
  border-radius: 1px;
  border: 0px solid #000000;
}
.acf-range-wrap input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #4c7ce3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #FFF;
  cursor: pointer;
}
.acf-range-wrap input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.acf-range-wrap input[type=range]::-ms-fill-lower {
  background: #4c7ce3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
.acf-range-wrap input[type=range]::-ms-fill-upper {
  background: #4c7ce3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
.acf-range-wrap input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #4c7ce3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
.acf-range-wrap input[type=range]:focus::-ms-fill-lower {
  background: #4c7ce3;
}
.acf-range-wrap input[type=range]:focus::-ms-fill-upper {
  background: #4c7ce3;
}

@media only screen and (max-width: 768px) {
  .acf-field .acf-label label {
    font-size: 14px;
  }
}

.acf-fields>.acf-tab-wrap {
    background: #FFF;
}

/*** ESTILOS FORMULARIO ACF PROPIEDADES UXDIVI ***/
.acf-field input[type="text"], .acf-field input[type="password"], .acf-field input[type="date"], .acf-field input[type="datetime"], .acf-field input[type="datetime-local"], .acf-field input[type="email"], .acf-field input[type="month"], .acf-field input[type="number"], .acf-field input[type="search"], .acf-field input[type="tel"], .acf-field input[type="time"], .acf-field input[type="url"], .acf-field input[type="week"], .acf-field textarea, .acf-field select {
    width: 100%;
    padding: 9px 10px !important;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    border-radius: 4px;
    border: 1px solid #c0c5cb;
}

.acf-field .acf-label label {
    font-weight: 700;
    font-size: 16px;
    color: #282f45;
}

ul.acf-radio-list li, ul.acf-checkbox-list li {
    font-size: 14px !important;
    line-height: 28px !important;
}

/* Boton Formulario ACF */
.acf-form-submit .acf-button {
    background-color: #4c7ce3;
    border: none;
    color: white;
    font-weight: 600;
    padding: 14px 48px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 20px 16px 10px 10px;
    border-radius: 3px;
    cursor: pointer;
}

/* Rango ACF */
.acf-range-wrap input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
}
.acf-range-wrap input[type=range]:focus {
  outline: none;
}
.acf-range-wrap input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #282f45;
  background: #444;
  border-radius: 1px;
  border: 0px solid #282f45;
}
.acf-range-wrap input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 2px solid #000;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
.acf-range-wrap input[type=range]:focus::-webkit-slider-runnable-track {
  background: #4c7ce3;
}
.acf-range-wrap input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #4c7ce3;
  border-radius: 1px;
  border: 0px solid #000000;
}
.acf-range-wrap input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #4c7ce3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #FFF;
  cursor: pointer;
}
.acf-range-wrap input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.acf-range-wrap input[type=range]::-ms-fill-lower {
  background: #4c7ce3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
.acf-range-wrap input[type=range]::-ms-fill-upper {
  background: #4c7ce3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
.acf-range-wrap input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #4c7ce3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
.acf-range-wrap input[type=range]:focus::-ms-fill-lower {
  background: #4c7ce3;
}
.acf-range-wrap input[type=range]:focus::-ms-fill-upper {
  background: #4c7ce3;
}

@media only screen and (max-width: 768px) {
  .acf-field .acf-label label {
    font-size: 14px;
  }
}

.acf-fields>.acf-tab-wrap {
    background: #FFF !important;
}

.acf-fields>.acf-tab-wrap .acf-tab-group {
    position: relative;
    border-top: #ccd0d4 solid 0px !important;
    border-bottom: #ccd0d4 solid 0px !important;
    z-index: 2;
    margin-bottom: 0px !important;
}

.acf-fields>.acf-field {
    position: relative;
    padding: 15px 12px;
    border-top: #EEEEEE solid 1px;
    margin-top: 15px;
}

.acf-fields>.acf-tab-wrap .acf-tab-group li a {
    border-color: #f2f2f2;
    border-width: medium;
    border-radius: 3px;
}