Contacts
Fluxus theme has a page template that is specially designed for providing contacts information. It supports Google Maps and is compatible with Contact Form 7 plugin which allows to create custom contact forms.
To set up contacts page create a new page and assign a Contacts template to it. After saving the page you will be able to see Contacts Page configuration box. Use it to integrate Google Maps into your contacts page.
If you set featured image for your contacts page, it will get displayed in the background of your contacts form.
Contacts Page Configuration
- Google Maps API - in order to use Google Maps, you have to provide your personal Google Maps API.
- Map Center Position - latitude and longitude of the point that will be in the center of the map.
- Map Icon - latitude and longitude of the marker.
- Icon Image URL - provide an URL to the image which will be used instead of default Google Maps marker.
- Contacts Information - can be used to add extra information such as email, phone number and address. This information will be displayed nicely on the right side of the content.
Setting Up Google Maps
First you will need to acquire Google Maps API key. Go to this link and follow instructions to find out how. Enter the API key into Google Maps API box.
To set the map position you will need to get the coordinates. It is easy. Open Google Maps, find the location you wish to use, right-click it and click the coordinates at the top of the menu to copy them. You will get two numbers that look like this: 37.813582,-122.47813. First number is the latitude, the second is longitude. Enter each of them into the corresponding boxes. Save the page and you should see the the map in the background of your contacts page.
You can customize the default Google Maps marker by providing your own one. Enter an URL that points to an image in the Icon Image URL box. Specifying Icon Latitude and Icon Longitude will set the position of the marker. Normally it is OK to make them the same as map center latitude and longitude. Although if you are picky, you might want to set the center position a little bit to the side of your marker. This way the marker will displayed on the side of the page and will not be covered by the content that is placed in the center.
Contact Form
Fluxus theme is compatible with Contact Form 7 plugin. Contact Form 7 is a powerful plugin that enables you to create custom contact forms.
Follow these steps to create a contact popup form on your page
- Install Contact Form 7 plugin
- Create a contact form using Contact Form 7 plugin and copy the provided shortcode. It should look something like this:
[contact-form-7 id="25" title="General Contact"] - Create a contacts page, make sure you assign Contacts template to it.
- Paste the copied shortcode inside the content and save the page.
Now your contacts page will have a Send Message button, clicking it will open the contacts form you have created with Contact Form 7.