appearance

You may have some styles of your own that are overriding the plugin styles. First make sure that under settings the CSS Class: is set to mcForm. Then try adding this to your style sheet:

.mcForm{
  font-size:1.3em;
  }

.mcForm input[type=text]{
  font-family: 'Roboto', sans-serif;
  padding:10px 10px 10px 10px!important;
  position:relative;
  top:7px;
  color:#777;
    width:60%!important;
}

.mcForm input[type=submit]{
  padding:10px!important;
  position:relative;
 top:7px;
    left:-10px;
    font-family: 'Roboto', sans-serif;
    background-color:#006FB8!important;
  font-weight:500!important;
}

.mcForm input[type=submit]:hover{

    background-color:#2A83BE!important;
  color:#fff;

}

You can set any class you want and then use the !important tag to override any of the plugin settings as well.

Hi Jason,

Thanks so much for your help. Unfortunately, neither one worked. The class was already set to mcForm and when I added that to the style sheet, it looked very similar to how I previously described the problem (2 separate boxes one on top of another, boxes do not have square corners).

Do you have any other ideas?

Here’s the link to my page if that helps:
https://69.89.27.245/~kellymb2/

The markup you just sent is currently on there.

Thanks again!

Your template looks like it has some responsive calls maybe even using javascript to override the css classes. I tried to override the styles you had with no luck. Try renaming the class in the plugin settings to something unique. With any luck it will just use your themes default form settings.

This has got to be the hardest form to style. A separate CSS stylesheet would be great. But good work for those willing.

Use the CSS !important tag. That should do the trick ??