Instructions to Add Google Map

Go to maps.google.com and search for the location that you want to create a map.
Click the Share icon and open the Embed a Map tab and copy the HTML iframe code for the map that is generated.
Here is a example of an address in GA that I pulled up

<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3302.8035618708154!2d-84.12234478412401!3d34.12577838058602!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f59a6ae458b00d%3A0xeca40e0a18123ae!2s1255+Wondering+Way%2C+Suwanee%2C+GA+30024!5e0!3m2!1sen!2sus!4v1527713217742″ width=”600″ height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Change the Width to 100% instead of a fixed number (This makes the map mobile responsive)

Now take the new code

<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3302.8035618708154!2d-84.12234478412401!3d34.12577838058602!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f59a6ae458b00d%3A0xeca40e0a18123ae!2s1255+Wondering+Way%2C+Suwanee%2C+GA+30024!5e0!3m2!1sen!2sus!4v1527713217742″ width=”100%” height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

And paste it into the section-map.php file of the Theme files sections/home folder by
changing the 4th Line of code From

<div id=”map” class=”google-map-container”></div>

To This

<div id=”map” class=”google-map-container”>—-insert map iframe here—-</div>

Example using my map from above

<div id=”map” class=”google-map-container”><iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3302.8035618708154!2d-84.12234478412401!3d34.12577838058602!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f59a6ae458b00d%3A0xeca40e0a18123ae!2s1255+Wondering+Way%2C+Suwanee%2C+GA+30024!5e0!3m2!1sen!2sus!4v1527713217742″ width=”100%” height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

Now delete all of the input text (Google Map API, Address, Long, Lat and other cities) from the boxes on the Find Us Home page section.

Download Form Builder Plugin file here: bd-form-builder-pro

Install BD Form Builder Plugin

Install BD Plugin same as any other WordPress Plugin.  Upload new plugin zip file using add new plugin and activate it.

Once BD Form Plugin is activated, You will see BD Forms Plugin Pro on your Dashboard Menu list

Click on BD Form Builder link and Add New Form

2018 06 07 0030

Add New Form

 

 

 

 

 

 

 

 

Fill in all the settings for the form and click create Form

 

2018 06 07 0031

Create Form

 

 

 

 

 

 

 

 

 

Create form by adding fields to get what you want on the form and save the from.

 

Use form shortcode to add form to page or use the Add Form Icon at top of editor on Page or Post to insert form.

 

Click Email Design on Dashboard Menu under BD From Builder to customize the email that sends the form

2018 06 07 0032

Customize Email Design

 

 

 

 

 

 

 

 

 

Click Entries to view info that was gathered by the forms when someone submits a form

You can customize the color and layout of the form by editing the css/visual-form-builder.css file

2018 06 07 0034

Change Form Colors and Background colors