Mit Hilfe dieser Vorlage ist es auf einfache Art möglich, Kontaktformulare, die über das Plugin Contact Form 7 erzeugt wurden, schöner zu gestalten.

Contact Form 7 - CF7 Styling-Vorlage.scss

:root {
	--button-background-color: #000;
	--button-border-radius: 0;
	--button-border: 2px solid #000;
	--button-box-shadow: none;
	--button-color: #fff;
	--button-font-family: inherit;
	--button-font-size: 1.2rem;
	--button-font-weight: 400;
	--button-hover-background-color: transparent;
	--button-hover-border-radius: 0;
	--button-hover-border: 2px solid #000;
	--button-hover-box-shadow: none;
	--button-hover-color: #000;
	--button-hover-padding: 5px 20px;
	--button-letter-spacing: 1px;
	--button-margin-top: 1rem;
	--button-padding: 5px 20px;
	--button-text-transform: uppercase;
	--button-transition-duration: 300ms;
	--checkbox-gap: 2px 20px;
	--form-color: #000;
	--input-background: transparent;
	--input-border: 2px solid #000;
	--input-border-radius: 0;
	--input-box-shadow: none;
	--input-color: #000;
	--input-focus-background: transparent;
	--input-focus-border: 2px solid #000;
	--input-focus-border-radius: 0;
	--input-focus-box-shadow: none;
	--input-focus-color: #000;
	--input-font-family: inherit;
	--input-font-size: 1rem;
	--input-padding: 10px;
	--input-placeholder-color: #333;
	--input-placeholder-opacity: 0.8;
	--label-color: #000;
	--link-color: #00f;
}

/* Stop touching the code!!! */
/* #region Button Design */
%pretty-button {
	background-color: var(--button-background-color);
	border-radius: var(--button-border-radius);
	border: var(--button-border);
	box-shadow: var(--button-box-shadow);
	cursor: pointer;
	color: var(--button-color);
	font-family: var(--button-font-family);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	letter-spacing: var(--button-letter-spacing);
	margin-top: var(--button-margin-top);
	padding: var(--button-padding);
	text-transform: var(--button-text-transform);
	transition: all var(--button-transition-duration) ease;
	&:hover {
		background-color: var(--button-hover-background-color);
		border-radius: var(--button-hover-border-radius, var(--button-border-radius));
		border: var(--button-hover-border, var(--button-border));
		box-shadow: var(--button-hover-box-shadow, var(--button-box-shadow));
		color: var(--button-hover-color, var(--button-color));
		padding: var(--button-hover-padding, var(--button-padding));
	}
}
/* #endregion Button Design */
/* #region Placeholder Pseudo Class */
%placeholder {
	&::-webkit-input-placeholder { // Chrome/Opera/Safari
		color: var(--input-placeholder-color);
		opacity: var(--input-placeholder-opacity);
	}
	&::-moz-placeholder { // Firefox 19+
		color: var(--input-placeholder-color);
		opacity: var(--input-placeholder-opacity);
	}
	&:-ms-input-placeholder { // IE 10+
		color: var(--input-placeholder-color);
		opacity: var(--input-placeholder-opacity);
	}
	&:-moz-placeholder { // Firefox 18-
		color: var(--input-placeholder-color);
		opacity: var(--input-placeholder-opacity);
	}
}
/* #endregion */

form.wpcf7-form {
	color: var(--form-color);
	input[type="email"], input[type="text"], input[type="tel"], input[type="password"], textarea {
		@extend %placeholder;
		background: var(--input-background);
		border: var(--input-border);
		border-radius: var(--input-border-radius);
		box-shadow: var(--input-box-shadow);
		color: var(--input-color);
		font-family: var(--input-font-family);
		font-size: var(--input-font-size);
		padding: var(--input-padding);
		width: 100%;
		&:focus {
			background: var(--input-focus-background, var(--input-background));
			border: var(--input-focus-border, var(--input-border));
			border-radius: var(--input-focus-border-radius, var(--input-border-radius));
			box-shadow: var(--input-focus-box-shadow, var(--input-box-shadow));
			color: var(--input-focus-color, var(--input-color))
		}
	}
	a {
		color: var(--link-color);
	}
	input.wpcf7-submit {
		@extend %pretty-button;
	}
	label {
		color: var(--label-color);
	}
	.wpcf7-checkbox {
		display: flex;
		flex-flow: row wrap;
		gap: var(--checkbox-gap);
		> .wpcf7-list-item {
			margin-left: 0;
		}
	}
	.dscf7 .wpcf7-checkbox {
		display: inline-block;
	}
}