Contact Form’s formatting … Kleo’s “#kleo-quick-contact” element…

[jackbean]

Dear Kleo Team,

I hope you all had a great Christmas holiday!!

We have been continuingly working on our web site, and want to check with you to see if Kleo’s default Contact Form can be changed to our own contact form built using Ninja Forms.

The reason for the change is that Kleo’s default Contact Form is built from CF7 and is slow. Also, because we need to use Ninja Forms for other purposes, we would like to remove the CF7 plugin and just use Ninja Forms.

It was very easy to switch to Ninja Forms’ contact form using options provided by Kleo’s Layout Settings. And the Ninja Forms’ contact form works, but the problem is that the format/layout for the Ninja Forms’ contact form does not look good.

You can check out how the Ninja Forms’ contact form looks in Kleo theme on this webpage (please also see attached pdf file):

https://www.prohrweb.org/sample-page/

From Chrome’s Inspect Elements, I see that the contact form is controlled by Kleo’s “#kleo-quick-contact” element, and I tried to put some quick css in Theme Options, but I cannot get the form to display properly.

 Some of the problems with this the layout are:

(1). I cannot see the entire form. If I change the height of the element, some of the form’s content will be cut off.

(2). I cannot change the font and size of any of the details.

Can you please offer some suggestions?

Thank you!!

 

JB

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

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

Always happy to help you 🙂

[Radu]

Hi,

just add this css

COPY CODE

#kleo-quick-contact {
    height:auto !important;
    overflow-y:auto;
    z-index:1299999 !important;
}

#kleo-quick-contact .nf-field-label label {
font-size:15px !important;
padding:0px;
}

The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS

Cheers
R.

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

What support service includes ? What not ?

[jackbean]

Hi Radu,

Thank you for the reply. I tried your code and it made things better, but did not completely fix everything.

In any case, since this is complicated, perhaps we just won’t have this feature in our website. We will just have a traditional separate “Contact Us” page instead of this very cool feature.

I hope your company will consider implement Ninja Forms (or Gravity Form) in the future for all contact forms in your templates. I think it will enhance performance and feature for future versions of Kleo.

Thank you again!

JB

[Radu]

Hi,
Ok then, we will take that into consideration

Cheers
R.

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

What support service includes ? What not ?

[Author]

Posts