{"id":15434,"date":"2020-05-08T19:39:13","date_gmt":"2020-05-08T19:39:13","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/so-senden-sie-ein-formular-ohne-seitenaktualisierung-in-wordpress\/"},"modified":"2020-05-08T19:39:13","modified_gmt":"2020-05-08T19:39:13","slug":"so-senden-sie-ein-formular-ohne-seitenaktualisierung-in-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/so-senden-sie-ein-formular-ohne-seitenaktualisierung-in-wordpress\/","title":{"rendered":"So senden Sie ein Formular ohne Seitenaktualisierung in WordPress"},"content":{"rendered":"<p>M\u00f6chten Sie verhindern, dass Ihre Seite aktualisiert wird, wenn ein Besucher ein Formular sendet? Standardm\u00e4\u00dfig wird die gesamte Seite neu geladen, indem Sie im Formular auf die Schaltfl\u00e4che &quot;Senden&quot; klicken. Dann werden die im Formular eingegebenen Daten \u00fcbertragen und auf dem Server gespeichert.<\/p>\n<p>In diesem Artikel zeigen wir Ihnen, wie Sie die Ajax-\u00dcbermittlung in Ihren WordPress-Formularen aktivieren und verhindern, dass die Seite neu geladen wird.<\/p>\n<h3>Warum Ajax-Formular\u00fcbermittlung in WordPress aktivieren?<\/h3>\n<p>Das Senden des Ajax-Formulars ist besonders n\u00fctzlich, wenn Sie ein Formular in ein modales Popup einbetten m\u00f6chten. Ohne aktivierte AJAX-Formular\u00fcbermittlung m\u00fcsste die gesamte Seite aktualisiert werden, was zum Schlie\u00dfen des Popups f\u00fchren w\u00fcrde. Auf diese Weise k\u00f6nnen Benutzer die wichtige Best\u00e4tigungsnachricht verpassen, die sie besch\u00e4ftigt.<\/p>\n<p>Wenn die AJAX-Formular\u00fcbermittlung aktiviert ist, k\u00f6nnen Ihre Benutzer die Best\u00e4tigungsmeldung sehen, wenn sie das Formular auf derselben Seite senden, ohne es erneut laden zu m\u00fcssen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/Como-enviar-un-formulario-sin-actualizacion-de-pagina-en-WordPress.gif\" alt=\"Ajax-Formular\u00fcbermittlungen\" width=\"558\" height=\"376\" class=\"alignnone size-full wp-image-234954\"><\/p>\n<p>Um das Senden von Ajax-Formularen auf Ihrer WordPress-Site zu erm\u00f6glichen, empfehlen wir WPForms, das beste Formular-Plugin f\u00fcr WordPress. <\/p>\n<h3>Schritt 1: Erstellen Sie ein neues Formular<\/h3>\n<p>    Um mit der Erstellung Ihres Formulars zu beginnen, m\u00fcssen Sie zuerst das WPForms-Plugin auf Ihrer WordPress-Website installieren.<\/p>\n<p>Nicht sicher wie? Kein Problem. In unserer Anleitung erfahren Sie, wie Sie ein WordPress-Plugin installieren, um das Problem zu beheben.<\/p>\n<p>Sobald das Plugin installiert und aktiviert ist, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu <strong>WPForms \u00bbNeu hinzuf\u00fcgen<\/strong>. Sie werden nun zu einer Seite weitergeleitet, auf der Sie eine Vorlage f\u00fcr Ihr Formular ausw\u00e4hlen k\u00f6nnen.<\/p>\n<p>WPForms bietet 7 verschiedene Formularvorlagen zur Auswahl. Lassen Sie uns die ausw\u00e4hlen <strong>Einfaches Kontaktformular<\/strong> Option f\u00fcr dieses Tutorial und f\u00fcgen Sie dem Formular ein Feld zum Hochladen von Dateien hinzu.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/Como-enviar-un-formulario-sin-actualizacion-de-pagina-en-WordPress.png\" alt=\"WPForms Formulareinstellungen\" width=\"740\" height=\"425\" class=\"alignnone size-full wp-image-221013\"><\/p>\n<p>Sie sehen nun den Form Builder auf Ihrem Bildschirm. Auf der linken Seite Ihres Bildschirms haben Sie die <strong>Felder hinzuf\u00fcgen<\/strong> und der <strong>Feldoptionen<\/strong> Zunge. Auf diesen Registerkarten k\u00f6nnen Sie Ihr Kontaktformular konfigurieren.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/1588837927_683_Como-enviar-un-formulario-sin-actualizacion-de-pagina-en-WordPress.jpg\" alt=\"entferne ein Feld aus wpforms\" width=\"740\" height=\"513\" class=\"alignnone size-full wp-image-234822\"><\/p>\n<p>Mit WPForms k\u00f6nnen Sie Ihrem Formular ganz einfach per Drag &amp; Drop Felder hinzuf\u00fcgen. Sie k\u00f6nnen die Position der Felder auch durch Ziehen und Ablegen \u00e4ndern. Wenn Sie ein Feld l\u00f6schen m\u00f6chten, ist das auch einfach. Bewegen Sie den Mauszeiger einfach \u00fcber das unerw\u00fcnschte Feld und klicken Sie auf <strong>L\u00f6schen<\/strong> Symbol, das in der oberen rechten Ecke des Feldes angezeigt wird.<\/p>\n<p>Unter dem <strong>Feldoptionen<\/strong> Auf der Registerkarte k\u00f6nnen Sie die Feldbezeichnung \u00e4ndern, das Format des Namensfelds \u00e4ndern, die Schriftgr\u00f6\u00dfe \u00e4ndern und Beschriftungen und Untertags aktivieren oder deaktivieren. Sie haben auch die M\u00f6glichkeit, das zu aktivieren <strong>bedingte Logik<\/strong> Option. <\/p>\n<p>Wenn Sie mit dem Formularersteller Ihr Formular erstellt haben, klicken Sie auf <strong>speichern<\/strong> Schaltfl\u00e4che, damit Ihre \u00c4nderungen erhalten bleiben.<\/p>\n<p>Nachdem wir ein einfaches Kontaktformular erstellt haben, f\u00fcgen wir die Funktion zum Hochladen von Dateien hinzu.<\/p>\n<p>Um eine Datei-Upload-Funktion hinzuzuf\u00fcgen, m\u00fcssen Sie nur auf das Feld Datei-Upload im linken Bereich klicken. Alternativ k\u00f6nnen Sie das Formularfeld Datei hochladen ziehen und an Ihrer bevorzugten Position im Formular-Generator ablegen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/1588837928_65_Como-enviar-un-formulario-sin-actualizacion-de-pagina-en-WordPress.gif\" alt=\"Formular zum Hochladen von Dateien\" width=\"838\" height=\"528\" class=\"alignnone size-full wp-image-221018\"><\/p>\n<h3>Schritt 3: Aktivieren Sie die Ajax-Formular\u00fcbermittlung<\/h3>\n<p>Sobald die \u00c4nderungen gespeichert sind, klicken Sie auf <strong>Konfigurationen<\/strong> Registerkarte auf der linken Seite des Seitengenerators. Hier sehen Sie mehrere Optionen. Gehe zum <strong>Allgemeines<\/strong> Option. Darunter sehen Sie eine Reihe von Feldern. Hier k\u00f6nnen Sie den Namen Ihres Formulars \u00e4ndern, eine Beschreibung des Formulars hinzuf\u00fcgen, den Schaltfl\u00e4chentext \u00e4ndern usw.<\/p>\n<p>Wenn Sie auf dem Bildschirm nach unten scrollen, werden einige Kontrollk\u00e4stchen angezeigt. Sie k\u00f6nnen das Kontrollk\u00e4stchen aktivieren, das besagt <strong>Aktivieren Sie die \u00dcbermittlung des Ajax-Formulars<\/strong>. Schlie\u00dfen Sie den Vorgang ab, indem Sie auf klicken <strong>Speichern<\/strong> Schaltfl\u00e4che in der oberen rechten Ecke Ihres Bildschirms.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/1588837930_56_Como-enviar-un-formulario-sin-actualizacion-de-pagina-en-WordPress.jpg\" alt=\"Aktivieren Sie das Senden des Ajax-Formulars\" width=\"740\" height=\"472\" class=\"alignnone size-full wp-image-234961\"><\/p>\n<p>Jetzt geh zu <strong>Benachrichtigung<\/strong> Registerkarte unter dem <strong>Allgemeines<\/strong> Zunge. Diese Option benachrichtigt Sie jedes Mal, wenn jemand Ihr Formular sendet. Geben Sie also im ersten Feld die E-Mail-Adresse des Administrators oder desjenigen ein, der f\u00fcr den Empfang der E-Mails verantwortlich ist. Sie k\u00f6nnen auch den Betreff der E-Mail, den Namen des Absenders, die Adresse des Empf\u00e4ngers und Ihre eigene Nachricht eingeben. <\/p>\n<p>Speichern Sie anschlie\u00dfend Ihre \u00c4nderungen. Sie k\u00f6nnen auch eine Best\u00e4tigungsnachricht konfigurieren, die Besucher nach dem Klicken auf die Schaltfl\u00e4che Senden erhalten.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/1588837930_927_Como-enviar-un-formulario-sin-actualizacion-de-pagina-en-WordPress.png\" alt=\"Best\u00e4tigungseinstellungen f\u00fcr das Hochladen von Dateien\" width=\"740\" height=\"390\" class=\"alignnone size-full wp-image-221016\"><\/p>\n<h3>Schritt 4: Ver\u00f6ffentlichen Sie Ihr Formular mit Ajax-\u00dcbermittlung<\/h3>\n<p>Der letzte Schritt besteht darin, Ihr Ajax-f\u00e4higes \u00dcbermittlungsformular auf Ihrer Website zu ver\u00f6ffentlichen. Gehen Sie dazu zu der Seite, auf der das Formular angezeigt werden soll. <\/p>\n<p>Sie k\u00f6nnen beginnen, indem Sie zu gehen <strong>Seiten \u00bbNeu hinzuf\u00fcgen<\/strong> in Ihrem WordPress-Dashboard. F\u00fcgen Sie nun Ihrer Seite einen Titel hinzu. Klicken Sie im Texteditor Ihrer Seite auf <strong>Formular hinzuf\u00fcgen<\/strong> Option. Auf Ihrem Bildschirm wird ein neues Fenster angezeigt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/1588837931_19_Como-enviar-un-formulario-sin-actualizacion-de-pagina-en-WordPress.gif\" alt=\"wpforms Formular einf\u00fcgen\" width=\"614\" height=\"470\" class=\"alignnone size-full wp-image-219787\"><\/p>\n<p>Klicken Sie auf den Dropdown-Pfeil und w\u00e4hlen Sie das gerade erstellte Formular aus. Klicken Sie nun auf die <strong>Formular hinzuf\u00fcgen<\/strong> Taste. Sie werden sehen, dass der Einbettungscode im Texteditor Ihrer Seite angezeigt wird. Sie k\u00f6nnen \u00fcberpr\u00fcfen, wie das Formular aussieht, indem Sie auf klicken <strong>Voraus<\/strong> Schaltfl\u00e4che auf der rechten Seite Ihres Bildschirms.<\/p>\n<p>Dann k\u00f6nnen Sie auf klicken <strong>Zu posten<\/strong> Schaltfl\u00e4che, um das Formular endg\u00fcltig zu aktivieren.<\/p>\n<p>Das war einfach, nicht wahr? <\/p>\n<p>M\u00f6glicherweise m\u00f6chten Sie jetzt die Anzahl der Klicks verfolgen, die Ihr Kontaktformular erh\u00e4lt. Lesen Sie dazu unseren Leitfaden zum Verfolgen von Links und Schaltfl\u00e4chenklicks. <\/p>\n   ","protected":false},"excerpt":{"rendered":"<p>M\u00f6chten Sie verhindern, dass Ihre Seite aktualisiert wird, wenn ein Besucher ein Formular sendet? Standardm\u00e4\u00dfig wird die gesamte Seite neu geladen, indem Sie im Formular auf die Schaltfl\u00e4che &quot;Senden&quot; klicken. Dann werden die im Formular eingegebenen Daten \u00fcbertragen und auf dem Server gespeichert. In diesem Artikel zeigen wir Ihnen, wie Sie die Ajax-\u00dcbermittlung in Ihren [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":15435,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/Como-enviar-un-formulario-sin-actualizacion-de-pagina-en-WordPress.jpg","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/15434"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=15434"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/15434\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/15435"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=15434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=15434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=15434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}