Contact Form 7 in Neve Theme with Elementor

The WordPress theme “Neve” used in a demo on the Elementor landing page uses “WPForms” for the contact form. I wanted to put such a form on the start page, but with CF7 it didn’t work right away. The careless integration of CF7 on an Elementor page unfortunately doesn’t work directly, in contrast to the theme “Astra”, but it is possible.

The result are 4 blocks, each two next to each other, as well as a large text field for text input, in the design of the remaining theme:

The first trick: The contact form itself must be entered in the forms without paragraphs, otherwise they will be converted to <p>. As in the Neve demo, we surround the input fields with fieldsets, at which the distances are also set. We surround the file input field with a <div> so that we can set the frame to appear as on the other fields.

The contact Form:

<fieldset class="content-form-field-text elementor-column elementor-col-50">[text* your-name placeholder "Dein Name (Pflichtfeld)"]</fieldset><fieldset class="content-form-field-email elementor-column elementor-col-50">[email* your-email placeholder "Deine E-Mail-Adresse (Pflichtfeld)"]</fieldset><fieldset class="content-form-field-text elementor-column elementor-col-50">[text your-subject placeholder "Betreff"]</fieldset><fieldset class="content-form-field-text elementor-column elementor-col-50"><div class="cf7-file">Datei: [file your-file limit:5000000]</div></fieldset>
<fieldset class="content-form-field-textarea elementor-column elementor-col-100">[textarea your-message placeholder "Deine Nachricht"]</fieldset>
<fieldset class="submit-form contact">[submit "Senden"]</fieldset>

The form will be linked by using the shortcode.

Using CSS in the WordPress Customizer, the input field backgrounds are set to white and the alignment is set. The div gets the same appearance as the other input fields.

textarea.wpcf7-textarea {
	background: #ffffff;
}

input[type="text"],
input[type="email"] {
	background: #ffffff;
	width: 100%;
	text-align: center;
}

fieldset {
	margin: 0;
	padding: 8px;
}

.wpcf7-form {
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

span.wpcf7-form-control-wrap {
	width: 100%;
}

div.cf7-file {
	background: #ffffff;
	width: 100%;
	text-align: center;
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 3px;
}

That’s it. I hope this post may help people facing the same needs. So it’s time to admit that this is only a remake of an already awesome form in the neve theme demo – nothing new or fancy.