Contact forms and essential grid

[dturkov]

Hi there
I am trying to build a contact us page, with a google map and contact form which is the best way to do it?
I also would like to show pages with the movie on the main page at the bottom, I would like to have something like in the image attached (what I would like to achieve.jpg) with two or more rows, I selected the pages in ess grid but no images is show. And the alignement is left (attached images)
I also was wondering how to change the size of the p text, it seam I have a css in place called

where can I change it?
Thanks in advance for your great help

Carlo

[Prasant]

Hello Carlo,

Thanks for asking.

You can use Contact form 7 plugin to create contact form. You can install Contact form 7 plugin from X > Validation > Approved Plugins. Please take a look at following article to get started with Contact Form 7 plugin.

https://contactform7.com/getting-started-with-contact-form-7/

As you are looking to display Google Maps on Contact page, you have the option to use Cornerstone Maps element. Please note that Google has changed the policies on how users can access Maps resources. You need to get API key inorder to access Google Maps resources. You can get Maps API key from following resource:

https://developers.google.com/maps/documentation/javascript/get-api-key

If you would like to display video, you have the option to use Cornerstone Video element. If images are not showing up in Essential Gird, please make sure you have configured the plugin properly. Please take a look at following docs.

Essential Grid | Themeco Docs

https://www.themepunch.com/essgrid-doc/essential-grid-documentation/

Thanks.

[dturkov]

Thanks for your help,

I still have a question about where to find the CSS which is calling some feature in my webite, it is called resp-h man.?

Also how do I change the colour of the footer social icon to white and the menu drop down?

Bests

[paul.r]

Hi,

The class resp-h is usually use for responsive text.

To change color of footer social and menu dropdown, you can add the code below in Theme Options > CSS

/* Social icon color */
.x-colophon.bottom .x-social-global a {
    color:red;
}
/* dropdown color */
.desktop .sub-menu {
   background-color:blue;  
}

Change red and blue with the color that you like,

Hope that helps.

[dturkov]

Thanks but that does not answer my question fully. Is there a place where I can access “resp-p man” style? As I notice that in my website I would like to keep resp-p-man but change something of it, example the text colour to black and the font size

[ruenel]

Hello There,

man is a utility class built in the theme which means "margin all none". You can check all the utility classes and spacing helpers front his knowledge base article: https://theme.co/apex/forum/t/customizations-css-class-index/207

resp-p is a custom class added to the text element to be used as a class selector in implementing the responsive text. If you want to style it a bit, you can use those classes and add your own custom styling. For example, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.resp-p.man {
  color: black !important;
  font-size: 14px;
}

Hope this helps.