The Contact Form Layout Issue – (Static Block)

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

  • Avatar: Graham
    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.
    13 Answers
    Avatar: Rose Tyler
    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

    Avatar: Graham
    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.
    Avatar: Rose Tyler
    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

    Avatar: Graham
    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.
    Avatar: Rose Tyler
    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

    Avatar: Graham
    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

    Avatar: Rose Tyler
    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

    Avatar: Graham
    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.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    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

    Avatar: Graham
    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

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 16, 2018 at 07:14

    Hello,

    You’re welcome!
    Have a nice day 🙂

    Regards

    Avatar: Graham
    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.
    Avatar: Rose Tyler
    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

  • Viewing 14 results - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.