Forms – configuration – contact form 7

This topic has 8 replies, 2 voices, and was last updated 1 years, 5 months ago ago by Rose Tyler

  • Avatar: Peter
    Peter
    Participant
    February 6, 2023 at 14:47

    Hi, can you help me how to stylize the contact form?
    I added it but it looks ugly, the fields have no background and they are too big.
    How can I change this to “customer friendly”?

    Please, contact administrator
    for this information.
    7 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 6, 2023 at 15:24

    Hello, Peter

    We’ve deleted the demo custom CSS code for the page. Please check now.

    Kind Regards,
    8theme team

    Avatar: Peter
    Peter
    Participant
    February 6, 2023 at 15:28

    Thanks, It’s better.
    And how could I make this form narrower (as I marked in the screenshot)?
    Where can I style it or are there any ready-made css styles for forms?
    Because on sample templates they are not once so nicely prepared.

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 6, 2023 at 15:59

    In this case, you need to use custom CSS code, for example:

    .vc_tta-panels .wpcf7-form {
        width: 80%;
    }

    Describe your request in more detail, then we will be able to suggest the code.

    Kind Regards,
    8theme team

    Avatar: Peter
    Peter
    Participant
    February 13, 2023 at 10:08

    Hi,
    Thanks.
    Can you help me with “Tabbed content”?
    Why does he look so weird? It looks different on the other side. The clicked item is highlighted somehow. (I’m attaching a screenshot).

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 13, 2023 at 13:04

    Hello, Peter,

    Screenshots were done from 2 different pages? Please provide URLs of both pages.

    Kind Regards,
    8theme team

    Avatar: Peter
    Peter
    Participant
    February 13, 2023 at 13:48

    ok

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 13, 2023 at 16:11

    Hello, Peter,

    You can add the next code in Custom CSS for page area:

    .vc_tta-container .vc_tta-tabs-position-top .vc_tta-tabs-list {
        border-bottom: 1px solid #eee;
        margin-bottom: 1.5em;
    }
    .wpb-js-composer .vc_tta-container .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab a {
        border-bottom: 1px solid transparent !important;
        line-height: 1em;
        margin-bottom: 0;
        padding: 1.001em 0 !important;
        margin-right: 1.5em;
    }
    .wpb-js-composer .vc_tta-container .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab a:hover, .wpb-js-composer .vc_tta-container .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab.vc_active>a {
        color: #1071b6;
    }
    .wpb-js-composer .vc_tta-container .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab a:hover, .wpb-js-composer .vc_tta-container .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab.vc_active>a {
        border-color: #1071b6 !important;
    }

    https://prnt.sc/OKRMdNfQ05MV
    Please note that such additional customization is outside the scope of our basic support.

    Kind Regards,
    8theme team

  • Viewing 8 results - 1 through 8 (of 8 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.