Creating two contact forms with different CSS styles?!

  • Hi guys,

    I am currently looking to other forums for the answer to this question but all the code isnt working, despite finding my contact form ID ‘wpcf7-f564-o1’ and using it before the forms code in the style sheet. This is the current code I have in the /* Forms */ area of the style sheet;

    input,
select,
textarea {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	box-shadow: 1px 1px 3px #eee inset;
	color: #222;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	padding: 5px;
	width: 30%;
	margin: 0px 5px 0px 5px;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

input:focus,
textarea:focus {
	border: 1px solid #999;
	outline: none;
}

::-moz-placeholder {
	color: #999;
	opacity: 1;
}

::-webkit-input-placeholder {
	color: #999;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.entry-content .button {
	background-color: #64c9ea;
	border: none;
	border-radius: 5px;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	padding: 5px 20px;
	width: auto;
	margin-left: 10px;
}

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover,
.entry-content .button:hover {
	background-color: #6bd5f1;
	border: none;
	text-decoration: none;
}

.button {
	border-radius: 5px;
	display: inline-block;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
	display: none;
}

.home-cta a.button {
	display: inline-block;
	margin-top: -30px;
	text-align: center;
}

    the div id is ‘wpcf7-f564-o1’ and the class is ‘wpcf7’, and the form class is ‘wpcf7-form’.

    If you want to take a look at the website, it is https://www.lcinteriorglass.co.uk , the contact form looks and works fine but obviously when I add another contact form it is going to share the same style, which I dont want! So if anybody can help me with the information I have provided to make the style the same just for that contact form on the home page that would be highly appreciated thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

  • input { color: red }

    will make all inputs red.

    #wpcf7-f564-o1 input { color: red }

    will make only inputs within the ID form wpcf7-f564-o1 red.

    If your form has the same ID, but you want it to look different on the home page, you can use the same logic, but instead of specifying the form ID, you can specify the .home class thats in the <body> tag, i.e.:

    .home input { color: red; }

    Thread Starter OliverCourt23

    (@olivercourt23)

    Thanks David!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Creating two contact forms with different CSS styles?!’ is closed to new replies.