Auto-Fill Kolom Nama dan Email pada Contact Form 7 WordPress

Contact Form 7 (CF7) adalah salah satu plugin formulir kontak paling populer yang digunakan di WordPress. Dengan CF7, pengguna dapat dengan mudah membuat dan mengelola berbagai formulir kontak di situs web mereka.

Namun, ada kalanya kita ingin meningkatkan pengalaman pengguna dengan cara otomatis mengisi data seperti nama dan email pada formulir, terutama ketika pengguna sudah login ke situs.

Salah satu cara untuk melakukan ini adalah dengan menggunakan custom script yang akan mengisi otomatis kolom nama dan email berdasarkan informasi pengguna yang sudah login.

 

Fungsi Utama

Fungsi yang akan kita gunakan ini secara otomatis akan memeriksa apakah pengguna sudah login. Jika ya, maka skrip JavaScript yang dimuat setelah halaman selesai akan mencari kolom input untuk nama dan email pada formulir CF7. Ketika kolom-kolom ini ditemukan, skrip akan mengisi kolom tersebut dengan data pengguna yang sudah login, seperti nama dan alamat email, serta membuat kolom tersebut bersifat readonly (hanya bisa dibaca) untuk mencegah pengeditan oleh pengguna.

Keunggulan Pendekatan Ini

Pendekatan ini memiliki beberapa keuntungan utama:

1. Kemudahan Penggunaan: Pengguna tidak perlu lagi mengisi kolom nama dan email setiap kali mengisi formulir, yang bisa meningkatkan tingkat konversi formulir.
2. Tidak wajib login: Formulir ini tetap bisa dilihat, dan kolom masih bisa di isi, meskipun user belum login ke dalam situs. Ini memberikan fleksibilitas tersendiri, yang tidak mewajibkan visitor untuk login dahulu dalam menggunakan kontak form ini.
3. Mengurangi Kesalahan: Dengan mengisi otomatis, kesalahan seperti typo dalam penulisan alamat email dapat dihindari, yang dapat mempengaruhi respons komunikasi.

Tampilan

Bagi yang sudah login ke dalam situs, kolom nama dan email ini akan terisi sendiri sesuai informasi dari pengguna tersebut. Tampilan nya seperti pada gambar dibawah ini:

Namun untuk pengguna yang belum login, tampilan kolom nama dan email akan menjadi kosong, seperti pada gambar dibawah ini:

 

Script Kode

Script Banner

function cf7_auto_fill_user_fields() {
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        ?>
        <script type="text/javascript">
        window.addEventListener('load', function() {
            setTimeout(function() {
                var emailField = document.querySelector('input[name="your-email"]');
                if (emailField) {
                    emailField.value = '<?php echo esc_js( $current_user->user_email ); ?>';
                    emailField.setAttribute('readonly', true);
                    console.log('Email field set to: ' + emailField.value);
                }

                var nameField = document.querySelector('input[name="your-name"]');
                if (nameField) {
                    nameField.value = '<?php echo esc_js( $current_user->display_name ); ?>';
                    nameField.setAttribute('readonly', true);
                    console.log('Name field set to: ' + nameField.value);
                }
            }, 500); // Tunda selama 500ms untuk melihat apakah ini membantu
        });
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'cf7_auto_fill_user_fields', 20 );

Script Shortcode Email dan Nama User

function display_email_shortcode() {
    if( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        return esc_html( $current_user->user_email );
    } else {
        return esc_html( "User tidak ditemukan atau tidak login" );
    }
}
add_shortcode('email', 'display_email_shortcode');

function nama_shortcode() {
    if( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        return esc_html( $current_user->display_name );
    } else {
        return "User tidak ditemukan atau tidak login";
    }
}
add_shortcode('nama', 'nama_shortcode');

 

Penutup

Dengan menambahkan skrip sederhana ini ke situs WordPress Anda, Anda dapat meningkatkan kegunaan formulir Contact Form 7, memberikan pengalaman pengguna yang lebih baik, dan mengurangi kesalahan data yang diinput. Pendekatan ini sangat berguna untuk situs web yang memiliki pengguna terdaftar yang sering kali harus mengisi formulir yang sama, seperti situs anggota, toko online, atau komunitas online.

Implementasi ini tidak hanya meningkatkan efisiensi pengguna tetapi juga memberikan sentuhan profesional pada situs web Anda dengan menunjukkan perhatian terhadap detail dan kenyamanan pengguna.