Ausfüllen eines Formularfelds über einen Ankerlink

Möchten Sie Formularfelder automatisch ausfüllen, wenn Benutzer auf Links auf Ihrer Seite klicken? Mithilfe von Ankerlinks und JavaScript können Sie Formularfelder mit vordefiniertem Text füllen, wenn Besucher auf bestimmte Links klicken.

Diese Anleitung zeigt Ihnen, wie Sie diese dynamische Formularbefüllung implementieren.

Das Konzept verstehen

Wenn ein Benutzer auf einen Ankerlink (wie #täglich oder #wöchentlich) klickt, erfassen wir diese Interaktion und füllen automatisch ein Formularfeld mit entsprechendem Text. Dies ist nützlich für:

• Formulare zur Dienstleistungsauswahl
• Formulare für Produktanfragen
• Formulare für Supportanfragen
• Kontaktformulare mit vordefinierten Betreffzeilen

Einrichtung Ihres Formulars

Zuerst erstellen wir unser Formular. Es ist ein einfaches Formular mit Feldern für Name, E-Mail-Adresse, Betreff (einzeiliger Text) und Nachricht (Absatztext).

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie unsere Anleitung zum Erstellen Ihres ersten Formulars.

Notieren Sie sich als Nächstes die ID-Nummern Ihres Formulars und Ihrer Felder. Sie benötigen sie für den Code-Schnipsel. Wenn Sie nicht sicher sind, wie Sie diese IDs finden, lesen Sie unsere Anleitung zum Finden von Formular- und Feld-IDs.

Einrichten der Formularbenachrichtigungen

In diesem Schritt lassen wir unser Feld Betreff automatisch das Feld Betreff im Tab Benachrichtigungen des Formular-Builders ausfüllen.

Gehen Sie einfach zum Tab Benachrichtigungen und geben Sie im Feld Betreff den gewünschten Text zusammen mit der Feld-ID ein, genau wie Sie Smart Tags anderswo im Formular-Builder verwenden.

In unserem Beispiel ist unsere Feld-ID 3, daher lautet unsere Betreffzeile: „Ich interessiere mich für {field_id="3"} Reinigung für mein Unternehmen“.

Erstellen von Ankerlinks

Als Nächstes erstellen wir eine neue Seite auf unserer Website mit Ankerlinks und dem gerade erstellten Formular.

Wenn Sie Hilfe beim Verstehen oder Erstellen von Ankerlinks benötigen, sehen Sie sich dieses Tutorial von WPBeginner an.

Um Ankerlinks zu erstellen, tippen Sie einfach Ihren Seiteninhalt ein und verwenden Sie Überschriften in WordPress. Im Block-Editor wählen Sie eine Überschrift, gehen zum Tab „Erweitert“ und fügen den Text hinzu, den Sie für den Ankerlink verwenden möchten. WordPress empfiehlt, ihn kurz zu halten, ohne Leerzeichen oder Bindestriche für mehrere Wörter zu verwenden. Zum Beispiel „ueber-uns“ für einen „Über uns“-Bereich.

Für unser Tutorial werden wir Abschnitte für Täglich, Wöchentlich, Monatlich und Vierteljährlich haben.

Für jede Überschrift fügen wir einen einwortigen Ankerlink ein. Zum Beispiel wird der Abschnitt „Täglich“ den Ankerlink täglich haben.

Sobald wir die Ankerlinks hinzugefügt haben, wählen wir Text im Inhalt aus, der beim Klicken zu jedem Abschnitt springt und das Feld Betreff unseres Formulars ausfüllt.

Um Text mit den Ankerlinks zu verknüpfen, fügen wir wie gewohnt einen Link in WordPress hinzu. Wählen Sie den Text aus, klicken Sie auf das Kettensymbol und fügen Sie anstelle einer vollständigen URL ein Pfundzeichen und dann das Ankerlink-Wort ein. Zum Beispiel #täglich.

WordPress weist jedem Link automatisch eine eindeutige data-id zu, die auf dem Linknamen basiert. So hat #daily eine data-id von #daily.

Wir werden dasselbe für die Abschnitte #weekly, #monthly und #quarterly unserer Seite tun.

Das Formular mit dem Ankerlink-Text füllen

Jetzt ist es an der Zeit, den Snippet hinzuzufügen, der alles zusammenbringt. Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, sehen Sie sich bitte dieses Tutorial an.

Und das ist alles! Wussten Sie, dass Sie etwas sehr Ähnliches direkt im Formular selbst tun können? Sehen Sie sich unser Tutorial „Wie man ein Inhaltsverzeichnis für lange Formulare hinzufügt“ an.

Referenzaktion

wpforms_wp_footer_end

Häufig gestellte Fragen

F: Kann ich auch einen CSS-Klassennamen oder eine ID verwenden?

A: Absolut! Wenn Sie JavaScript lieber über eine CSS-Klasse oder ID auslösen möchten, würden Sie das Skript einfach ändern. Wenn Ihre CSS-Klassennamen beispielsweise daily-link, weekly-link, monthly-link und quarterly-link wären, wäre der Snippet dieser.

/**
 * Populate field from anchor link.
 *
 * @link https://wpforms.com/developers/how-to-populate-a-form-field-from-an-anchor-link/
 */
 
function wpf_dev_autofill_field() {
?>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery( 'a.daily-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "daily cleaning";
        });  
        jQuery( 'a.weekly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "weekly cleaning";
        });  
        jQuery( 'a.monthly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "monthly cleaning";
        });  
        jQuery( 'a.quarterly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "quarterly cleaning";
        });  
    });
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofill_field', 10 );

Wenn Sie eine ID anstelle einer Klasse verwenden würden, ersetzen Sie einfach den Punkt durch ein Rautenzeichen in jedem der Links. Beispiel: a#daily-link.

Und das ist alles. Möchten Sie als Nächstes benutzerdefinierte Smart Tags erstellen? Sehen Sie sich unser Tutorial zum Erstellen benutzerdefinierter Smart Tags an, um weitere Details zu erfahren.