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

WordPress form girişlerinizi sitenizin ön ucunda göstermek mi istiyorsunuz?

Form girişlerini ön uçta görüntülemek, ziyaretçilerinize önemli bilgileri göstermenizi sağlar. Bunu olumlu yorumları göstermek, dizinler oluşturmak, etkinlik takvimlerini görüntülemek ve daha fazlası için kullanabilirsiniz.

Bu makalede, WordPress form girişlerini sitenizde nasıl görüntüleyeceğinizi göstereceğ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, varsayılan olarak, kullanıcılar WordPress web sitenizde bir form gönderdiğinde, girdileri gizli tutulur. Yalnızca WordPress yöneticisi ve izni olan diğer kullanıcılar form girişlerini görüntüleyebilir.

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

Video Eğitimi

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

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 hesap makineleri gibi gelişmiş formlar gibi her türlü formu oluşturabilirsiniz.

Öncelikle, Formidable Forms eklentisini sitenize yüklemeniz ve etkinleştirmeniz gerekir. 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, Bize Ulaşın formu, kullanıcı kayıt formu, anket ve daha fazlası 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ğitimin amacı doğrultusunda, 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 olan 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, devam edin ve formu web sitenizde herhangi bir yere yerleştirin.

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 da kullanabilirsiniz.

Ardından, sayfanıza bir ad verebilir ve önizlemesini yapabilirsiniz.

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

Formunuz yayınlandıktan ve girişler almaya başladıktan sonra, Formidable Forms’ta Visual Views eklentisini yüklemeniz ve etkinleştirmeniz gerekir.

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

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

Bundan sonra, en üstteki ‘+ Yeni Ekle’ düğmesine tıklamanız yeterlidir.

Ardından, bir görünüm türü seçmeniz gereken bir açılır pencere görünecektir. Eklenti, kullanabileceğiniz bir ızgara, tablo, takvim ve klasik görünüm sunar.

Bu eğitimde, form girişlerini göstermek için ‘Izgara’ görünümünü kullanacağız.

Bundan sonra, görünümünüz için bir veri kaynağı seçmeniz gerekecektir.

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ı girme seçeneği de vardır.

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.

Ardından, form girdilerinizi görüntülemek için bir düzen seçmeniz gerekir.

Ü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.

Ardından, ‘+’ 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 Görünüm Adı alanının altında, sitenizde form girişlerini gösterirken ihtiyaç duyacağınız 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]

Bundan sonra, form girişlerini görüntülemek istediğiniz herhangi bir gönderi veya sayfaya gidin. İçerik editörüne girdiğinizde, 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ı önizleyebilir ve yayınlayabilirsiniz.

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:

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.

Ardından, WPForms kullanarak çevrimiçi bir form oluşturmanız gerekecektir. 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. Bunu yapmak, küçük bir hata bile yapsanız web sitenizi bozabilir, 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.

[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.

İş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.

Umarız bu makale, WordPress form girişlerini sitenizde nasıl görüntüleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, özel bir WordPress temasının nasıl oluşturulacağına ilişkin kılavuzumuzu veya WordPress için en iyi iletişim formu eklentileri için uzman seçimlerimizi görmek 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.