Contact Form styles Not working

I want to style the contact 7 form in the following page, to the same style as the 1st contact form in the same page. That's with the purple hover and gray box inside.
Page: https://www.rat-away.com/contact-us-inner/

Tried the following CSS in the Global CSS section but it doesn't seem to work. Not sure what' being missed in here.

border: 1px solid transparent;
	margin: 0 0 1px;
	background: #f7f7f7;
}

#wpcf7-f9186-o1 > form > p > label > span > input:focus {
	border: 1px solid #584780;
	background: #ffffff;
}

#wpcf7-f9186-o1 > form > p > label > span > textarea {
	border: 1px solid transparent;
	margin: 0 0 1px;
	background: #f7f7f7;
}

#wpcf7-f9186-o1 > form > p > label > span > input:hover {
	border: 1px solid #584780;
	background: #ffffff;
}

Please correct it, and provide the rest of the CSS, to create an exact design of the 1st contact form as seen in the mentioned page.

  • Kris Tomczyk

    Hi Don,

    Hope you are doing good today.

    I have modify css from chat conversation and added this css to "custom css" plugin.

    /*wpmudev kris tickets C2E60*/
    #wpcf7-f9186-o1 > form > p {
    margin:0 0 1px 0;
    padding:0;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > input {
    border: 1px solid transparent;
    margin: 0 0 1px;
    background: #f7f7f7;
    font-weight:normal;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > input:focus {
    border: 1px solid #584780;
    background: #ffffff;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > textarea {
    border: 1px solid transparent;
    margin: 0 0 1px;
    background: #f7f7f7;
    font-weight:normal;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > input:hover {
    border: 1px solid #584780;
    background: #ffffff;
    }
    #wpcf7-f9186-o1 #cf7-geocode-reset {
    height:50px !important; float:left; line-height:22px;
    }
    #wpcf7-f9186-o1 #geocode-link {
    height:50px !important; float:left; line-height:50px;
    }
    #wpcf7-f9186-o1 > form > p > input[type=submit] {
    background:#584780;
    float:right;
    height:50px;
    padding:0 30px;
    color:#fff;
    }
    #wpcf7-f9186-o1 > form > p > input[type=submit]:hover {
    background:#333;
    }

    The reason why this was not working for the first time was the order of loading styles.
    Thanks to the "CUSTOM CSS" plugin we can be sure that the styles will be implemented or overwritten.

    Please check if everything is ok and let me know

    Kind Regards,
    Kris

  • Kris Tomczyk

    Hi Don,

    Summarizing:
    - button submit full width also in responsive mode
    - choose file full width, white background and a light gray border to look better
    - set/reset button have full width in all devices is done (I understand all devices you mean also desktop. So all buttons have full width)

    Of course, I paste here the final code that I made in your CUSTOM CSS plugin

    #wpcf7-f9186-o1 > form > p {
    margin:0 0 1px 0;
    padding:0;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > input {
    border: 1px solid transparent;
    margin: 0 0 1px;
    background: #f7f7f7;
    font-weight:normal;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > input:focus {
    border: 1px solid #584780;
    background: #ffffff;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > textarea {
    border: 1px solid transparent;
    margin: 0 0 1px;
    background: #f7f7f7;
    font-weight:normal;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > input:hover {
    border: 1px solid #584780;
    background: #ffffff;
    }
    
    #wpcf7-f9186-o1 #cf7-geocode-reset {
    height:50px !important;
    float:left;
    line-height:22px;
    }
    
    #wpcf7-f9186-o1 #geocode-link {
    height:50px !important;
    float:left;
    line-height:50px;
    }
    
    #wpcf7-f9186-o1 > form > p >span > input[type=file] {
    background:#fff;
    border:1px solid #f7f7f7;
    width:100%;
    padding:0 10px;
    margin:0 0 10px 0;
    line-height:50px;
    }
    
    #wpcf7-f9186-o1 > form > p > input[type=submit] {
    background:#584780;
    float:none;
    height:50px;
    padding:0 30px;
    width:100%;
    color:#fff;
    }
    
    #wpcf7-f9186-o1 > form > p > input[type=submit]:hover {
    background:#333;
    }
    
    #wpcf7-f9186-o1 #cf7-geocode-address {
       width:100% !important;
      }
    
    #wpcf7-f9186-o1 #cf7-geocode-reset {
      width:100% !important;
      text-align:center;
      }
    
    #wpcf7-f9186-o1 #geocode-link {
      width:100% !important;
      margin:0 0 1px 0;
      }
    
    #wpcf7-f9186-o1 #cf7-location-address {
      padding:0 0 10px 0;
      overflow:hidden;
      display:block;
      }

    I'm glad I could help. I am waiting for your answer.

    Kind Regards,
    Kris

  • Kris Tomczyk

    Hi Don,

    The current code in your Custom CSS plugin:

    #wpcf7-f9186-o1 > form > p {
    margin:0 0 1px 0;
    padding:0;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > input {
    border: 1px solid transparent;
    margin: 0 0 1px;
    background: #f7f7f7;
    font-weight:normal;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > input:focus {
    border: 1px solid #584780;
    background: #ffffff;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > textarea {
    border: 1px solid transparent;
    margin: 0 0 1px;
    background: #f7f7f7;
    font-weight:normal;
    }
    
    #wpcf7-f9186-o1 > form > p > label > span > input:hover {
    border: 1px solid #584780;
    background: #ffffff;
    }
    
    #wpcf7-f9186-o1 #cf7-geocode-reset {
    height:50px !important;
    float:left;
    line-height:50px;
    }
    
    #wpcf7-f9186-o1 #geocode-link {
    height:50px !important;
    float:left;
    line-height:50px;
    }
    
    #wpcf7-f9186-o1 > form > p >span > input[type=file] {
    background:#fff;
    border:1px solid #f7f7f7;
    width:100%;
    padding:0 10px;
    margin:0 0 10px 0;
    line-height:50px;
    }
    
    #wpcf7-f9186-o1 > form > p > input[type=submit] {
    background:#584780;
    float:none;
    height:50px;
    padding:0 30px;
    width:100%;
    color:#fff;
    }
    
    #wpcf7-f9186-o1 > form > p > input[type=submit]:hover {
    background:#333;
    }
    
    #wpcf7-f9186-o1 #geocode-link {
    padding:0 33px;
    }
    
    #wpcf7-f9186-o1 #cf7-geocode-reset {
    padding:0 35px;
    }
    
    #wpcf7-f9186-o1 #cf7-location-address {
      padding:0 0 10px 0;
      overflow:hidden;
      display:block;
      }
    
    @media only screen and (max-width: 1080px) {
    
      #wpcf7-f9186-o1 #cf7-geocode-address {
      width:100% !important;
      }
    
      #wpcf7-f9186-o1 #geocode-link {
      width:100% !important;
      margin:0 0 1px 0;
      }
    
      #wpcf7-f9186-o1 #cf7-geocode-reset {
      width:100% !important;
      text-align:center;
      }
    
    }

    Check if everything is ok for you right now. I check on two phones, tablet and have confirmation from iphone user that everything looks good.

    Kind Regards,
    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.