Okay
  Public Ticket #1014793
Contact Form &
Closed

Comments

  •  2
    Falcondesignbuild started the conversation

    Cannot seem to figure out how to get check boxes and corresponding text on the same line. I have read where other people had the same issue but the solutions offered did not help me. How can I get the text next to the check box and even put for text and check boxes on the same line? Thanks

  •  145
    Joanna replied

    Hi Falcondesignbuild,

    Please check the Contact Form 7 documents on how to set up and style the forms:

    http://contactform7.com/docs/

    If you are still having an issue after following their guidelines let me know and I'll investigate what's going on for you.



    Kind regards,
    Joanna
    Veented Support

    Find a helpful article for your theme here: https://veented.ticksy.com/articles/#article-categories

    Check out our latest article: How to Improve Page Loading Times

    Don't forget to hit the like button below if you are happy with your support answer :)

  •  2
    Falcondesignbuild replied

    The docs do not directly address my issue so my lack of knowledge in CSS makes it hard to come up with a solution. Here is my CSS below. Could you identify what needs to change so that the checkboxes get fixed?

    CSS pertaining to contact forms

    * Contact Form 7 */

    /*.wpcf7 {
    max-width: 970px;
    margin: 75px auto 0 !important;
    }

    .wpcf7 form > p:nth-child(2),
    .wpcf7 form > p:nth-child(3),
    .wpcf7 form > p:nth-child(4) {
    float: left;
    width: 51%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    }

    .wpcf7 form > p:nth-child(5) {
    float: right;
    padding-left: 15px;
    padding-right: 15px;
    width: 47%;
    box-sizing: border-box;
    }*/

    /* Contact Form */

    .contact .inner{
    padding-bottom:68px;
    }

    input,textarea,button{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    }

    .wpcf7-validation-errors {
    clear: both;
    }

    .contact form input,
    .contact form textarea {
    width: 100%;
    height: auto;
    padding: 12px 15px 12px;
    font-size: 14px;
    margin-bottom: 16px !important;
    color: #363636;
    letter-spacing: 0.5px;
    background: #fafafa;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    outline: none;
    }

    .vntd-contact-form p {
    margin: 0px;
    }

    .contact-form-left {
    float: left;
    width: 370px
    }

    .contact-form-right {
    padding-left: 395px;
    }

    .vntd-contact-form.contact form .wpcf7-submit {
    background: #8dc63f;
     width: auto;
     display: inline-block;
     color: #fff;
     font-weight: bold;
     border: 0;
     padding: 13px 38px;
     font-size: 16px; }
     
     .vntd-contact-form.contact form .wpcf7-submit:hover {
      background: #fecb16;
     }
     
     .wpcf7 label {
      font-weight: normal;
      display: block;
      margin-bottom: -8px;
     }

    /* Dark Contact Form */

    .contact-form-dark.contact form input,
    .contact-form-dark.contact form textarea  {
    background: #252525;
    color: #636363;
    border-color: #252525;
    }

    .contact-form-dark.contact form input:hover,
    .contact-form-dark.contact form textarea:hover {
    color: #fff;
    background: #313131;
    border-color: #464646;
    }

    .dark-form{
    background-color:transparent;
    border:1px solid #2e2e2e;
    }

    .contact form textarea{
    height: 201px;
    max-width: 100%;
    max-height: 171px;
    }
    #respond #submit,
    .contact form button.contact-form-button{
    margin-bottom:0 !important;
    }

    #subscribe form .subscribe-form{
    width:100%;
    height: auto;
    padding:15px 15px 12px;
    font-size:18px;
    margin-bottom:18px;
    color:#7f7f7f;
    letter-spacing: 0.5px;
    }

    /* Actives, Focuses and Rollovers */

    .contact form input:active,
    .contact form textarea:active,
    .contact form input:focus,
    .contact form textarea:focus{
    outline: none;
    }
    #respond #submit:hover,
    .contact .wpcf7-submit:hover{
    color:white;
    }

    div.wpcf7-response-output {
    padding: 10px 14px;
    margin: 0 15px;
    }

    /*#page-content span.wpcf7-not-valid-tip {
    margin-top: -10px;
    margin-bottom: 10px;
    }*/

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

    .contact form input:hover,
    .contact form textarea:hover{
    border-color:#dadada;
    }

    /* Message For Mail */

    .mail-message-area{
    width:100%;
    padding:0 15px;
    }

    .mail-message{
    width: 100%;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
    margin:0 auto;
    border-radius: 0;
    }

    .not-visible-message{
    height:0px;
    opacity: 0;
    }

    .visible-message{
    height:auto;
    opacity: 1;
    margin:25px auto 0;
    }

    /*.contact span { 
    display:none; 
    font-size:12px; 
    line-height:30px; 
    color:red;
    }*/

  •  145
    Joanna replied

    Hi Falcondesignbuild,

    Could you add your wp login details so I can see your contact form 7 set up and sort it for you


    Kind regards,
    Joanna
    Veented Support

    Find a helpful article for your theme here: https://veented.ticksy.com/articles/#article-categories

    Check out our latest article: How to Improve Page Loading Times

    Don't forget to hit the like button below if you are happy with your support answer :)

  •   Falcondesignbuild replied privately
  •  145
    Joanna replied

    Hi Falcondesignbuild,

    I've just logged in thank you.

    I can see that you are running an old version of the theme and plugins, and WordPress.

    Give them all an update:

    How to update Qaro and it's plugins

    Once you have done that let me know and I'll log back in again


    Kind regards,
    Joanna
    Veented Support

    Find a helpful article for your theme here: https://veented.ticksy.com/articles/#article-categories

    Check out our latest article: How to Improve Page Loading Times

    Don't forget to hit the like button below if you are happy with your support answer :)

  •  2
    Falcondesignbuild replied

    I think I got it all updated. Let me know if you can figure out what is going on. 

  •  145
    Joanna replied

    Hi Falcondesignbuild,

    Ok, the CSS should be correct now. I've added this into Qaro > Advanced > Custom CSS Styling box:

    .wpcf7 input[type=checkbox] {
        width:auto!important;
        margin-top: 10px;
        margin-right:10px;}
    span.wpcf7-list-item {
        display:inline-block;}
    .vntd-contact-form p {
        margin: 0 0 10px 0;
    }
    

    Check out your Contact Page 2.


    Kind regards,
    Joanna
    Veented Support

    Find a helpful article for your theme here: https://veented.ticksy.com/articles/#article-categories

    Check out our latest article: How to Improve Page Loading Times

    Don't forget to hit the like button below if you are happy with your support answer :)

  •  2
    Falcondesignbuild replied

    Looks great thank you! Only issue now is that none of my portfolio pages are working. When you click on them you get a 404 error. Everything seems to be correct on the settings. Let me know if there is anything I can do to fix.

  •  2
    Falcondesignbuild replied

    Never mind I fixed it