Menambahkan Password Visibility Toggle Fluent Forms

Rating Jasa Pembuatan Website Rio Mastri

Baris JavaScript dan CSS ini berfungsi untuk menambahkan password visibility toggle pada field “Password” Fluent Forms. Dengan begitu, pengguna bisa melihat dan menyembunyikan kata sandi yang akan dibuat.

Taruh skrip ini pada JS/CSS Editor milik Fluent Forms.

Apabila Anda memilih untuk menggunakan WordPress Dashicons, silakan ganti string menjadi dashicons.

Password Visibility Toggle JavaScript

Berikut adalah kode JS untuk Password visibility toggle Fluent Forms.

JavaScript
(function() {
  'use strict';
  
  const FORM_SELECTOR = 'form.fluent_form_4';//Sesuaikan "4" dengan form ID Anda
  let passIdCounter = 0;

  function enhancePasswordField(input) {
    if (input.dataset.ffEnhanced) return;

    // Pastikan ID memang ada
    if (!input.id) input.id = `ff-pass-${++passIdCounter}`;

    // Membuat wrapper jika tidak ada
    if (!input.closest('.ff-password-wrap')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'ff-password-wrap';
      input.parentNode.insertBefore(wrapper, input);
      wrapper.appendChild(input);
    }

    const wrapper = input.closest('.ff-password-wrap');
    
    // Membuat toggle button
    const toggleBtn = document.createElement('button');
    Object.assign(toggleBtn, {
      type: 'button',
      className: 'ff-toggle-pass',
      textContent: 'Lihat'
    });
    toggleBtn.setAttribute('aria-label', 'Lihat kata sandi');
    toggleBtn.setAttribute('aria-controls', input.id);
    toggleBtn.setAttribute('aria-pressed', 'false');

    wrapper.appendChild(toggleBtn);

    // Toggle functionality
    toggleBtn.addEventListener('click', (e) => {
      e.preventDefault();
      
      // Posisi cursor
      const { selectionStart, selectionEnd } = input;
      
      // Toggle type
      const newType = input.type === 'password' ? 'text' : 'password';
      input.type = newType;
      
      // Kembalikan posisi cursor
      if (typeof selectionStart === 'number') {
        setTimeout(() => {
          try { input.setSelectionRange(selectionStart, selectionEnd); } catch(e) {}
        });
      }

      // Ck state setelah toggle
      const isNowVisible = input.type === 'text';
      
      toggleBtn.setAttribute('aria-pressed', String(isNowVisible));
      
      if (isNowVisible) {
        // Password sedang ditampilkan
        toggleBtn.setAttribute('aria-label', 'Sembunyikan kata sandi');
        toggleBtn.textContent = 'Sembunyikan';
      } else {
        // Password sedang disembunyikan
        toggleBtn.setAttribute('aria-label', 'Lihat kata sandi');  
        toggleBtn.textContent = 'Lihat';
      }
    });

    input.dataset.ffEnhanced = 'true';
  }

  function enhanceAll() {
    const form = document.querySelector(FORM_SELECTOR);
    if (!form) return;
    
    form.querySelectorAll('input[type="password"]:not([data-ff-enhanced])').forEach(enhancePasswordField);
  }

  // Initialize
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', enhanceAll);
  } else {
    enhanceAll();
  }

  // Handle dynamic content
  const form = document.querySelector(FORM_SELECTOR);
  if (form && window.MutationObserver) {
    new MutationObserver(enhanceAll).observe(form, { childList: true, subtree: true });
  }

})();

Kode CSS untuk Password Field Fluent Forms

Kode CSS berikut tidak bersifat absolut. Dalam arti lain, Anda bisa menyesuaikan dengan selera Anda masing-masing.

CSS
.fluent_form_4 .ff-password-wrap {
  position: relative;
}

.fluent_form_4 .ff-password-wrap .ff-toggle-pass {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  
  background: none;
  border: 1px solid transparent;
  padding: 4px 8px;
  cursor: pointer;
  
  font: inherit;
  font-size: 0.875rem;
  color: #6b7280;
  border-radius: 4px;
  
  transition: all 0.15s ease;
}

.fluent_form_4 .ff-password-wrap .ff-toggle-pass:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.05);
}

.fluent_form_4 .ff-password-wrap .ff-toggle-pass:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Tambahkan padding ke input untuk mencegah overlap */
.fluent_form_4 .ff-password-wrap input {
  padding-right: 80px !important;
}

/* Screen reader only */
.fluent_form_4 .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}