Das WordPress-Theme „Neve“ verwendet in einer Demo auf der Elementor-Landing-Page „WPForms“ für das Kontaktformular. Ein solches Formular wollte ich mir auch auf die Startseite legen, allerdings klappte das mit CF7 nicht auf Anhieb. Das sorglose Einbinden von CF7 auf einer Elementor-Seite funktioniert leider, im Gegensatz zu dem Theme „Astra“, nicht direkt, aber es ist möglich.
Das Ergebnis sind 4 Blöcke, jeweils zwei nebeneinander, sowie ein großes Textfeld zur Texteingabe, im Design des restlichen Themes:
Der erste Kniff: Das Kontaktformular selbst muss bei den Formularen ohne Absätze eingegeben werden, denn diese werden sonst zu <p> umgewandelt. Wie auch in der Neve-Demo umgeben wir die Input-Felder mit Fieldsets, an denen auch die Abstände eingestellt werden. Das File-Input-Feld umgeben wir mit einem Div, sodass wir den Rahmen die Erscheinung wie auf den anderen Feldern festlegen können.
Das Formular:
<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>Das Formular wird in Elementor ganz einfach per Shortcode eingebunden.
Per CSS im WordPress-Customizer werden die Eingabefelder-Hintergründe auf weiß gestellt sowie die Ausrichtung eingestellt. Das div bekommt das selbe Aussehen wie die anderen Eingabefelder.
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;
}Viel mehr war’s auch nicht. Daher sollte man an dieser Stelle auch erwähnen, dass dies lediglich eine gute Lösung „nachgebaut“ wurde.