Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #1725762
Acceptance Checkbox problem / Contact Form 7
Closed

Comments

  • bokstudio started the conversation

    Hi,

    I´m having some trouble with the acceptance checkbox in contact form 7, is not display inline (see attached for safari and firefox). I usually use this code:

    .wpcf7-form-control-wrap { display: inline!important; }

    The page/demo I use is Medical (clinic) with ".contact-form-style-medical-1" and it has a lot of css for contact form in de VC CSS box. Maybe there is an incompatibility.

    Here is the code from the Visual Composer CSS box:

    @media (max-width: 1199px) {
    .wpb_row,
    .wpb_row > * {
        margin-top: 0 !important;
    }
    }
    @media (max-width: 992px) {
    .gem-map-with-text-content {
        display: none;
    }
    }
    @media (max-width: 450px) {
        .gem-textbox-content {
        padding: 0 !important;
    }
    .custom-padding .gem-button-size-medium {
        padding: 0 20px !important;
    }
    .contact-form-style-medical-1 input[type='submit'] {
        padding: 0;
        font-size: 14px;
    }
    .no-padding .vc_column-inner {
        padding-left: 21px !important;
        padding-right: 21px !important;
    }
    .no-padding-text-box .vc_column-inner {
        padding-left: 38px !important;
        padding-right: 38px !important;
    }
    }

    #page .site-header-wrapper-transparent #site-header:not(.shrink) {
        background-color: #252525 !Important;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

    .custom-overflow {
        overflow: visible !important;
    }
    .gem-counter-number {
        font-size: 80px !important;
    }
    .gem-list.gem-list-color-1 > ul > li:before {
        color: #1a81c3;
    }
    .gem-table-style-1 tr:nth-child(even) td {
        background-color: #fff;
    }
    .gem-table-style-1 td {
        border-right: medium none;
        border-left: medium none;
        border-top: medium none;
        padding: 5px 0px;
    }
    .gem-table-style-1 tr:last-child td {
        border: none;
    }
    .custom-bg-position .vc_column-inner{
    background-position: 100% 100%!important;
    }
    .quickfinder-style-vertical .quickfinder-item-title {
        line-height: 30px;
        font-size: 19px !important;
    }

    .vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-title {
        color: #f55060;
    }
    .gem-testimonials.style1  .gem-testimonial-wrapper:after,
    .gem-testimonials.style1 .gem-testimonial-name {
        color: #1a81c3;
    }

    .pricing-table-style-5 .pricing-row:nth-child(odd) {
        background-color: #03263e;
        color: #bfd0db;

    }
    .pricing-table-style-5 .pricing-footer,
    .pricing-table-style-5 .pricing-row:nth-child(even) {
        background-color: #033150;
        color: #bfd0db;
    }
    .pricing-table-style-5 .pricing-price-subtitle {
        font-family: 'Montserrat UltraLight';
        font-size: 19px !Important;
        text-transform: uppercase;
    }
    .pricing-table-style-5 .pricing-price {
        background-color: #fd5364 !important
    }
    .pricing-table-style-5 .pricing-price * {
        color: #fff !important;
    }
    .blog.blog-style-masonry article .description {
        background-color: #fff;
    }
    .contact-form-style-3 .cf-style3-textarea textarea,
    .contact-form-style-3 .cf-style3-name input,
    .contact-form-style-3 .cf-style3-email input,
    .contact-form-style-3 .cf-style3-website input {
    background-color: #032a45 !important;
    border: 1px solid rgba(223, 229, 232, 0.16);
    border-radius: 2px 3px 3px 2px;
    }

    .contact-form-style-3 input[type='submit'] {
        background-color: #f5a12d;
        max-width: 364px;
        display: inherit;
        margin: 0 auto;
    }
    .custom-padding .gem-button-size-medium {
        padding: 0 88px;
    }
    .wpcf7 .cf-style3-textarea textarea {
        width: 100%;
        max-height: 225px;
        margin-bottom: 36px;
    }
    .gem-map-with-text {
        margin-bottom: 0;
    }

    #footer-nav {
        background-color: #00243d;
    }

    a .socials-item-icon {
        color: #7e8ea1 !important;
    }
    a .socials-item-icon:hover {
        color: #f55060 !important;
    }

    #footer-nav a:hover,
    .footer-site-info a {
        color: #40b7ff !important;
    }

    .contact-form-style-medical-1  .combobox-wrapper {
        max-width: 100%;
    }

    .contact-form-style-medical-1 textarea,
    .contact-form-style-medical-1 input,
    .contact-form-style-medical-1 span {
            width: 100%;
    }

    .contact-form-style-medical-1 input[type='date']::-webkit-datetime-edit,
    .contact-form-style-medical-1 input[type='date']::-webkit-datetime-edit-fields-wrapper,
    .contact-form-style-medical-1 input[type='date']::-webkit-datetime-edit-text,
    .contact-form-style-medical-1 input[type='date']::-webkit-datetime-edit-month-field {
        color: #788c9a;
    }

    .contact-form-style-medical-1  input[type='date']::-webkit-inner-spin-button {
         -webkit-appearance: none;
        display: none;
        color:transparent;
        background:transparent;
        position:absolute;
        font-size:0;
    }
    .contact-form-style-medical-1 input[type='date']::-webkit-outer-spin-button {
        -webkit-appearance: none;
        display: none;
        color:transparent;
        background:transparent;
        position:absolute;
        font-size:0;
    }
    .contact-form-style-medical-1 input[type='date']::-webkit-calendar-picker-indicator {
        color:transparent;
        background:transparent;
        position:absolute;
        width:100%;
        height:50px;
        font-size:0;
        cursor:pointer;

    .contact-form-style-medical-1 input[type='date']::-webkit-clear-button {
        display: none;
        -webkit-appearance: none;
    }

    .contact-form-style-medical-1  input[type='date']:before {
        content: 'e635';
        position: absolute;
        font-family: 'thegem-icons';
        font-size: 24px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-weight: normal;
        right: 14px;
        color: #91a1ac;
    }

    .contact-form-style-medical-1 span.wpcf7-form-control-wrap.email:after,
    .contact-form-style-medical-1 span.wpcf7-form-control-wrap.name:after {
        display: none;
    }
    input[type="date"], 
    input[type="email"], 
    input[type="text"], 
    textarea,
    .contact-form-style-medical-1 span.wpcf7-form-control-wrap.Doctor .combobox-wrapper {
        background-color: #f5f7f6;
        border-radius: 3px;
    }
    .contact-form-style-medical-1 span.wpcf7-form-control-wrap.Doctor span:before {
        color: #91a1ac;
    }
    .contact-form-style-medical-1 textarea {
        height: 138px;
    }
    .contact-form-style-medical-1 input[type='submit'] {
        border-radius: 0px;
        background-color: #f5a12d !important;
    }


    Can you help me?

    Thank you in advance

    Cheers

  • bokstudio replied

    Ok I'd found the problem.Extracting this particular code from VC CSS Box the problem is solved:

    .contact-form-style-medical-1 textarea,
    .contact-form-style-medical-1 input,
    .contact-form-style-medical-1 span {
            width: 100%;
    }


    Cheers ; - )