Conexión a Google Sheets mediante una aplicación personalizada

El complemento de Google Sheets es una función profesional

Desbloquea el complemento Google Sheets y otras potentes funciones para hacer crecer tu negocio.

Obtener WPForms Pro

¿Desea utilizar nuestro complemento Google Sheets con una aplicación Google personalizada en lugar de la aplicación Google de WPForms? Conectarse a Google Sheets a través de una aplicación personalizada es a veces la mejor opción para desarrolladores y usuarios avanzados.

En este tutorial, le mostraremos cómo utilizar el complemento WPForms Google Sheets con su propia aplicación personalizada de Google.

Requisitos:


Antes de empezar, primero tendrá que asegurarse de que WPForms está instalado y activado en su sitio de WordPress y que ha verificado su licencia. También tendrás que registrarte para obtener una cuenta de Google si aún no tienes una e instalar y activar el complemento Google Sheets.

Nota: Conectar WPForms a una aplicación personalizada de Google sólo se recomienda a desarrolladores o usuarios avanzados. Si no necesita una aplicación personalizada, consulte nuestra guía para usar el complemento Google Sheets.

Activar el modo avanzado

Para empezar, abra su panel de WordPress y vaya a WPForms " Configuración. A continuación, haga clic en la pestaña Integraciones.

click-integrations-tab

A continuación, haz clic en la integración de Google Sheets para ampliar su configuración.

haga clic en google-sheets

Para comenzar con la conexión de la aplicación de Google, haz clic en Activar modo avanzado.

click-enable-advanced-mode

Ahora verás ajustes adicionales en los que tendrás que introducir información de Google Cloud Platform.

advanced-mode-connection-settings

Para encontrar esta información, primero tendrás que iniciar sesión en Google Cloud Platform y crear una aplicación personalizada. No obstante, le recomendamos que deje la configuración de WPForms abierta en una pestaña independiente del navegador mientras crea la aplicación, ya que necesitará acceder a ella más adelante.

Añadir un nuevo proyecto

Una vez que hayas iniciado sesión en Google Cloud Platform, haz clic en API y servicios.

click-apis-and-app-services

En la siguiente pantalla, haga clic en el menú desplegable de proyectos.

click-select-a-project-dropdown

Después de eso, aparecerá una superposición que muestra sus proyectos. Haz clic en NUEVO PROYECTO.

clic-nuevo-proyecto

A continuación, deberá añadir un nombre al campo Nombre del proyecto. Le recomendamos que utilice un nombre que le ayude a recordar para qué está utilizando el proyecto. No obstante, puede utilizar el nombre que desee.

Después de añadir un nombre, haga clic en el botón CREAR.

add-project-name-and-click-create

Una vez que haya creado el proyecto, haga clic de nuevo en el menú desplegable del proyecto y seleccione el proyecto recién creado si no está ya seleccionado por defecto.

click-proyecto-desplegable

Habilitación de las API de Google

Ahora que tu proyecto está creado, es hora de habilitar algunas APIs de Google. Para empezar, haz clic en Biblioteca en el menú de la izquierda.

clic-biblioteca

Accederás a la biblioteca de API, donde deberás localizar y habilitar tres API diferentes: API de Google Drive, API de Google Sheets y API de Google Picker.

Escribe "Google Drive API" en la barra de búsqueda para localizar la API de Google Drive.

search-google-drive-api

Una vez que hayas localizado la API de Google Drive, haz clic en el botón HABILITAR.

click-enable-google-drive-ap

A continuación, vuelve a la biblioteca de API de Google y escribe "Google Sheets API" en la barra de búsqueda.

search-google-sheets-api

Tras localizar la API de Google Sheets, haz clic en el botón HABILITAR.

click-enable-google-sheets-api

Por último, vuelve a la biblioteca API de Google y escribe "Google Picker API" en la barra de búsqueda.

search-picker-api

Una vez que hayas localizado la API de Google Picker, haz clic en el botón HABILITAR.

click-to-enable-picker-api

Seleccionar un tipo de usuario

Ahora que ha habilitado las API necesarias, haga clic en Pantalla de consentimiento OAuth en el menú de la izquierda.

click-oauth-consent-screen

En la siguiente pantalla, tendrás que seleccionar un tipo de usuario para tu aplicación. Puedes seleccionar Interno o Externo, dependiendo de con quién quieras compartir tu aplicación.

Para nuestro ejemplo, seleccionaremos Externo. Una vez que haya hecho su selección, haga clic en el botón CREAR para continuar.

click-create-button-oauth-consent

Nota: asegúrate de consultar la documentación de Google sobre los tipos de usuario para obtener más información sobre los usuarios externos e internos.

Registro de la aplicación

Una vez que hayas seleccionado un tipo de usuario para tu aplicación, serás redirigido a una página para completar el registro de tu aplicación. Tendrás que completar una serie de pasos para registrar tu aplicación, que veremos en las siguientes secciones.

Añadir información de la aplicación

Añadir información sobre tu aplicación es obligatorio y permite a los usuarios saber quién eres y cómo ponerse en contacto contigo.

En los campos obligatorios, asegúrese de añadir un nombre de aplicación y un correo electrónico de asistencia al usuario.

app-registration-name-and-support-email

Añadir un dominio de aplicación

Desplácese hacia abajo hasta la sección App domain y localice la sección Authorized domains. Desde aquí, haz clic en el botón AÑADIR DOMINIO.

click-add-domain-button

En el campo Dominio autorizado 1, tendrás que añadir wpforms.com como dominio.

add-wpforms-domain

Nota: Debe agregar wpforms.com como su dominio autorizado, o su aplicación no podrá conectarse a WPForms.

Añadir información de contacto del desarrollador

A continuación, añade tu dirección de correo electrónico preferida en la sección Información de contacto del desarrollador. Google se pondrá en contacto contigo a través de esta dirección de correo electrónico si se produce algún cambio en tu proyecto.

dirección de correo electrónico del desarrollador

Por último, haga clic en el botón GUARDAR Y CONTINUAR para pasar al siguiente paso.

pulsar-guardar-y-continuar

Añadir ámbitos

En la siguiente pantalla, haga clic en el botón AÑADIR O ELIMINAR PUNTOS.

click-add-or-remove-scopes

En el modal lateral que aparece, haga clic en la barra de búsqueda denominada Introduzca el nombre o valor de la propiedad.

introducir-nombre-de-propiedad-o-valor-barra-de-búsqueda

A continuación, busque cada uno de los ámbitos siguientes:

  • https://www.googleapis.com/auth/userinfo.email
  • https://www.googleapis.com/auth/userinfo.profile
  • https://www.googleapis.com/auth/drive.file
  • https://www.googleapis.com/auth/spreadsheets

Deberá activar cada uno de los ámbitos anteriores haciendo clic en la casilla de verificación de la izquierda.

click-checkbox-to-enable-scope

Una vez que haya activado los ámbitos necesarios, haga clic en el botón ACTUALIZAR situado en la parte inferior de la pantalla.

pulsar-actualizar-botón

A continuación, volverá a la pantalla Ámbitos, donde podrá ver y gestionar los ámbitos habilitados. A continuación, haz clic en el botón GUARDAR Y CONTINUAR para guardar los cambios.

pulsar-guardar-y-continuar-pantalla-escopios

Añadir usuarios de prueba

Google tendrá que completar el proceso de verificación antes de que los usuarios puedan interactuar con tu aplicación. Sin embargo, puedes permitir que determinados usuarios prueben tu aplicación antes de que se verifique. Este paso no es necesario para nuestra configuración, por lo que seguiremos adelante y pasaremos al siguiente paso haciendo clic en el botón GUARDAR Y CONTINUAR.

click-save-and-continue-test-users-screen

Revisar el registro de su aplicación

El último paso del registro de la aplicación es revisar su configuración en la pantalla Resumen. Si todo parece correcto y se corresponde con los pasos de este tutorial, haga clic en el botón VOLVER AL DASHBOARD en la parte inferior de la pantalla.

click-back-to-dashboard-button

Publicación de la aplicación

Ahora que ha completado el registro de la aplicación, tendrá que publicar su aplicación. Puedes hacerlo directamente desde la pantalla de consentimiento de Oauth haciendo clic en el botón PUBLICAR APP.

click-publish-app

Después de hacer clic en el botón, aparecerá un modal con algunos pasos más para completar el proceso de verificación de aplicaciones de Google. Para confirmar, haz clic en CONFIRMAR.

clic-confirmar

Creación de credenciales para su aplicación

El siguiente paso es crear credenciales para su aplicación. Para empezar, haga clic en Credenciales en el menú de la izquierda.

click-credentials

A continuación, haga clic en CREAR CREDENCIALES en la parte superior de la pantalla Credenciales.

haga clic en crear credenciales

A continuación, haga clic en ID de cliente OAuth.

select-oauth-client-id

A continuación, haga clic en el menú desplegable Tipo de aplicación y seleccione Aplicación web.

seleccionar-aplicación-web

Después, asegúrate de introducir un nombre para tu cliente Oauth 2.0 en el campo Nombre. Esto no será visible para los usuarios finales, así que siéntete libre de ponerle el nombre que quieras.

add-name-for-client-id

A continuación, desplácese hasta la sección URIs de redirección autorizadas y haga clic en AÑADIR URI.

click-add-uri-button-1

Ahora tendrá que volver a la configuración de integración de WPForms y copiar la primera URL de devolución de llamada haciendo clic en el icono de copia.

click-copy-icon-callback-url-1

A continuación, vuelve a la configuración de tu aplicación de Google y pega la URL de devolución de llamada en el campo URIs 1.

paste-callback-url-into-uri-1-field-1

A continuación, vuelva a hacer clic en el botón AÑADIR URI para añadir su segunda URI.

click-add-uri-button-2

Vuelva a la configuración de WPForms y haga clic en el icono de copia junto a la segunda URL de devolución de llamada.

click-copy-icon-callback-url-2

Ahora puedes volver a la configuración de Google y pegar la segunda URL de devolución de llamada en el campo URIs 2.

add-second-callback-url

A continuación, haga clic en el botón CREAR.

click-create-button-client-id

Aparecerá una ventana modal con tus credenciales de cliente OAuth. Desde aquí, copie el ID de cliente haciendo clic en el icono de copia.

click-copy-icon-client-id

A continuación, ve a la configuración de integración de WPForms y pega el ID de cliente en el campo ID de cliente de Google.

campo-id-cliente

A continuación, vuelve a la configuración de la aplicación de Google y copia el secreto de cliente.

click-copy-icon-client-secret

Vuelve a la configuración de integración de WPForms y pega el secreto de cliente en el campo Secreto de cliente de Google.

pegar-cliente-secreto

Completar la conexión

Ahora que ya tienes tu ID de cliente y tu Secreto de cliente, es hora de completar la conexión. Para ello, haz clic en el botón Conectar con Google.

click-connect-to-google-sheets-button

A continuación, se le redirigirá a una página de autenticación de Google. Aquí tendrá que conceder a WPForms acceso a su cuenta de Google.

Una vez que haya seleccionado una cuenta de Google, haga clic en el botón Continuar para conceder a WPForms acceso a su cuenta.

checkboxes-for-google-drive-and-sheets

Ahora cuando regrese a WPForms " Configuración " Integraciones, debería ver el estado verde Conectado junto con los detalles de su conexión.

google-sheets-connected-status

Ahora puedes proceder a añadir una integración de Google Sheets a cualquier formulario de tu sitio.

Ya está. Ahora ya sabe cómo configurar una aplicación personalizada de Google para utilizarla con el complemento WPForms Google Sheets.

A continuación, ¿le gustaría saber más sobre lo que puede hacer con la información enviada por el usuario en WPForms? Vea nuestra guía completa de entradas de formularios para aprender más.

El mejor plugin de WordPress para crear formularios arrastrando y soltando

Fácil, rápido y seguro. Únete a más de 6 millones de propietarios de sitios web que confían en WPForms.

Active JavaScript en su navegador para rellenar este formulario.