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
    • Support

    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

    • TKK
      • Site Builder, Child of Zeus

      Hi, Kris
      Can you please fix the button submit to have full width and responsive to all the device like the form above and please add some button to choose file make it gray, finally please fix the gap in mobile device as you can see in the screenshot that I attach.

      There are three thing to fix first the button submit , second add new button to choose file, third fix the gap in mobile and desktop site.
      thx,
      Don

  • TKK
    • Site Builder, Child of Zeus

    Moreover, i seem like in desktop version the choose file appear so can you please make it appear too in mobile version just make it white not gray as i mentioned earlier and please fix the set/reset button to have full width in all devices

    Thx a lot for the amazing help and support Kris!!
    Don

  • Kris
    • Support

    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

    • TKK
      • Site Builder, Child of Zeus

      Hi, kris
      thank you for helping me with the styling css but can you please change the set/reset button like in the screenshot I attached here and please make these two button responsive to all the device.

      Thx again,
      Don

  • Kris
    • Support

    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.