Styled Contact Form 7 CSS

styled_cf7.html

<!-- Contact Form 7 Markup -->
<h4> About You </h4>
<div class="c-grid">
<div>
<label> Name*
    [text* your-name akismet:author autocomplete:name] </label>
</div>
<div>
<label> Email*
    [email* your-email akismet:author_email autocomplete:email] </label>
</div>
</div>
<div>
<h4> Your Address </h4>
<div class="c-grid c-grid--three">
<div>
<label> Address Street*
    [text* addone] </label>
</div>
<div>
<label> Address Street Two*
    [text* addtwo] </label>
</div>
<div>
<label> Address Suburb*
    [text* addthree] </label>
</div>
</div>
<div class="c-grid">
<div>
<label> ZIP*
    [text* zip] </label>
</div>
<div>
<label> City*
    [text* city] </label>
</div>
</div>
<h4> What's on your mind </h4>
<label> Subject*
    [text* your-subject] </label>

<label> Message
    [textarea your-message] </label>

<h4> Other </h4>
<label> Do you need extra help? </label>
[radio radio use_label_element default:1 "I need transport" "I need a guide" "No, thanks"]



</div>
[submit "Submit"]

This form uses Akismet to reduce spam. <a target="_blank" rel="nofollow noopener" href="https://akismet.com/privacy/">Learn how your data is processed.</a>

<!-- Extra CSS -->
.c-grid {
			display: grid;
			grid-template-columns: 50% 50%;
			gap: 10px;
		}
		
		.c-grid--three {
			grid-template-columns: 33% 33% 33%;
		}
		
		.wpcf7-form label {
			color: black;
			text-transform: uppercase;
		}
		
		.wpcf7-form-control-wrap input,
    .wpcf7-form-control-wrap textarea {
			width: 100%;
		}
		
		.wpcf7-styled {
			padding: 25px;
			background: #fafafa;
			border-radius: 25px;
		}
		
		.wpcf7-styled .wpcf7-radio input[type="radio"] {
			display: none;
			opacity: 0;
		}
		
		.wpcf7-styled .wpcf7-radio input[type="radio"]:checked+span {	
			background: #c3c3c3;
			color: white;
		}
		
		.wpcf7-styled .wpcf7-radio label span {
			padding: 5px;
			border: 1px solid black;
			cursor: pointer;
			z-index: 90;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			border-radius: 5px;
			color: black;
			text-transform: uppercase;
			min-width: 100%;
		}
		
		.wpcf7-styled .wpcf7-form-control.wpcf7-radio {
			width: 100% !important;
			display: grid;
			grid-template-columns: auto auto auto;
			padding: 0 !important;
		}
		
		.wpcf7-styled h4 {
			margin-top: 35px;
			margin-bottom: 35px !important;
			border-bottom: 1px solid grey;
			padding-bottom: 25px;
		}
		
		.wpcf7-submit {
			font-weight: bold;
			text-transform: uppercase;
		}
		
		.wpcf7-styled .wpcf7-submit {
			background: #c3c3c3;
			color: white;
			margin-top: 25px;
			width: 100%;
			border-width: 1px;
			color: black;
		}