How To Reference Quick Contact Form

[cbfriedland]

Greetings!

Is there a way to call the Quick Contact Form as a link?

For example, my web-site’s Title/Breadcrumb section contains “need help?  support@shuttermonkeys.com.”  I would like the quick contact form to appear when a user clicks on “support@shuttermonkeys.com.”

Thanks,

CB

 

[Kieran_SQ]

Hi,

This is doable but it’s a little tricksy.

– First go to WP Admin > Appearance > Menus and add the menu item you wish to use to trigger the contact form. Set the URL as # and text as desired.
– Now at the top of the menu edit screen, click open the ‘Screen Options’ tab and make sure ‘CSS Classes’ is checked.
– Open up the menu item via the editor and set the CSS class as kleo-quick-contact-link. Save your menu and view on the front-end.
– Right click the menu item and inspect it in the console. You’ll see it has many classes but one specifically will tell you the menu item ID. It will look like menu-item-13078. You want to note the number value.
– Copy the below CSS into your KLEO Child theme’s style.css and replace the ID shown in the example below with your own.

COPY CODE

li#menu-item-13078.kleo-quick-contact-link {
    background: unset;
    height: unset;
    width: unset;
    padding: unset;
    margin: unset;
}

Hope this helps,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[cbfriedland]

Hi Kieran,

This works great! Thank you so much.

One additional question. This works well for the Primary Menu. Am I able to do this in the Title/Breadcrumb configuration as well? Would I add it in the “Main menu section?”

Thanks
CB

[Kieran_SQ]

Hi,

It should work in any menu on the site as the CSS isn’t terribly specific. Try it, see what you get, if you run into an issue let me know – tell me where/what the issue is and I’ll see what I can do.

To use this outside of the menu you’ll need to structure your HTML like so

<a href="#" class="kleo-quick-contact-link">Text for link</a>

You’ll then need to adjust the CSS from above to match wherever you’re using it. For example in the main content the CSS would become

COPY CODE

#main.kleo-quick-contact-link {
    background: unset;
    height: unset;
    width: unset;
    padding: unset;
    margin: unset;
}

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[cbfriedland]

Thanks for the quick reply! The service here is so awesome!

I made the changes suggested. It appears that it is not respecting the and printing it as text instead.

CB

[Kieran_SQ]

Hi,

Really happy to hear that 🙂 Can you send me a link to the page where you see the issue and a description of where on the page I can find the issue.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[cbfriedland]

https://shuttermonkeys.com/forums/ You will find it right in the breadcrumb section on the right side.

[Kieran_SQ]

Hi,

That’s very strange indeed. The area where you have entered the HTML should respect the content and output it. Can you share admin access with me so I can check this out for you?

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[cbfriedland]

This reply has been set as private.

[Kieran_SQ]

Hi,

I have logged in and checked your theme options. It looks like you copied the HTML directly from the email notification and it had lost it’s formatting. I have updated the field with the HTML I sent and have edited it to include the email as per your edit.

Your input
<a href=&quot;#&quot; class=&quot;kleo-quick-contact-link&quot;>support@shuttermonkeys.com</a>

Corrected input
<a href="#" class="kleo-quick-contact-link">support@shuttermonkeys.com</a>

I have also added the below CSS to your KLEO Child themes style.css via WP Admin > Appearance > Editor > KLEO Child > Style.css and cleared your WordPress cache.

COPY CODE

.page-info .kleo-quick-contact-link {
    background: unset;
    height: unset;
    width: unset;
    padding: unset;
    margin: unset;
}

Please purge your browsers cache (Ctrl+F5) to see the changes.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[cbfriedland]

Thanks so much!

One final question. Can you point me in the direction in how to make the area look like the breadcrumb bar instead of appearing in a different color and like a button?

[Kieran_SQ]

Hi,

No worries, happy to help 🙂 Do you mean you wish to change the colour of the link to match the breadcrumb link colour? If so use the below CSS in your KLEO Child themes style.css

COPY CODE

.page-info a.kleo-quick-contact-link {
    color: #777777;
}

#777777 is the current colour of your links in the breadcrumb area – you can change this value to suit your needs.

If you’d like to also change the hover colour then use the below CSS snippet as well as the snippet above and change the value from red to any value as desired.

COPY CODE

.page-info a.kleo-quick-contact-link:hover {
    color: red;
}

If this is not what you meant then please provide me with more information and I’ll be happy to assist.

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[cbfriedland]

Right now there are three things I would like to figure out:

1. I think you have already answered this: I would like the color of the text to match that of the “need help?” which now appears in the menu.

2. I would like it all to appear on the same line instead of on separate lines.

3. Right now the background color of the link area is darker than the color of the breadcrumb bar. I would like them to be the same color.

Basically, I would like to match the examples in the GUI but with the functionality of opening the contact form if someone clicks on the email address. I hope this helps clarify things!

Again, I really appreciate all the help!

[Kieran_SQ]

Hi,

I have added the below CSS snippet to force all content onto one line.

COPY CODE

.page-info {
	display: -webkit-inline-box;
}

I have already added custom CSS that removes the button type effect issue coming from the class but it is not reflected in the front end even after clearing the cache (see screenshots). You need to clear your server caching and/or CDN for these to show on the front end.

You should use the CSS from my previous reply to get the link colours to match.

I have attached a screenshot where I have manually entered the CSS via the front-end to show you how it should look

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[cbfriedland]

Hi Kieran,

I see the change in the text color but the single line and remove shading changes haven’t taken effect.

So I can follow along at home, where did you make the changes to the CSS for these issues?

Thanks,
CB

[Kieran_SQ]

Hi,

The changes were made via WP Admin > Appearance > Editor > KLEO Child > Style.css

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[cbfriedland]

Hi Kieran,

The issue still exists. I have cleared the cache multiple times and no effect.

What should I try next?

Thanks,
CB

[Kieran_SQ]

Hi,

This is definitely a caching issue of some kind as the CSS the was added to the KLEO Child theme still does not show on the front end (see screenshot).

You must have some kind of caching like Varnish or Redis at the server level, or a CDN, that has not been cleared.

Contact your host to see what other caching options are enabled on your site and how to clear them.

Edit: I logged back into your site and found half of the CSS I had previously added for you had been removed. I have added this again, please leave this in tact and clear your caches to see the changes.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[cbfriedland]

Thanks so much for the help on this! You can close the ticket.

Cheers!
CB

[Kieran_SQ]

Hi,

No worries, happy to help 🙂 Feel free to open a new ticket any time with any other questions or issues and we’ll be happy to assist again.

All the best,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts