Jetformbuilder add icon to the form input field.

gistfile1.txt

Dont forget to change the form field to your fields.


function enqueue_icons_script_and_styles() {
    // Enqueue the Font Awesome stylesheet for the icons
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
    
    // Add inline styles
    $custom_css = "
        .input-icon {
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2em;
            z-index: 2;
        }

    ";
    wp_add_inline_style('font-awesome', $custom_css);
}
add_action('wp_enqueue_scripts', 'enqueue_icons_script_and_styles');

function add_icons_to_input_fields() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Append the eye icon to the password field
            var passField = $('input[name="YOUR FIELD NAME"]');
            passField.closest('.jet-form-builder__field-wrap').css('position', 'relative');
            passField.after('<i class="fas fa-eye-slash input-icon password-eye"></i>');

            // Append the user icon to the epost field
            var emailField = $('input[name="YOUR FIELD NAME"]');
            emailField.closest('.jet-form-builder__field-wrap').css('position', 'relative');
            emailField.before('<i class="fas fa-user input-icon email-icon"></i>'); // Changed to 'fas' for the free version

            // Toggle the password visibility
            $('.password-eye').on('click', function() {
                if (passField.attr('type') === 'password') {
                    passField.attr('type', 'text');
                    $(this).removeClass('fa-eye-slash').addClass('fa-eye');
                } else {
                    passField.attr('type', 'password');
                    $(this).removeClass('fa-eye').addClass('fa-eye-slash');
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_icons_to_input_fields');