WordPress Form Girişleri Sitenizde Nasıl Görüntülenir?

WordPress form girişlerinizi sitenizin ön ucunda görüntülemek sitenizi daha etkileşimli ve ilgi çekici hale getirebilir.

Bu yaklaşım, önemli bilgileri ziyaretçilerin görebileceği yerlerde göstermenizi sağlar. Örneğin, bu özelliği olumlu yorumları vurgulamak, dizinler oluşturmak, etkinlik takvimlerini görüntülemek ve çok daha fazlası için kullanabilirsiniz.

Bu makalede, WordPress form girişlerini sitenizde görüntülemek için gerekli adımlar konusunda size rehberlik edeceğiz.

WordPress Form Girişleri Neden Ön Uçta Görüntülenir?

Formlar, ziyaretçilerinizle iletişim halinde olmak, geri bildirim ve öneriler almak, kullanıcıların sorunlarını çözmelerine yardımcı olmak ve daha fazlası için harikadır. Ziyaretçileriniz için WordPress web sitenizde form girişlerini görüntülemek belirli durumlarda yararlı olabilir.

Örneğin, kullanıcıların çevrimiçi bir form aracılığıyla gönderdiği referansları ve ürün incelemelerini görüntüleyebilirsiniz. Bu şekilde, marka güveni oluşturmak ve dönüşümleri artırmak için sosyal kanıttan yararlanabilirsiniz.

Ayrıca bir işletme dizini oluşturmak, kullanıcı tarafından gönderilen etkinlikleri bir takvimde görüntülemek, istatistikleri görüntülemek ve web sitenizdeki çevrimiçi formlar aracılığıyla toplanan diğer önemli bilgileri göstermek için form girişlerini görüntüleyebilirsiniz. İşletmenize güvenilirlik katarken ürün ve hizmetleriniz için değerli sosyal kanıtlar sağlamanın harika bir yoludur.

Ancak, kullanıcılar WordPress web sitenizde bir form gönderdiğinde, girdileri varsayılan olarak gizli tutulur. Yalnızca WordPress yöneticisi ve izni olan diğer kullanıcılar form girişlerini görüntüleyebilir.

Aşağıdaki bölümlerde, Formidable Forms ve WPForms kullanarak WordPress web sitenizin ön ucunda form girişlerini nasıl gösterebileceğinizi paylaşacağız. Tercih ettiğiniz bölüme geçmek için aşağıdaki bağlantılara tıklayabilirsiniz:

Hazır mısınız? Video eğitimi ile başlayalım.

Video Eğitimi

Yazılı talimatları tercih ediyorsanız, okumaya devam edin.

Yöntem 1: Formidable Forms Kullanarak WordPress Form Girişlerini Görüntüleme

WordPress’te form girişlerini göstermenin en kolay yolu Formidable Forms kullanmaktır. Popüler bir WordPress iletişim formu eklentisidir ve çok sayıda özelleştirme özelliğine sahip hepsi bir arada bir form oluşturucu sunar.

Anketler, testler, ödeme formları ve etkinlik takvimleri, dizinler ve hesaplayıcılar gibi gelişmiş formlar gibi her türlü formu oluşturabilirsiniz.

Başlamak için, Formidable Forms eklentisini sitenize kuralım ve etkinleştirelim. Yardıma ihtiyacınız varsa, lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Bu eğitimde, ‘Visual Views’ eklentisini içerdiği için Formidable Forms Pro sürümünü kullanacağız.

Etkinleştirmenin ardından, Formidable ” Forms ‘a gidebilir ve üstteki ‘+ Yeni Ekle’ düğmesine tıklayabilirsiniz.

Bundan sonra, iletişim formu, kullanıcı kayıt formu, anket veya diğer formlar gibi bir form türü seçmenizi isteyen bir açılır pencere görünecektir.

Devam edin ve tercih ettiğiniz form türünü seçin. Bu eğitimde, kullanıcılardan referans toplamak için bir iletişim formu oluşturacağız.

Ardından, bir form adı ve açıklaması girmeniz gerekir.

İşiniz bittiğinde, ‘Oluştur’ düğmesine tıklamanız yeterlidir.

Artık formunuzu özelleştirmek için form oluşturucuyu kullanabilirsiniz.

Formidable, kullanımı son derece kolay bir sürükle-bırak oluşturucu sunar. Sol taraftaki seçeneklerden formunuza eklemek istediğiniz herhangi bir form alanını seçmeniz ve form şablonuna yerleştirmeniz yeterlidir.

Özelleştirdikten sonra formu web sitenizin herhangi bir yerine yerleştirebilirsiniz.

Eklenti, formunuzu eklemek için birden fazla seçenek sunar. En kolay yol, üstteki form oluşturucudaki ‘Yerleştir’ düğmesine tıklamak ve ardından formunuzu eklemek için mevcut bir sayfayı seçmek veya yeni bir sayfa oluşturmaktır.

Alternatif olarak, formlarınızı yerleştirmek için WordPress içerik düzenleyicisinde bir ‘Formidable Forms’ bloğu veya bir kısa kod bloğu kullanabilirsiniz.

Bu eğitim için ‘Yeni sayfa oluştur’ seçeneğini seçeceğiz.

İçerik düzenleyicisine girdiğinizde, Formidable Forms formunuz için özel bir sayfa oluşturduğunuzu göreceksiniz.

Yayına almadan önce, ‘Önizleme’ düğmesine tıklayarak önizleme yapmak isteyebilirsiniz.

Görünümünden memnun olduğunuzda, devam edin ve sayfanızı yayınlayın.

Formunuz yayınlandıktan ve girişleri almaya başladıktan sonra, Formidable Forms’ta ‘Visual Views’ eklentisini yüklemek ve etkinleştirmek isteyeceksiniz.

Bunu yapmak için WordPress kontrol panelinizden Formidable ” Eklentiler bölümüne gitmeniz yeterlidir. Ardından, ‘Görsel Görünümler’ eklentisine gidebilir ve ‘Yükle’ düğmesine tıklayabilirsiniz.

Eklenti etkin olduğunda, WordPress panonuzdan Formidable ” Görünümler bölümüne gidebilirsiniz.

Ardından, devam edin ve en üstteki ‘+ Yeni Ekle’ düğmesine tıklayın.

Bir açılır pencere görünecektir. Burada ızgara, tablo, takvim ve klasik görünüm gibi bir görünüm türü seçmeniz gerekecektir.

Bu eğitimde, form girişlerini göstermek için ‘Izgara’ görünümünü seçeceğiz.

Bir sonraki adım, görünümünüz için bir veri kaynağı seçmektir.

Devam edin ve formunuzu seçmek için ‘Formdaki Girişleri Kullan’ açılır menüsüne tıklayın. Ayrıca bir görünüm adı da girebilirsiniz.

Veri kaynağınızı seçtikten sonra, ‘Görünüm oluştur’ düğmesine tıklamanız yeterlidir.

Bu, Formidable Forms’da görünüm oluşturucuyu başlatacaktır.

Başlamak için devam edin ve ‘Layout Builder’ düğmesine tıklayın.

Sırada, form girdilerinizi görüntülemek için bir düzen seçmeniz gerekecek.

Üstte verilen seçeneklerden bir düzen seçmeniz yeterlidir. Form girişlerini göstermek için birden fazla düzen ekleyebilirsiniz.

Bir düzen seçtikten sonra, devam edin ve ‘Düzeni kaydet’ düğmesine tıklayın.

Daha sonra ‘+’ düğmesine tıklayarak görünüm oluşturucuya içerik ekleyebilirsiniz. Form girişlerinin düzenini özelleştirmek ve form girişlerinden önce ve sonra içerik eklemek için seçenekler vardır.

Eklenti ayrıca sol taraftaki ‘Izgara Stili Ayarları’ paneli altında tipografi, arka plan rengi, kenarlık ve daha fazlasını değiştirmek için seçenekler sunar.

Ayrıca, sitenizde form girişlerini gösterirken ihtiyaç duyacağınız ‘Görünüm Adı’ alanının altında bir kısa kod göreceksiniz.

‘Izgara Stili Ayarları’ panelinde daha gelişmiş seçenekler vardır. Gelişmiş ayarlarda giriş sayısını, sayfa boyutunu ve daha fazlasını sınırlayabilirsiniz.

Görünümü özelleştirdiğinizde, üstteki ‘Güncelle’ düğmesine tıklamayı unutmayın.

Ardından, form girişlerinizi WordPress web sitenizde görüntülemeniz gerekir. Bunu yapmak için, ‘Görünüm Adı’ altında verilen kısa kodu kopyalayın.

Kısa kod aşağıdaki gibi görünecektir:

[display-frm-data id=2410]

Kısa kodu panoya kopyaladıktan sonra, form girişlerini görüntülemek istediğiniz herhangi bir gönderi veya sayfaya gidebilirsiniz. İçerik düzenleyicide bir ‘Kısa Kod’ bloğu eklemeniz yeterlidir.

Şimdi, daha önce kopyaladığınız kısa kodu kısa kod bloğuna girin.

Bundan sonra, sayfayı yayınlamadan önce önizlemesini yapmak isteyebilirsiniz.

Artık form girişlerini çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

İşte demo web sitemizde nasıl göründükleri:

Yöntem 2: WPForms Kullanarak WordPress Form Girişlerini Görüntüleme

WordPress web sitenizin ön ucunda form girişlerini görüntülemenin bir başka yolu da WPForms‘tur. Ancak, bu yöntem kod düzenleme gerektirir ve kodlama hakkında bilgi sahibi olan ileri düzey kullanıcılar için önerilir.

WPForms, WordPress için en iyi iletişim formu eklentisidir ve sürükle bırak form oluşturucuyu kullanarak farklı form türleri oluşturmanıza olanak tanır.

Öncelikle WPForms eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Etkinleştirmenin ardından WPForms kullanarak çevrimiçi bir form oluşturmaya başlayabilirsiniz. WordPress’te bir iletişim formunun nasıl oluşturulacağına ilişkin adım adım kılavuzumuza göz atabilirsiniz.

Form girişleri almaya başladığınızda, aşağıdaki kodu temanızın functions.php dosyasına girmeniz gerekecektir. Ancak bunu yaparken küçük bir hata bile yaparsanız web sitenizi bozabileceğinizi unutmayın, bu nedenle WPCode kullanmanızı öneririz.

Daha fazla bilgi için lütfen WordPress’e kolayca özel kod ekleme hakkındaki kılavuzumuza bakın.

/**
 * Custom shortcode to display WPForms form entries in table view.
 *
 * Basic usage: [wpforms_entries_table id="FORMID"].
 * 
 * Possible shortcode attributes:
 * id (required)  Form ID of which to show entries.
 * user           User ID, or "current" to default to current logged in user.
 * fields         Comma separated list of form field IDs.
 * number         Number of entries to show, defaults to 30.
 * 
 * @link https://wpforms.com/developers/how-to-display-form-entries/
 *
 * Realtime counts could be delayed due to any caching setup on the site
 *
 * @param array $atts Shortcode attributes.
 * 
 * @return string
 */
 
function wpf_entries_table( $atts ) {
 
    // Pull ID shortcode attributes.
    $atts = shortcode_atts(
        [
            'id'     => '',
            'user'   => '',
            'fields' => '',
            'number' => '',
                        'type' => 'all' // all, unread, read, or starred.
        ],
        $atts
    );
 
    // Check for an ID attribute (required) and that WPForms is in fact
    // installed and activated.
    if ( empty( $atts['id'] ) || ! function_exists( 'wpforms' ) ) {
        return;
    }
 
    // Get the form, from the ID provided in the shortcode.
    $form = wpforms()->form->get( absint( $atts['id'] ) );
 
    // If the form doesn't exists, abort.
    if ( empty( $form ) ) {
        return;
    }
 
    // Pull and format the form data out of the form object.
    $form_data = ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : '';
 
    // Check to see if we are showing all allowed fields, or only specific ones.
    $form_field_ids = isset( $atts['fields'] ) && $atts['fields'] !== '' ? explode( ',', str_replace( ' ', '', $atts['fields'] ) ) : [];
 
    // Setup the form fields.
    if ( empty( $form_field_ids ) ) {
        $form_fields = $form_data['fields'];
    } else {
        $form_fields = [];
        foreach ( $form_field_ids as $field_id ) {
            if ( isset( $form_data['fields'][ $field_id ] ) ) {
                $form_fields[ $field_id ] = $form_data['fields'][ $field_id ];
            }
        }
    }
 
    if ( empty( $form_fields ) ) {
        return;
    }
 
    // Here we define what the types of form fields we do NOT want to include,
    // instead they should be ignored entirely.
    $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] );
 
    // Loop through all form fields and remove any field types not allowed.
    foreach ( $form_fields as $field_id => $form_field ) {
        if ( in_array( $form_field['type'], $form_fields_disallow, true ) ) {
            unset( $form_fields[ $field_id ] );
        }
    }
 
    $entries_args = [
        'form_id' => absint( $atts['id'] ),
    ];
 
    // Narrow entries by user if user_id shortcode attribute was used.
    if ( ! empty( $atts['user'] ) ) {
        if ( $atts['user'] === 'current' && is_user_logged_in() ) {
            $entries_args['user_id'] = get_current_user_id();
        } else {
            $entries_args['user_id'] = absint( $atts['user'] );
        }
    }
 
    // Number of entries to show. If empty, defaults to 30.
    if ( ! empty( $atts['number'] ) ) {
        $entries_args['number'] = absint( $atts['number'] );
    }
 
// Filter the type of entries all, unread, read, or starred
    if ( $atts['type'] === 'unread' ) {
        $entries_args['viewed'] = '0';
    } elseif( $atts['type'] === 'read' ) {
        $entries_args['viewed'] = '1';
    } elseif ( $atts['type'] === 'starred' ) {
        $entries_args['starred'] = '1';
    }
 
    // Get all entries for the form, according to arguments defined.
    // There are many options available to query entries. To see more, check out
    // the get_entries() function inside class-entry.php (https://a.cl.ly/bLuGnkGx).
    $entries = wpforms()->entry->get_entries( $entries_args );
 
    if ( empty( $entries ) ) {
        return '<p>No entries found.</p>';
    }
 
    ob_start();
 
    echo '<table class="wpforms-frontend-entries">';
 
        echo '<thead><tr>';
 
            // Loop through the form data so we can output form field names in
            // the table header.
            foreach ( $form_fields as $form_field ) {
 
                // Output the form field name/label.
                echo '<th>';
                    echo esc_html( sanitize_text_field( $form_field['label'] ) );
                echo '</th>';
            }
 
        echo '</tr></thead>';
 
        echo '<tbody>';
 
            // Now, loop through all the form entries.
            foreach ( $entries as $entry ) {
 
                echo '<tr>';
 
                // Entry field values are in JSON, so we need to decode.
                $entry_fields = json_decode( $entry->fields, true );
 
                foreach ( $form_fields as $form_field ) {
 
                    echo '<td>';
 
                        foreach ( $entry_fields as $entry_field ) {
                            if ( absint( $entry_field['id'] ) === absint( $form_field['id'] ) ) {
                                echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field['value'] ), $entry_field, $form_data, 'entry-frontend-table' );
                                break;
                            }
                        }
 
                    echo '</td>';
                }
 
                echo '</tr>';
            }
 
        echo '</tbody>';
 
    echo '</table>';
 
    $output = ob_get_clean();
 
    return $output;
}
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

Ücretsiz WPCode eklentisini kullanarak kodu web sitenize ekledikten sonra, form girişlerini göstermek için aşağıdaki kısa kodu herhangi bir sayfaya veya gönderiye girmeniz gerekir.

Bu kısa kodu panoya kopyalamanız yeterlidir:

[wpforms_entries_table id="FORMID"]

FORMID’yi formunuzun ID’si ile değiştirmeniz yeterlidir.

Form kimliğini WPForms ” Tüm Formlar bölümüne gidip Kısa Kod sütununa bakarak bulabilirsiniz.

Bir kısa kod eklemek için yeni bir sayfa oluşturmanız veya mevcut bir sayfayı düzenlemeniz yeterlidir.

Ardından, devam edin ve bir ‘Kısa Kod’ bloğu ekleyin.

Bloğu ekledikten sonra kısa kodunuzu girmeniz yeterlidir.

Şimdi WordPress sayfanızı önizleyin ve en üstteki ‘Yayınla’ düğmesine tıklayın.

Ve hepsi bu kadar!

İşte form girişlerimizin önizlemesi ön uçta nasıl görünüyordu:

Gerektiğinde özel CSS stillerini kullanarak ekranı daha da özelleştirebilirsiniz.

Bonus İpucu: GDPR Uyumlu Formlar Oluşturma

Genel Veri Koruma Yönetmeliği (GDPR), Avrupa Birliği’nde 25 Mayıs 2018 tarihinde yürürlüğe giren bir yasadır. AB’deki insanlara kişisel verileri üzerinde daha fazla kontrol sağlamak ve şirketlerin bu verileri düzgün bir şekilde ele almasını sağlamakla ilgilidir.

Bir WordPress siteniz varsa, muhtemelen özellikle formlar aracılığıyla kullanıcı bilgilerini topluyordur. Formlarınızın GDPR kurallarına uygun olduğundan emin olmak için şunları yapmalısınız:

1. Açık onay alın: Kullanıcılara kişisel bilgilerini saklamanın ve kullanmanın uygun olup olmadığını sorun.
2. Erişim talepleri: Kullanıcıların kendileri hakkında sahip olduğunuz kişisel bilgileri görmelerine izin verin.
3. Silme talepleri: Kullanıcıların verilerinin sitenizden silinmesini istemelerine izin verin.

Daha fazla ayrıntı için WordPress’te GDPR uyumlu formların nasıl oluşturulacağına ilişkin kılavuzumuza göz atabilirsiniz. Tüm sorularınızı kolay anlaşılır bir dille yanıtlayacaktır.

Umarız bu makale WordPress form girişlerini sitenizde nasıl görüntüleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca çevrimiçi sipariş formu oluşturma ve formlarınıza kupon kodu alanı ekleme hakkındaki kılavuzlarımıza da göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.