Hur man visar WordPress-formulärinlägg på din webbplats (2 sätt)

Samlar du in formulärinlämningar på din WordPress-webbplats men visar dem aldrig för dina besökare? Det är en missad möjlighet.

Att visa inlägg som recensioner, medlemslistor eller evenemangskalendrar på din webbplats ger dem ett syfte. De kan hjälpa besökare att hitta information, se verklig feedback eller upptäcka människor och evenemang i ditt samhälle.

På WPBeginner har vi hjälpt massor av webbplatsägare att göra sina dolda formulärdata användbara. Efter att ha testat många metoder har vi hittat 2 som fungerar riktigt bra.

I den här guiden visar vi hur du visar WordPress-formulärinlägg på din webbplats på 2 enkla sätt – oavsett om du driver en katalog, en utställning eller en community-webbplats. 🙌

Varför visa WordPress-formulärinlägg på framsidan?

Att visa formulärinlägg innebär att ta de data som dina besökare skickar in och visa dem på de publika sidorna på din WordPress-webbplats. En av de största fördelarna är att bygga socialt bevis.

Som standard är formulärinlägg endast synliga för administratörer.

Men att visa vittnesmål eller produktrecensioner som använder verklig kundfeedback är ett utmärkt sätt att bygga förtroende. Faktum är att en studie visade att visning av recensioner kan öka konverteringsgraden med upp till 270%.

Du kan också använda formulärinlägg för att skapa andra användbara resurser för dina besökare, som företagsregister, medlemslistor eller användarinlämnade evenemang i en kalender.

I följande avsnitt visar vi hur du visar formulärinlägg på framsidan av din WordPress-webbplats med hjälp av Formidable Forms och WPForms.

Här är en snabb översikt över allt vi kommer att täcka i den här guiden:

• Displaying WordPress Form Entries by Using Formidable Forms (Easy Way)
  • Steg 1: Konfigurera Formidable Forms
  • Steg 2: Skapa ett formulär
  • Steg 3: Publicera formuläret
  • Steg 4: Aktivera visuella vyer
  • Steg 5: Visa formulärinlägg på startsidan
• Displaying WordPress Form Entries by Using WPForms (Advanced)
  • Steg 1: Installera WPForms
  • Step 2: Create a Form and Display Its Entries
• Bonustips: Skapa GDPR-kompatibla formulär
• Vanliga frågor om att visa formulärinlägg i WordPress
• Videoguide: Visa WordPress-formulärinlägg
• Ytterligare resurser för att använda WordPress-formulär

Låt oss börja.

Metod 1: Visa WordPress-formulärinlägg med Formidable Forms

Det enklaste sättet att visa formulärsinlägg i WordPress är att använda Formidable Forms. Det är ett populärt WordPress kontaktformulärsplugg och erbjuder en allt-i-ett formulärbyggare med massor av anpassningsfunktioner.

Du kan skapa alla typer av formulär, särskilt avancerade formulär som händelsekalendrar, kataloger och kalkylatorer.

Vi har testat Formidable Forms noggrant för att lära oss om alla dess funktioner. Du kan se varför vi rekommenderar det i vår kompletta recension av Formidable Forms.

Steg 1: Konfigurera Formidable Forms

För att komma igång, låt oss installera och aktivera Formidable Forms-pluginet på din webbplats. För den här handledningen använder vi Formidable Forms Pro-versionen eftersom den inkluderar tillägget 'Visual Views'.

Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du gå till Formidable » Forms och klicka på knappen '+ Add New' högst upp.

Steg 2: Skapa ett formulär

Efter det visas ett popup-fönster där du ombeds välja en formulärtyp, som ett kontaktformulär, användarregistreringsformulär, enkät eller annat.

Välj vidare din föredragna formulärtyp. För den här handledningen skapar vi ett kontaktformulär för att samla in vittnesmål från användare.

Ange ett formulärnamn och en beskrivning.

När du är klar klickar du helt enkelt på knappen 'Skapa'.

Nu kan du använda formulärbyggaren för att anpassa ditt formulär.

Formidable erbjuder en dra-och-släpp-byggare som är superenkel att använda. Välj helt enkelt det formulärsfält du vill lägga till i ditt formulär från alternativen till vänster och placera det i formulärmallen.

Steg 3: Publicera formuläret

Efter anpassning kan du bädda in formuläret var som helst på din webbplats.

Pluginet erbjuder flera alternativ för att lägga till ditt formulär. Det enklaste sättet är att klicka på knappen 'Bädda in' i formulärbyggaren högst upp och sedan välja en befintlig sida eller skapa en ny sida för att lägga till ditt formulär.

Alternativt kan du använda ett 'Formidable Forms'-block eller ett kortkodblock i WordPress innehållsredigerare för att bädda in dina formulär.

För den här handledningen väljer vi alternativet 'Skapa ny sida'.

När du väl är inne i innehållsredigeraren ser du att du har skapat en dedikerad sida för ditt Formidable Forms-formulär.

Innan du publicerar det kanske du vill förhandsgranska det genom att klicka på knappen 'Förhandsgranska'.

När du är nöjd med utseendet, fortsätt och publicera din sida.

Steg 4: Aktivera visuella vyer

När ditt formulär är live och du börjar ta emot inlägg vill du installera och aktivera tillägget 'Visual Views' i Formidable Forms.

För att göra det, gå helt enkelt till Formidable » Tillägg från ditt WordPress adminområde. Därefter kan du skrolla ner till tillägget 'Visual Views' och klicka på knappen 'Installera'.

När tillägget är aktivt kan du gå till sidan Formidable » Vyer.

Klicka sedan vidare på knappen '+ Lägg till ny' högst upp.

Ett popup-fönster kommer att visas. Här behöver du välja en vytyp, som rutnät, tabell, kalender eller klassisk vy.

För den här handledningen väljer vi vyn 'Rutnät' för att visa formulärinlägg.

Nästa steg är att välja en datakälla för din vy.

Klicka vidare på rullgardinsmenyn 'Använd inlägg från formulär' för att välja ditt formulär. Du kan också ange ett vynamn.

Efter att ha valt din datakälla klickar du helt enkelt på knappen 'Skapa en vy'.

Detta startar visningsbyggaren i Formidable Forms.

För att komma igång, klicka på knappen ‘Layout Builder’.

Därefter måste du välja en layout för att visa dina formulärinlägg.

Välj helt enkelt en layout från de givna alternativen högst upp. Du kan lägga till flera layouter för att visa formulärinlägg.

Efter att ha valt en layout, klicka på knappen ‘Spara layout’.

Du kan sedan lägga till innehåll i vybyggaren genom att klicka på '+' -knappen. Det finns alternativ för att anpassa layouten för formulärinläggen och lägga till innehåll före och efter formulärinläggen.

Pluginet ger också alternativ för att ändra typografi, bakgrundsfärg, kantlinje och mer under panelen 'Grid Style Settings' till vänster.

Du kommer också att se en kortkod under fältet 'Vynamn', som du behöver när du visar formulärinlägg på din webbplats.

Det finns mer avancerade alternativ i panelen 'Grid Style Settings'. I de avancerade inställningarna kan du begränsa antalet poster, sidstorlek och mer.

När du har anpassat vyn, glöm inte att klicka på knappen 'Uppdatera' högst upp.

Steg 5: Visa formulärinlägg på startsidan

Därefter behöver du visa dina formulärinlägg på din WordPress-webbplats. För att göra det, kopiera kortkoden som anges under 'Vynamn'.

Kortkoden kommer att se ut så här:

[display-frm-data id=2410]

När du har kopierat kortkoden till urklippet kan du gå till valfritt inlägg eller sida där du vill visa formulärinlägg.

I innehållseditoraren lägger du helt enkelt till ett 'Kortkod'-block.

Lägg nu till kortkoden du kopierade tidigare i kortkodsblocket.

Därefter kanske du vill förhandsgranska sidan innan du publicerar den.

Du kan nu besöka din webbplats för att se formulärinläggen i aktion.

Här är hur de ser ut på vår demowebbplats:

Metod 2: Visa WordPress-formulärinlägg med WPForms

Du kan också visa formulärinlägg med hjälp av WPForms, ett av bästa WordPress-pluginsen för kontaktformulär. Denna metod är mer avancerad eftersom den kräver att du lägger till ett PHP-kodavsnitt på din webbplats.

För att göra detta behöver du WPForms Pro, som lagrar alla formulärinlägg i din WordPress-databas. Den kostnadsfria WPForms Lite-versionen skickar bara inlägg via e-post och sparar dem inte, så den fungerar inte för den här metoden.

På WPBeginner använder vi WPForms för att skapa olika formulär, som kontaktformulär och årliga användarundersökningar. Få mer information om det i vår detaljerade WPForms-recension.

Steg 1: Installera WPForms

Först, låt oss registrera oss för ett WPForms-konto.

Du kan helt enkelt klicka på knappen 'Get WPForms Now' på deras webbplats för att köpa en plan och skapa ditt konto.

Med det gjort, kopiera din licensnyckel.

Nu ska vi konfigurera pluginet.

För att göra detta behöver du installera gratisversionen av WPForms-pluginet från WordPress-arkivet, vilket ger den grundläggande strukturen. Därefter anger du din licensnyckel för att låsa upp alla Pro-funktioner.

Till att börja med kan du gå till Plugins » Lägg till nytt plugin från ditt WordPress-administrationsområde.

Använd sedan sökfunktionen för att snabbt hitta WPForms-pluginet.

I relevant sökresultat, klicka på ‘Installera nu’ och ‘Aktivera’. För mer information, se vår guide om hur man installerar ett WordPress-plugin.

Steg 2: Skapa ett formulär och visa dess inlägg

Efter aktivering kan du börja skapa ett onlineformulär med WPForms. Du kan ta en titt på vår steg-för-steg-guide om hur man skapar ett kontaktformulär i WordPress.

När du börjar få formulärinlägg behöver du ange följande kod i din temas fil functions.php.

Men notera att detta kan bryta din webbplats om du gör ett litet misstag.

Det är därför vi alltid rekommenderar att använda WPCode, det bästa kodsnutt-pluginet för WordPress.

Några av våra partnerföretag använder detta plugin eftersom det är det säkraste och enklaste sättet att lägga till anpassade kodsnuttar i WordPress utan att riskera att bryta webbplatsen. För en djupare titt på plattformen, kolla in vår WPCode-recension.

Oroa dig inte, du behöver inte förstå vad koden nedan gör.

Du behöver bara kopiera den. Gå sedan till vår guide om hur man enkelt lägger till anpassad kod i WordPress för mer information om hur du anger koden.

/**
 * 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' );

När du har lagt till koden på din webbplats med hjälp av gratis WPCode-pluginet är du redo att visa dina formulärinlägg. Du gör detta med en kortkod som du kan placera på vilken sida eller inlägg som helst.

Den grundläggande kortkoden ser ut så här:

[wpforms_entries_table id="FORMID"]

Kom bara ihåg att ersätta FORMID med ditt faktiska formulärs ID.

Du kan hitta formulärs-ID genom att gå till WPForms » Alla formulär och sedan titta i kolumnen Kortkod.

Anpassa visningen av dina WPForms-inlägg (alternativ)

Du kan också anpassa denna kortkod för att ändra vilka fält som visas och hur många inlägg som visas. Detta är mycket användbart för att skapa rena, fokuserade visningar.

Här är ett par användbara alternativ:

• Visa specifika fält: För att bara visa vissa kolumner, lägg till ett fields attribut med fält-ID:n från ditt formulär. Till exempel, för att bara visa fälten med ID:n 1 och 3, skulle du använda:
  [wpforms_entries_table id="123" fields="1,3"]
• Begränsa antalet poster: För att visa endast de 5 senaste posterna, lägg till attributet number: [wpforms_entries_table id="123" number="5"]

Du kan hitta 'Fält-ID' för vilket fält som helst genom att öppna ditt WordPress-formulär i WPForms-byggaren och klicka på det fältet. ID:t visas högst upp i inställningspanelen till vänster.

Steg 3: Lägg till kortkoden på din sida

För att lägga till en kortkod, skapa helt enkelt en ny sida eller redigera en befintlig.

Gå sedan vidare och lägg till ett 'Kortkod'-block.

Lägg sedan helt enkelt till din kortkod i blocket.

När det är gjort kan du förhandsgranska din WordPress-sida och klicka på knappen 'Publicera' högst upp.

Och det är allt som krävs!

Här är hur förhandsgranskningen av våra formulärinlägg såg ut på framsidan:

Du kan ytterligare anpassa visningen med anpassade CSS-stilar vid behov.

Bonustips: Skapa GDPR-kompatibla formulär

General Data Protection Regulation (GDPR) är en lag från Europeiska unionen som ger människor mer kontroll över sina personuppgifter. Om din webbplats samlar in information från användare, särskilt via formulär, är det viktigt att följa dessa regler.

För att göra dina formulär GDPR-kompatibla bör du:

1. Få uttryckligt samtycke: Fråga användarna om det är okej att lagra och använda deras personliga information.
2. Uppfylla begäran om åtkomst: Låt användare se den personliga information du har om dem.
3. Tillgodose begäran om radering: Tillåt användare att begära att deras data raderas från din webbplats.

För mer information kan du läsa vår guide om hur man skapar GDPR-kompatibla formulär i WordPress. Den kommer att besvara alla dina frågor på ett lättförståeligt språk.

Vanliga frågor om att visa formulärinlägg i WordPress

Kan jag visa formulärinlägg utan en plugin?

Ja, men det är väldigt tekniskt. Du skulle behöva skriva anpassad PHP och SQL-kod för att fråga din WordPress-databas och visa resultaten. Att använda en plugin som Formidable Forms eller WPForms kodsnuttmetod är mycket enklare och säkrare för de flesta användare.

Är det säkert att visa användarinlämnad data på min webbplats?

Det kan vara det, men du måste vara försiktig. Få alltid uttryckligt samtycke från användare innan du gör deras data offentlig.

Dessutom är det mycket viktigt att moderera inlägg innan de visas på din webbplats. Du bör granska varje inlägg för att förhindra att olämpligt innehåll publiceras.

Tumregel: Visa aldrig offentligt känslig personlig information som fullständiga namn, e-postadresser, telefonnummer eller hemadresser utan uttryckligt, fall-för-fall-tillstånd.

Hur kan jag styla utseendet på mina formulärinlägg?

Båda metoderna i den här guiden låter dig styla inlägg. Formidable Forms Visual Views-tillägget har inbyggda inställningar för färger, typsnitt och layout. WPForms tabellmetod skapar en grundläggande HTML-tabell som du kan styla med anpassad CSS för att matcha ditt tema.

Videoguide: Visa WordPress-formulärinlägg

🎬 Se det i aktion! Titta på vår videoguide för att visa WordPress-formulärinlägg på din webbplats:

Ytterligare resurser för att använda WordPress-formulär

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar WordPress-formulärinlägg på din webbplats.

Därefter kanske du också vill se våra andra hjälpsamma guider om:

• Hur man skapar ett onlinebeställningsformulär
• Hur man lägger till ett fält för kupongkod i dina WordPress-formulär
• Hur man lägger till automatisk komplettering för adressfält i WordPress
• Sätt att använda villkorlig logik i WordPress-formulär
• Hur jag blockerade 18 000 skräppost-leadattacker i mitt WordPress-formulär
• Ultimata guiden om användning av WordPress-formulär

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.