Hi Anastasia,

I hope you are well today and thank you for your questions.

I’ve entered Google Map API Key in the appropriate place in the theme, however the Google Map still doesn’t display a map on the Contact page. Please help me fix it.

I visited your shared website and saw the below error message in the browser console.

Google Maps JavaScript API error: ApiNotActivatedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error

Please resolve the issue as described on the below page.

https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error

There was no Contact form in the Demo upload for Subscribe to Newsletter field on the Home page. I tried to copy it from Contact Form 1, keeping only the email field and send button, and the result looks misaligned. Please help me fix it.

You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

#cf7-633 input.wpcf7-form-control.wpcf7-submit {
    position: absolute;
    bottom: 0;
}

Best regards,
Shufflehound team

For #1) I enabled API using the instructions you provided in the link, however the map still doesn’t show up. Please help me fix it.

Now, the below error is displaying in the browser console so please fix it.

Geocoding Service: This API project is not authorized to use this API. For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

For #2) your solution partilly fixed it. The Send button now aligns, however the ‘Enter your email’ is still outside of the line. It should be inside the entry field in white font, as in your example, otherwise you can’t see the text.

You have to set that text as placeholder text as described on the below page.

https://contactform7.com/setting-placeholder-text/

You have to enable the Geocoding API as described in the below topics.

https://support.shufflehound.com/forums/topic/google-maps-element-not-showing-up/#post-53858

https://support.shufflehound.com/forums/topic/google-maps-shows-gray-box/#post-55284

Now, the below message is displaying in the browser console.

Geocoding Service: You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

Could you please test it in the browser console yourself and resolve all the errors?