Return to previous page

The Contact Form Layout Issue – (Static Block)

This topic has 14 replies, 3 voices, and was last updated 7 years, 3 months ago ago by Rose Tyler

Graham

Participant

July 30, 2018 at 20:28

Hello,

I was wondering if you could have a check if I did anything wrong with the contact form layout CSS:
Screenshot: https://ibb.co/cdEbDo

I was creating this row in the “Static Block” > “Shop Banners below the products” and paste each related CSS code from the homepage settings.
——————————————————————————————
These are the CSS codes:
.wpcf7-submit{
font-size: 13px !important;
letter-spacing: 2px !important;
width: 145px !important;
height: 50px !important;
color: #fff !important;
background: #26172c !important;
font-family: Yantramanav;
margin-left:0;
position: relative;
left: -8px;
}
.wpcf7-validates-as-email{
width: 77%;
height:50px !important;
float: left;
background:transparent !important;
border:1px solid #f0f0f0 !important;
color:#24102c !important;
}
input[type=”email”]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
color: #b0b0b0 !important;
}
.form-subs{
height:50px;
}

——————————————————————————————-

DEMO PAGE EXAMPLE: https://www.8theme.com/demo/xstore/underwear/

Thanks very much!
Regards
Graham

Please, contact administrator
for this information.

#197500 Copied

13 Answers

Rose Tyler

Support staff

July 31, 2018 at 07:35

Hello,

Please provide us with correct wp-admin access so we can take a closer look.
Thanks in advance.

Regards

#197510 Copied

Graham

Participant

July 31, 2018 at 19:47

Sorry, the login account is updated below.
Please have a check

Please, contact administrator
for this information.

#197544 Copied
Rose Tyler

Support staff

August 1, 2018 at 08:06
Hello,

It looks like you sorted out http://prntscr.com/kd865q
Please add this custom code also:

@media screen and (max-width: 1024px){ .vc_section.vc_section-has-fill.subscribe-block { padding-top: 75px !important; } }

Feel free to ask if you have any other questions

Regards
#197554 Copied
Graham

Participant

August 1, 2018 at 21:32

Hi,

Thank you for the advise, the contact form layout of the HOMEPAGE is working great, however when scrolling down to the category pages, it seems still to have some layout issue.

Screenshot: https://ibb.co/iLfJwK
(It’s created by “static block” > “Shop Banners below the products”)

Can you please help to have a check again?

Regards

Please, contact administrator
for this information.

#197591 Copied

Rose Tyler

Support staff

August 2, 2018 at 07:22

Hello,

In this case, you need to add the custom css code not in Custom css area on Home page but in Theme Options > Styling > Global Custom css.
Please let me know the result.

Regards

#197595 Copied

Graham

Participant

August 3, 2018 at 01:08

Hi Tyler,

Thank you it works great, however, it worked on every page containing the “Contact Form”.

Is it possible to make them only working for the category pages?

—————————————————————————————
I have tried to add a “.term-ID.woocommerce” after the existing custom CSS class name
(for example ——- wpcf7-submit .term-169.woocommerce)
but unfortunately, it doesn’t seem to be working.
—————————————————————————————

Can you please let me know what class name should I add to appoint them working for specific pages (Categories)?
Any ideas will be much appreciated.
Kind Regards

#197636 Copied

Rose Tyler

Support staff

August 3, 2018 at 09:19

Hello,

Oh I see. Please use .post-type-archive-product class.
Let me know the result.

Regards

#197646 Copied

Graham

Participant

August 14, 2018 at 05:45

Hi, again

Emmm… It’s still not working after added the —— .post-type-archive-product class,

Screenshot: https://ibb.co/kx1a1U

Can you please have a check what I have done wrong?
(Problem need to be resolved: Contact Form Layout for all product-categories pages.)

Here are the global custom CSS codes:
———————————————————————–
/*Long Contact Form Layout*/
.wpcf7-submit .post-type-archive-product {
font-size: 13px !important;
letter-spacing: 2px !important;
width: 145px !important;
height: 50px !important;
color: #fff !important;
background: #26172c !important;
font-family: Yantramanav;
margin-left:0;
position: relative;
left: -8px;
}
.wpcf7-validates-as-email .post-type-archive-product{
width: 77%;
height:50px !important;
float: left;
background:transparent !important;
border:1px solid #f0f0f0 !important;
color:#24102c !important;
}
input[type=”email”]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
color: #b0b0b0 !important;
}
.form-subs .post-type-archive-product{
height:50px;
}
————————————————————————–
Regards

Please, contact administrator
for this information.

#198029 Copied

Olga Barlow

Participant

August 14, 2018 at 10:55

Hello,

I have checked your form and would like to ask why you use the contact form if you want to implement subscription? For the subscription, it would be better to use Mail Chimp form. I have added MC form and necessary styles to child theme style.css. Check if this is ok for you or I should style the contact form instead?

Regards

#198042 Copied

Graham

Participant

August 15, 2018 at 17:11

Hi Olga Barlow,

I’ve just checked and really appreciate for your pointing it out!

Yes, this is the best solution for subscription, way better than the previous contact form!

The problem is well resolved now. Happy 🙂

Have a G’day
Regards
Graham

#198116 Copied

Rose Tyler

Support staff

August 16, 2018 at 07:14

Hello,

You’re welcome!
Have a nice day 🙂

Regards

#198128 Copied

Graham

Participant

August 30, 2018 at 21:31

Hi again,

Sorry I’ve just found there may have some layout issue with the “Mailchimp Form” on the mobile view.
Screenshot: https://ibb.co/jU7iA9
(This subscription form is located at the bottom of the homepage and every category page.)

And just wondering is it possible to reduce the form length a little bit on the desktop view?
Screenshot: https://ibb.co/d5XuHp

Could you please have a check and let me know how to fix it?
Kind Regards
Graham

Please, contact administrator
for this information.

#198708 Copied
Rose Tyler

Support staff

August 31, 2018 at 07:47
Hello,

Please add this code in Global custom css:

@media only screen and (min-width: 992px){ .mc4wp-form-fields input[type="submit"] { right: 85px !important; letter-spacing: 3px; } .mc4wp-form input[type=email] { width: 77%; } } .mc4wp-form-fields input[type="submit"] { right: 15px; }

Regards
#198724 Copied
Viewing 14 results - 1 through 14 (of 14 total)