Cómo incorporar un mapa de Google en los formularios de contacto (con el código de mapa)

¿Le gustaría mostrar un mapa en el formulario de contacto de su sitio web? Puede usar la geolocalización para completar la dirección de un usuario e indicar su ubicación colocando un indicador en un mapa. Esto hace que el formulario lo complete es más fácil y más rápido, lo que conduce a una mejor tasa de complemento. En este artículo, le mostraremos cómo incorporar un mapa de Google en formularios de contacto con un indicador de mapa.

¿Por qué incorporar un mapa de Google en su formulario de contacto? Cuando haya creado su sitio web de WordPress, existe la posibilidad de agregar un formulario de contacto para que los visitantes puedan entrar en contacto con usted sobre sus productos y servicios.
Y si su negocio tiene una ubicación física, entonces probablemente agregó un mapa de Google de su propia ubicación para alentar a las personas a visitar su tienda. Lo que muchos propietarios de negocios no saben es que puede usar la geolocalización para completar automáticamente el campo de dirección en su formulario de contacto y mostrar la ubicación del usuario en un mapa. Esto mejora la experiencia general del usuario y ayuda a reducir el abandono de la formulación. Conocer las ubicaciones de los usuarios también le permite usar la dirección de acuerdo con la ubicación geográfica para mostrar contenido personalizado y aumentar las tasas de conversión.
Dicho esto, echemos un vistazo a cómo incorporar un mapa de Google en formularios de contacto. Cómo incorporar un mapa de Google en un formulario de contacto para este tutorial, utilizaremos WPFORMS, el mejor formulario de contacto para WordPress. Le permite crear fácilmente cualquier tipo de forma con un generador simple de formulación mediante el deslizamiento y la colocación. Hay una versión gratuita de los WPForms disponibles con todas las funciones que necesita para crear un formulario de contacto básico. Sin embargo, para este tutorial, utilizaremos WPFFORMS PRO, ya que incluye Google Map. Lo primero que debe hacer es instalar y activar el complemento WPFFORMS. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Tras la activación, debe visitar la configuración de la página WPFORMS »para ingresar la clave de licencia. Puede encontrar esta información en su área de cuenta WPFFORMS. Asegúrese de hacer clic en el botón “Compruebe la tecla” para activar su licencia.
Luego debe explorar los complementos WPForms »y encontrar el complemento de geolocalización. Puede usar la opción de búsqueda en la parte superior de la pantalla o simplemente puede ejecutar los suplementos disponibles.

Una vez que lo haya encontrado, debe instalar el suplemento haciendo clic en el botón “Instal Supplement”.
Ahora que se activa el suplemento de geolocalización, deberá configurar su configuración. Para hacer esto, explore la configuración de WPForms »y haga clic en la pestaña Geográfica de ubicación. En esta página, debe seleccionar un proveedor de geolocalización. Para este artículo, elegiremos la API de ubicaciones de Google.

También debe hacer clic en la casilla de verificación “Ubicación actual”. Esto detectará y completará automáticamente la dirección cuando los usuarios completen el formulario de contacto, ahorrando tiempo y mejorando la precisión. Se le pedirá que complete su clave de Google API. Puede obtener la llave de Google y luego puede pegarla en el campo. Le mostraremos cómo hacer esto en la siguiente sección.

Generación de una clave API Google Places ¿Puede obtener una clave API para Google Places accediendo al sitio web de Google Cloud Console? Se le pedirá que seleccione su país en un menú desplegable y acepte los términos y condiciones. En algunos países, también puede tener la oportunidad de registrarse para una lista de correspondencia.
Cuando esté listo para moverse al siguiente paso, haga clic en “Estoy de acuerdo y continúe”.

Luego deberá seleccionar un proyecto para la clave API. Simplemente haga clic en “Seleccione un proyecto” y haga clic en el proyecto que desea usar en la lista.

Si no ha creado un proyecto antes o este es un nuevo sitio web que no ha agregado a Google, entonces debe hacer clic en “Nuevo proyecto” para configurar uno.
Nota: Google le pedirá que active la factura para que ese proyecto use la API de ubicación de Google. Ofrecen los primeros $ 300 gratis, que es suficiente para cubrir una incorporación simple de mapa, como lo creamos en este tutorial. Los sitios de tráfico inferiores no tendrán que pagar nada y solicitarán permiso para actualizar antes de cobrar impuestos.

Ahora debe estar en la página “API y servicios” donde puede activar las API necesarias para mostrar los mapas de Google. Desde la parte superior de la página. Esto lo llevará a la Biblioteca API de Google, donde deberá activar tres mapeo diferente Apis. Puede encontrarlos usando la función de búsqueda en la parte superior de la página o haciendo clic en el enlace “Muestra todo” cerca de la sección Mapa.
Primero debe encontrar y activar la API de lugares. Una vez que lo localice, deberá hacer clic en él. En la página siguiente, debe hacer clic en el botón “Activación”.
Después de eso, debe hacer lo mismo para Maps JavaScript API y Geocoding API.

Ahora que ha activado las tres API, puede crear una clave API. En el menú izquierdo, debe explorar las API y los Servicios »Credenciales. Desde aquí podrá hacer clic en el botón “+ Crear credenciales” en la parte superior de la pantalla y luego seleccionar la opción “Clave API”.

Su tecla API se creará y se mostrará en una ventana emergente. Más adelante en este tutorial, deberá copiar esa clave para la configuración de WPFFORM. Por ahora, echemos un vistazo a cómo aplicar algunas restricciones sobre el uso de la clave API.
Restringir su clave API ubicaciones de Google El uso excesivo de la clave API puede sacarlo de su avión gratuito y costar más de lo que espera. Le recomendamos que restrinja la clave para evitar un uso no autorizado o inesperado. Para hacer esto, debe hacer clic en el enlace “Restricción de clave” en la parte inferior de la ventana “Clave API creada” en la captura de pantalla de arriba. En la página siguiente, puede configurar una serie de restricciones diferentes. El primero de ellos es “restricciones de aplicación”. En esta sección, debe hacer clic en las “Referencias HTTP (sitios web). Luego, la clave se usará solo en los sitios web. A continuación, debe asegurarse de que se use solo en su propio sitio web. Para hacer esto, debe desplazarse hacia abajo en la sección “Restricciones del sitio web” y luego hacer clic en el botón “Agregar un artículo”. Ahora debe ingresar el nombre de dominio de su sitio en el campo “Nuevo artículo” utilizando el modelo * Ejemplo.com/ *.

Si usa Google Maps en varios sitios web, puede hacer clic en el botón “Agregar un elemento” y agregar cualquier área.

Ahora que ha restringido la clave API solo a sus propios sitios web, puede restringirla para que funcione solo con la API de Google que agregó anteriormente. Debe desplazarse hacia abajo en la sección “Restricciones de API” de la página y seleccionar la opción “Restricción de la clave”. Esto revelará un menú desplegable en el que debe verificar las cajas “API Geocaching”, los mapas API JavaScript “y las” ubicaciones de API “.

Después de haber hecho esto, debe hacer clic en el enlace “Aceptar” para almacenar su configuración. Finalmente, asegúrese de hacer clic en el botón “Guardar” en la parte inferior de la página para activar todas las restricciones que ha elegido. Recuerde que puede tomar hasta 5 minutos para que la configuración entre en vigor. Agregar la tecla API de Google a la configuración de WPFFORMS ahora verá la clave API que figura en todas las demás que tiene. Debe hacer clic en el icono de copia para poder agregar la clave a la página de configuración de geolocalización de WPFFORMS.

Tenga en cuenta que si alguna vez necesita cambiar cualquier configuración o restricción de API, puede hacer clic en el icono Editar en este momento debe regresar a su sitio, que aún debería estar en la página de geolocalización de la configuración wpforms ». Una vez que llegue allí, inserte la clave en el campo API Google Place en la configuración de WPFORMS. Después de haber hecho esto, asegúrese de hacer clic en el botón “Guardar la configuración”.

Nota: Google Places le pide que tenga un certificado SSL para su sitio para averiguar cómo obtener uno, consulte nuestra guía para principiantes sobre cómo obtener un certificado SSL gratuito.

Creación de un formulario de contacto con Google Map incorporado en WordPress ahora que ha configurado WPForms y Google Places, está listo para crear un formulario de contacto en WordPress. Puede comenzar a seguir nuestra guía sobre cómo crear un formulario de contacto en WordPress. Una vez que haya creado un formulario básico, debe agregar un campo de dirección. Puede usar un bloque de direcciones o un campo de texto de línea única. Para este tutorial, usaremos un campo de texto de línea única. Simplemente extraiga el bloque de texto con una línea única en el formulario. A continuación, personalizaremos la configuración del campo. Para hacer esto, debe hacer clic en el campo para mostrar una configuración de texto de una sola línea. Primero, debe cambiar la etiqueta de campo a “dirección”. Esto aclarará a sus usuarios qué debe ingresar al campo.

Después de eso, debe cambiar la configuración del campo para que pueda mostrar un mapa en el formulario. Para hacer esto, deberá hacer clic en la pestaña Avanzada. Una vez que llegue allí, debe buscar la opción “Habilitar la dirección automática” en la parte inferior de la configuración y cambiarla a la posición “activada”. Luego verá otra opción, “Pantalla de mapa”, que debe activar. Puede elegir mostrar el mapa de arriba o debajo del campo.

Agregar el formulario de contacto a su sitio web La forma más sencilla de agregar el formulario de contacto a su sitio es hacer clic en el botón “Incorporar”. Lo encontrará junto al botón “Guardar” en la parte superior de la pantalla del editor de formulación. Se le preguntará si agrega el formulario a un formulario existente o crea una nueva página.

Para este tutorial, haremos clic en el botón “Crear una nueva página”. Entonces debe dar un nombre de página y luego hacer clic en “¡Hai!”. Botón. Se creará una nueva página con este nombre y su formulario de contacto se agregará automáticamente. Todo lo que tiene que hacer es hacer clic en el botón “Publicar” para activar el formulario.

Vea el mapa de Google en el formulario de contacto Cuando un usuario visita su formulario de contacto, se le preguntará si desea permitir que su sitio web acceda a su ubicación.
Si hago clic en el botón “Permitir”, su ubicación actual se ingresará en el campo de dirección y se agregará un indicador de esa ubicación al mapa. Esta función de finalización automática guardará a los visitantes, lo que los hará más rápidos y más fáciles de ingresar direcciones.

Si necesita cambiar la dirección, simplemente puedo escribir una nueva o dibujar el indicador en otra ubicación en el mapa. Cómo ver los datos de ubicación del usuario en un formulario Una vez que active la geolocalización, WPFFORMS también registrará la ubicación de cada usuario al completar su uso de la ubicación de los usuarios puede ayudarlo a encontrar mejores clientes potenciales. Deberá explorar entradas WPFFORMS »y luego hacer clic en el formulario de contacto.

Ahora verá una lista de entradas completadas por sus usuarios para ese formulario. Para ver una determinada entrada, haga clic en el enlace “Ver” a la derecha.

Ahora verá los datos en el formulario completado por el usuario, como el nombre, la dirección de correo electrónico comercial, el número de teléfono de la compañía, junto con algunos datos de ubicación. Esto incluye un código en Google Maps, la ubicación del usuario, el código postal y el país, así como su latitud y longitud aproximadas. Por supuesto, si el usuario no ha dado permiso para que el formulario conozca la ubicación, entonces no hay datos de ubicación será mostrado. Eso es todo, ha agregado con éxito un mapa de Google en su formulario de contacto. También puede usar WPFORMS para crear encuestas de WordPress, para crear un formulario de pago para aceptar pagos en línea y más. Esperamos que este tutorial lo ayude a aprender cómo incorporar un mapa de Google en formularios de contacto. Además, es posible que desee averiguar cómo realizar un sorteo o concurso o consultar nuestra selección de expertos de los mejores complementos de WordPress para todos los sitios web de negocios. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para los tutoriales de video de WordPress. También puede encontrarnos en Twitter y Facebook.