Display Google map inside WordPress form
A map inside WordPress form can display an address. As an example, if the map is added to appointment form to display the address of the office, it will certainly be easier for your users to figure out directions to the appointment centre. As another example, if someone inquires about a property that is up for sale, the map can display location of the property. That is, the map can show property marker pointing to the property address.
Navigating to the Map widget
From your WordPress dashboard navigate to the “All Forms” section in RegistrationMagic. Move your cursor across one of the forms. Click on the “Field” hyperlink or the “Field Manager”.
Click on “Add Field” from the operations box. Look for read only, display fields. Click on the “Map” widget from the Magic Widget pop-up. This will navigate you to a page named “Map Widget”. On this page, you can add or modify any address as per your needs.
Before going ahead, please note that you must not forget to configure the autocomplete feature in the address field. You can configure the autocomplete feature from the External Integrations icon inside the Global Settings. You will need to configure Google Maps API key.
Read this tutorial “How to autocomplete address field of registration form?” if you would like implement the autocomplete address feature.
Configuring the Google map
On the Map widget settings page, you will be see options such as Label, Latitude, Longitude etc. Fill the Label field with “Office address”.
There are two methods to populate your address. One method is to enter the address manually. This approach will present you with address suggestions. As an example, if you type 1A then all addresses starting with 1A will appear as suggestions. The second method is to directly click on the mapped select the exact location.
Both methods will auto-populate the Latitude and Longitudes accordingly. So, these fields don’t need to be entered manually. Set the zoom and map width according as per your design requirement. Apply CSS class only if it is defined in the coded file.
Embedding Google map inside WordPress form
Now go back to RM “All forms” and copy the shortcode from the form card. Navigate to the “All Pages” section from “Pages” on the WordPress dashboard. Paste the shortcode inside the post. Click update.
Go back to your Map widget page and click on “Add to Form”. The image below shows how the Map widget will appear inside your WordPress form.
This completes our tutorial on how to add Google map inside WordPress form.
- Setting-up autoresponder Email message to user after form submission - May 22, 2018
- Assign unique registration token number to user - May 21, 2018
- WordPress Form Number Field Setup Tutorial - May 18, 2018
- Summer Camp Form Templates [Frequently Used] - May 9, 2018
- WordPress User Roles, Permissions & Role Editor [Complete Guide] - May 8, 2018
- Publish Registration Form with Page Builder’s WordPress Register Widget - May 6, 2018
- 3 Must Have Plugins For WordPress Sites - May 5, 2018
- Mask User Input in WordPress form - May 4, 2018
- How to add additional email field to your WordPress Form - May 3, 2018
- How to add registration feed to your WordPress form - May 1, 2018