{"id":372022,"date":"2023-04-17T18:39:00","date_gmt":"2023-04-17T15:39:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=372022"},"modified":"2023-04-17T18:39:03","modified_gmt":"2023-04-17T15:39:03","slug":"so-passen-sie-den-stil-ihres-kontaktformulars-7-an","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-passen-sie-den-stil-ihres-kontaktformulars-7-an\/","title":{"rendered":"So passen Sie den Stil Ihres Kontaktformulars 7 an"},"content":{"rendered":"\n

Das Kontaktformular ist ein sehr wichtiges Element jeder Website. Wir verwenden sie, um verschiedene Arten von Informationen zu sammeln und weiterzugeben, und m\u00fcssen daher darauf achten, dass sie genauso gut aussehen wie der Rest unserer Website<\/strong>. Ein zu schlichtes Kontaktformular mit einem Stil, der einfach nicht zur Seite zu geh\u00f6ren scheint, kann bei Ihren Benutzern kein Vertrauensgef\u00fchl wecken, und es w\u00e4re schade, Ihr Publikum gerade dann zu verlieren, wenn es es wollte einen Schritt weiter und hinterlassen einige ihrer Daten in Ihrem Kontaktformular.<\/p>\n

Eine sehr beliebte M\u00f6glichkeit, ein Kontaktformular zu erstellen, ist ein Contact Form 7-Plugin<\/a>, ein praktisches und einfach zu bedienendes Tool, das oft kostenlos in vielen WordPress-Themes enthalten ist und mit dem Sie ganz einfach alle Arten von Kontaktformularen erstellen k\u00f6nnen<\/strong>. Dieses Plugin deckt alle technischen Aspekte der Erstellung eines Kontaktformulars ab \u2013 um es zu gestalten, ben\u00f6tigen Sie zus\u00e4tzliche F\u00e4higkeiten oder ein anderes Plugin.<\/p>\n

In diesem Artikel zeigen wir Ihnen, wie einfach Sie Ihre Kontaktformulare mit einem kostenlosen Tool passend zu Ihrem Website-Design gestalten k\u00f6nnen<\/strong>.<\/p>\n

Bleiben Sie dran, um mehr zu erfahren \u00fcber:<\/p>\n

Verwenden von Qi-Addons f\u00fcr Elementor zum Stilisieren Ihrer Kontaktformulare<\/h2>\n

Qi Addons for Elementor<\/a> ist ein funktionsreiches Plugin, das mit 60 kostenlosen und \u00fcber 40 Premium-Widgets geliefert wird und ein Contact Form 7-Widget<\/a><\/strong> enth\u00e4lt, das speziell erstellt wurde, um Ihnen beim Stilisieren Ihrer Formulare zu helfen, und es ist kostenlos. Das Plugin erfordert keine Programmierkenntnisse<\/strong> und buchst\u00e4blich jeder kann es bequem verwenden. Es bietet Ihnen nicht die M\u00f6glichkeit, ein Kontaktformular zu erstellen, aber wenn Sie das Contact Form 7-Plugin verwenden, k\u00f6nnen Sie mit Qi Ihre Formulare so anpassen und neu gestalten, dass sie perfekt zu Ihrem Website-Stil passen.<\/p>\n

Qi Addons f\u00fcr Elementor ist einfach zu installieren<\/a><\/strong> und zu konfigurieren, und das Verfahren ist so ziemlich das gleiche wie f\u00fcr jedes andere Plugin.<\/p>\n

Gehen Sie nach der Installation zu der Seite, auf der sich das Kontaktformular befindet, das Sie gestalten m\u00f6chten, und bearbeiten Sie es in Elementor.<\/p>\n

\"So<\/a><\/p>\n

Geben Sie dann Contact Form 7 in das Suchfeld<\/strong> im linken Men\u00fc ein, um das Contact Form 7-Widget zu finden.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie es jetzt haben, klicken Sie darauf und bewegen Sie den Mauszeiger \u00fcber die Stelle, an der sich Ihr Kontaktformular befinden soll<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Das Formular, das Sie auf diese Weise hinzuf\u00fcgen, ist das Formular, das Sie mit dem Contact Form 7-Plugin erstellt haben. Dieses Widget dient nur dazu, Ihnen beim Gestalten des Formulars zu helfen. Sie k\u00f6nnen damit kein Formular erstellen<\/strong>. Jetzt haben Sie Ihr Kontaktformular dort platziert, wo Sie es haben wollten, und Sie k\u00f6nnen die Widget-Einstellungen von Contact Form 7 im linken Men\u00fc sehen.<\/p>\n

\"So<\/a><\/p>\n

Auf der ersten Registerkarte im Men\u00fc k\u00f6nnen Sie ausw\u00e4hlen, welche Art von Kontaktformular Sie auf der Seite haben m\u00f6chten<\/strong>. Wir k\u00f6nnen zwischen drei Optionen w\u00e4hlen \u2013 Kontaktformular 1, Newsletter und Kontaktieren Sie uns. Sie k\u00f6nnen nat\u00fcrlich jedes der Formulare ausw\u00e4hlen, die Sie zuvor f\u00fcr Ihre Website erstellt haben. Lassen Sie uns Ihnen nun zeigen, wie wir das Kontaktformular auf unserer Website angepasst haben.<\/p>\n

\"So<\/a><\/p>\n

Festlegen des Kontaktformularstils<\/h2>\n

Um die Optionen zum Gestalten des Formulars zu \u00f6ffnen, klicken Sie auf die Registerkarte Stil<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Die erste Option bezieht sich auf Etikettentypografie<\/strong>, wo Sie die Schriftart, die Schriftgr\u00f6\u00dfe, den Abstand zwischen den W\u00f6rtern des Etiketts, den Schriftstil und den Abstand zwischen den Buchstaben in W\u00f6rtern festlegen k\u00f6nnen, und das Tolle ist, dass Sie alle \u00c4nderungen sehen k\u00f6nnen Lebe sofort, damit du nichts blind tust<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Auf dem Bild unten k\u00f6nnen Sie genau sehen, wie sich unsere Entscheidungen auf die Etikettentypografie ausgewirkt haben.<\/p>\n

\"So<\/a><\/p>\n

Die n\u00e4chste Option bezieht sich auf die Etikettenfarbe<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Sie k\u00f6nnen je nach Bedarf Ihren eigenen Farbton erstellen. Wir w\u00e4hlen Dunkelblau f\u00fcr unser Etikett, da es gut zur Hintergrundfarbe der Seite passt.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie nun mit dem Beschriftungsstil fertig sind, beziehen sich die n\u00e4chsten Einstellungen auf den Eingabestil<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Sie haben auch hier \u00e4hnliche Optionen \u2013 Sie k\u00f6nnen den Schriftartstil, die Gr\u00f6\u00dfe und die Farbe der Eingabetypografie<\/strong> ausw\u00e4hlen. Sie k\u00f6nnen auch die Hintergrundfarbe des Eingabefelds festlegen,<\/strong> wenn Sie nicht m\u00f6chten, dass es wei\u00df ist, wie es standardm\u00e4\u00dfig ist. Au\u00dferdem finden Sie hier Einstellungen zum Anpassen des Rahmenstils der Eingabefelder<\/strong> und k\u00f6nnen zwischen durchgezogen, gestrichelt, gerillt, gepunktet, doppelt oder ohne w\u00e4hlen und f\u00fcr jede der Optionen weitere Anpassungen vornehmen.<\/p>\n

\"So<\/a><\/p>\n

Sie k\u00f6nnen auch bei aktiven Eingabefeldern unterschiedliche Stile einstellen<\/strong>. Alle gleichen Optionen stehen Ihnen zur Verf\u00fcgung, werden aber nur angewendet, wenn die Eingabefelder aktiv sind.<\/p>\n

\"So<\/a><\/p>\n

Die n\u00e4chsten Einstellungen beziehen sich auf den Checkbox-Stil<\/strong>. Dieses winzige Element ist in einem Kontaktformular sehr wichtig und sollte ordentlich und leicht zug\u00e4nglich aussehen, da dies der Schritt ist, in dem Sie Ihren Website-Benutzern eine Art Wahlm\u00f6glichkeit bieten.<\/p>\n

\"So<\/a><\/p>\n

Mit Qi lassen Sie dieses Element ganz einfach perfekt aussehen. Sie k\u00f6nnen die Eingabegr\u00f6\u00dfe des Kontrollk\u00e4stchens festlegen<\/strong>, Sie k\u00f6nnen mehr oder weniger Platz zwischen zwei Kontrollk\u00e4stchen sowie zwischen Kontrollk\u00e4stchen und anderen Eingabefeldern lassen<\/strong>. Auf dem Foto unten k\u00f6nnen Sie deutlich sehen, wie sich unsere Auswahl in diesem Fall auf das Kontaktformular auswirkt:<\/p>\n

\"So<\/a><\/p>\n

Die n\u00e4chsten Einstellungen, die Sie kennen sollten, sind die Schaltfl\u00e4chenstil-Einstellungen<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Sie k\u00f6nnen die Farbe des Schaltfl\u00e4chenhintergrunds \u00e4ndern und den Rahmen um die Schaltfl\u00e4che<\/strong> in einer anderen Farbe und einem anderen Stil festlegen (durchgehend, gestrichelt oder gepunktet). Sie k\u00f6nnen auch die Farbe des Textes in der Schaltfl\u00e4che \u00e4ndern,<\/strong> indem Sie die gew\u00fcnschte Farbe in der Option Schaltfl\u00e4chenfarbe ausw\u00e4hlen. Alle \u00c4nderungen sind sofort sichtbar, sodass Sie leicht nachvollziehen k\u00f6nnen, welche der Einstellungen sich auf welches Element des Kontaktformulars bezieht.<\/p>\n

Wenn Sie m\u00f6chten, dass sich der Stil der Schaltfl\u00e4che beim Hover \u00e4ndert, klicken Sie auf die Registerkarte Aktiv und passen Sie die Einstellungen an \u2013 Sie k\u00f6nnen die Hover-Farbe der Schaltfl\u00e4che, die Hover-Hintergrundfarbe der Schaltfl\u00e4che, die Hover-Rahmenfarbe der Schaltfl\u00e4che usw. anpassen.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie mit dem Aussehen des Kontaktformulars zufrieden sind, k\u00f6nnen Sie nun den Abstand anpassen, indem Sie die Einstellungen auf der Registerkarte<\/strong> Abstandsstil \u00f6ffnen. Hier k\u00f6nnen Sie den Abstand f\u00fcr jedes Element des Kontaktformulars anpassen.<\/p>\n

\"So<\/a><\/p>\n

Die globalen Stileinstellungen beziehen sich auf den Ausrichtungsstil des Kontaktformulars. Sie k\u00f6nnen zwischen linker, mittlerer und rechter Ausrichtung w\u00e4hlen.<\/p>\n

\"So<\/a><\/p>\n

Mit den Fehlerstileinstellungen k\u00f6nnen Sie den Stil der Fehlermeldung<\/strong> steuern, die angezeigt wird, wenn jemand nicht die richtigen Daten in das Formular eingibt. Sie k\u00f6nnen die Position, Typografie und Farbe der Fehlermeldung einfach festlegen.<\/p>\n

\"So<\/a><\/p>\n

Die Einstellungen<\/strong> f\u00fcr den Antwortstil erm\u00f6glichen Ihnen die Feinabstimmung der Details der Antworten, die in das Kontaktformular eingef\u00fcgt werden. Sie k\u00f6nnen die Schriftart, die Farbe der Schriftart, den Antwortabstand und den Antwortrand sowie den Rahmentyp festlegen.<\/p>\n

\"So<\/a><\/p>\n

So sieht unser Formular aus, nachdem jemand die Nachricht gesendet hat:<\/p>\n

\"So<\/a><\/p>\n

Und schon haben Sie ein elegantes Kontaktformular auf Ihrer Seite, das bereit ist, f\u00fcr Sie zu arbeiten.<\/p>\n