Währungssymbol vor einem einzelnen Feld anzeigen

Einleitung

Möchten Sie ein Währungssymbol vor einem Einzelposten-Zahlungsfeld einfügen? Standardmäßig gibt es kein Währungssymbol anzuzeigen, wenn Sie dieses Feld verwenden und der Artikeltyp auf Benutzerdefiniert gesetzt ist.

In diesem Tutorial zeigen wir Ihnen jedoch, wie Sie dies mit einem kleinen Skript erreichen können.

Erstellen Ihres Formulars

Erstellen Sie zunächst ein neues Formular und fügen Sie Ihre Felder hinzu.

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte diese nützliche Dokumentation.

Festlegen des Artikeltyps

Nachdem Sie Ihre anderen Felder zu Ihrem Formular hinzugefügt haben, fügen Sie das Formularfeld Einzelposten hinzu, das sich im Formulargenerator unter Zahlungsfelder befindet. Setzen Sie nach dem Hinzufügen den Artikeltyp auf Benutzerdefiniert.

Hinzufügen des Snippets

Nun, da die Felder eingerichtet sind, ist es an der Zeit, den Snippet zu Ihrer Website hinzuzufügen. Wenn Sie Hilfe benötigen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial.

/**
 * Set a currency symbol in the Single Item payment field
 *
 * @link https://wpforms.com/developers/how-to-set-a-currency-symbol-before-a-single-item-field/
 */

function wpf_add_dollar_symbol_to_singleitem() {
    ?>
    <script>
      document.addEventListener( 'DOMContentLoaded', function() {
		  
		// Look for the form ID 3382 and the field ID 17
        var inputElement = document.querySelector( '#wpforms-3382-field_17' );
		  
		// Add left padding to create space for the dollar symbol
        inputElement.style.paddingLeft = '1em'; 
		  
		// Set background position
        inputElement.style.backgroundPosition = 'left center'; 
		  
		// Set background repeat
        inputElement.style.backgroundRepeat = 'no-repeat'; 
        
		// Define the desired padding size
        var paddingSize = '5px'; 
		  
		// dollar symbol svg
        var backgroundImage = 'url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'14\' height=\'14\' viewBox=\'0 0 12 12\'%3E%3Ctext x=\'' + paddingSize + '\' y=\'10\' font-size=\'14\' fill=\'%23000\'%3E%24%3C/text%3E%3C/svg%3E")';
		  
		// Set background image with the dollar symbol and padding
        inputElement.style.backgroundImage = backgroundImage; 
		  
      });
    </script>
    <?php
    }
    add_action('wpforms_wp_footer_end', 'wpf_add_dollar_symbol_to_singleitem', 30);

Dieses Skript sucht nach der Formular-ID 3382 und der Feld-ID 17 und platziert sowie formatiert ein SVG-Symbol für das Dollarzeichen ($) am Anfang des Feldes. Die CSS-Stile, die in diesem Skript angewendet werden, sind einfach anzupassen und nach Ihren Vorgaben zu ändern. Um mehr über SVG-Bilder zu erfahren, lesen Sie bitte die W3C-Dokumentation.

Wenn wir uns nun das Formular ansehen, können wir das Währungssymbol im Feld sehen.

Und das ist alles, was Sie brauchen, um ein Währungssymbol für ein Einzelposten-Zahlungsfeld festzulegen. Möchten Sie einen Mindestbetrag für ein Einzelposten-Zahlungsfeld festlegen? Schauen Sie sich das Tutorial So legen Sie den Mindestbetrag für ein Preisfeld fest an.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end