Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 15, 2018 at 11:57 pm #997720
    NR1234

    Hi Enfold team,

    In one of the sections of our webpage I have used CF7 and am trying to style it to be like the contact form (img 1) attached in terms of the look. The email and submit boxes need to be on a transparent background with a white border. The submit button needs to have a hover effect when the mouse hovers on the submit button.

    I have used the following code:

    #top.page-id-3261 #cf7-contact-form #wpcf7-f3290-p3261-o2 input[type=”submit”].wpcf7-form-control.wpcf7-submit {
    width: 30% !important;
    padding: 9px 2px!important;
    font-size: 13px !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important
    background: rgba(0,0,0,0.1) !important
    }

    #top.page-id-3261 #cf7-contact-form #wpcf7-f3290-p3261-o2 input[type=”email”].wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
    display: inline-block !important;
    width: 67% !important;
    padding: 9px 2px!important;
    border: 4px solid #ffffff !important
    font-size: 13px !important;
    background: rgba(0,0,0,0.1) !important
    }

    #top.page-id-3261 #cf7-contact-form #wpcf7-f3290-p3261-o2 input[type=”submit”].wpcf7-form-control.wpcf7-submit hover {
    color: #fa812f !important;
    border-color: #ffffff! important
    }

    However, I am unable to get the transparent background for both the buttons as well as the similar size as in the image attached.

    Appreciate your help.

    Thanks
    Garima

    August 16, 2018 at 8:02 am #997832
    Rikard

    Hey NR1234,

    Please try this CSS as well:

    .page-id-3261 input[type='email'] {
  background-color:transparent !important;
}

    Best regards,
    Rikard

    August 16, 2018 at 11:49 pm #998213
    NR1234

    Hi Rikard,

    Thanks this code worked for the email box but the submit button background still appears to be a different color and I want the submit box to be transparent and only on hover color changes.

    Could you please suggest the relevant code for that?

    Thanks

    Garima

    August 17, 2018 at 7:19 am #998295
    Rikard

    Hi Garima,

    Thanks for the feedback, please try this as well:

    .page-id-3261 input[type='submit'] {
  background-color:transparent;
}

.page-id-3261 input[type='submit']::hover {
  background-color:red;
}

    Best regards,
    Rikard

    August 17, 2018 at 5:25 pm #998518
    NR1234

    Hi Rikard,

    Thanks this worked.

    One more question is how do I change the font type of the text that appears within the contact form. I want to use the quicksand font type for the text in the 2 boxes.

    Also, if I want to increase the size of the boxes as in make them bigger what code do I use?

    Thanks

    Garima

    August 18, 2018 at 1:52 pm #998710
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    /*----------------------------------------
// CSS - Placeholder text
//--------------------------------------*/


/* Place holder text color */
::-webkit-input-placeholder {
color: #bbb!important;
}
::-moz-placeholder {
color: #bbb!important;
}
::-moz-placeholder {
color: #bbb!important;
}
::-ms-input-placeholder {
color: #bbb!important;
}


/* Clear placeholder text on focus*/
[placeholder]:focus::-webkit-input-placeholder {
transition: opacity 0.15s 0.15s ease;
opacity: 0;
}

/* Input field style */ 
#top input[type="text"], 
#top input[type="input"], 
#top input[type="password"], 
#top input[type="email"] {
    padding: 14px 6px;
    font-family: "quicksand",sans-serif;    
    background: #fff;
    border-radius: 0px;
}

    Best regards,
    Vinay

    August 21, 2018 at 4:41 am #999664
    NR1234

    Thanks Vinay. This worked for changing the size, font family and color of the placeholder text.

    However, the submit button text has still not changed to quick sand. I tried adding the same code for the submit button i.e.,

    #top input[type=”text”],
    #top input[type=”input”],
    #top input[type=”password”],
    #top input[type=”email”]
    #top input[type=”submit”] {
    padding: 14px 6px;
    font-family: “quicksand”,sans-serif;
    background: #fff;
    border-radius: 0px;
    }

    But it did not change the font family for the submit button. Could you suggest any additional code?

    Thanks

    Garima

    August 21, 2018 at 1:30 pm #999809
    Rikard

    Hi,

    Thanks for the feedback, I just tried this CSS and it works in the browser inspector. Please try it out:

    .main_color input[type='submit'] {
    font-family: quicksand;
}

    Best regards,
    Rikard

    August 21, 2018 at 2:29 pm #999831
    NR1234

    Thanks this worked.

    Regards

    Garima

    August 21, 2018 at 7:16 pm #999945
    Jordan Shannon

    Hi,

    I’m glad you were able to get this resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘styling of CF7’ is closed to new replies.