Vill du visa dina WordPress-formulärposter på framsidan av din webbplats?
Genom att visa formulärposter i gränssnittet kan du visa viktig information för dina besökare. Du kan använda den för att visa positiva recensioner, skapa kataloger, visa evenemangskalendrar och mer.
I den här artikeln visar vi dig hur du visar WordPress-formulärposter på din webbplats.
Varför visa WordPress-formulärposter på frontend?
Formulär är utmärkta för att hålla kontakten med dina besökare, få feedback och förslag, hjälpa användare att lösa sina problem och mer. Att visa formulärposter på din WordPress-webbplats för dina besökare kan vara användbart i vissa situationer.
Du kan till exempel visa omdömen och produktrecensioner som användare skickar in via ett onlineformulär. På så sätt kan du utnyttja social proof för att bygga varumärkesförtroende och öka konverteringarna.
Du kan också visa formulärposter för att skapa en företagskatalog, visa användarinskickade händelser i en kalender, visa statistik och visa annan viktig information som samlats in via onlineformulär på din webbplats.
Men som standard, när användare skickar in ett formulär på din WordPress-webbplats, hålls deras poster privata. Endast WordPress-administratören och andra användare som har behörighet kan se formulärposterna.
Låt oss se hur du kan visa formulärposter på fronten av din WordPress-webbplats med hjälp av Formidable Forms och WPForms. Du kan klicka på länkarna nedan för att gå till ditt föredragna avsnitt.
Video-tutorial
Prenumerera på WPBeginner
Om du föredrar skriftliga instruktioner, läs vidare.
Visa WordPress-formulärinlägg med hjälp av formidabla formulär
Det enklaste sättet att visa formulärposter i WordPress är att använda Formidable Forms. Det är ett populärt plugin för WordPress-kontaktformulär och erbjuder en allt-i-ett-formulärbyggare med många anpassningsfunktioner.
Du kan skapa alla typer av formulär, till exempel undersökningar, frågeformulär, betalningsformulär och avancerade formulär som evenemangskalendrar, kataloger och miniräknare.
Först måste du installera och aktivera plugin-programmet Formidable Forms på din webbplats. Om du behöver hjälp, kolla in vår guide om hur du installerar ett WordPress-plugin.
För den här handledningen kommer vi att använda Formidable Forms Pro-versionen eftersom den innehåller plugin-programmet Visual Views.
Efter aktivering kan du gå till Formidabla » Former och klicka på knappen ‘+Lägg till ny’ högst upp.
Därefter visas ett popup-fönster som ber dig att välja en formulärtyp, såsom ett kontaktformulär, användarregistreringsformulär, enkät och mer.
Gå vidare och välj önskad formulärtyp. För den här handledningens skull kommer vi att skapa ett kontaktformulär för att samla in användarrekommendationer.
Därefter måste du ange ett namn och en beskrivning av formuläret.
När du är klar klickar du bara på knappen “Skapa”.
Du kan nu använda formulärbyggaren för att anpassa ditt formulär.
Formidable erbjuder en dra och släpp-byggare som är mycket enkel att använda. Välj helt enkelt ett formulärfält som du vill lägga till i ditt formulär från alternativen till vänster och placera det i formulärmallen.
Efter att ha anpassat det, fortsätt och bädda in formuläret var som helst på din webbplats.
Plugin-programmet erbjuder flera alternativ för att lägga till ditt formulär. Det enklaste sättet är att klicka på knappen “Infoga” 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 också använda ett Formidable Forms-block eller kortkodsblock i WordPress-innehållsredigeraren för att bädda in dina formulär.
Du kan sedan ge din sida ett namn och förhandsgranska den.
När du är nöjd med hur det ser ut, fortsätt och publicera din sida.
När ditt formulär är aktivt och börjar ta emot indata måste du installera och aktivera insticksprogrammet Visual Views i Formidable Forms.
För att göra det, gå helt enkelt till Formidabel » Tillbehör från din WordPress-instrumentpanel. Scrolla sedan ner till plugin-programmet “Visuella vyer” och klicka på knappen “Installera”.
När plugin-programmet är aktivt kan du gå till Formidabel » Visningar från din WordPress-instrumentpanel.
Därefter klickar du bara på knappen ‘+Lägg till ny’ högst upp.
Därefter visas ett popup-fönster där du måste välja en vytyp. Insticksprogrammet erbjuder ett rutnät, en tabell, en kalender och en klassisk vy som du kan använda.
För den här handledningen kommer vi att använda “Grid”-vyn för att visa formulärposterna.
Efter det måste du välja en datakälla för vyn.
Gå vidare och klicka på rullgardinsmenyn “Använd formulärinmatningar” och välj ditt formulär. Det finns också ett alternativ att ange ett vynamn.
När du har valt din datakälla klickar du bara på knappen “Skapa en vy”.
Detta kommer att starta vybyggaren i Formidable Forms.
För att komma igång, gå vidare och klicka på knappen “Layoutbyggare”.
Därefter måste du välja en layout för att visa dina formulärposter.
Välj helt enkelt en design från alternativen ovan. Du kan lägga till flera layouter för att visa formulärposter.
När du har valt en layout, gå vidare och 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ärinmatningarna och lägga till innehåll före och efter formulärinmatningarna.
Plugin-programmet erbjuder också alternativ för att ändra typografi, bakgrundsfärg, ram och mer i panelen Grid Style Settings till vänster.
Du kommer också att se en kortkod under fältet Visa namn, som du behöver när du visar formulärposter på din webbplats.
Det finns mer avancerade alternativ i panelen Grid Style Settings. I avancerade inställningar kan du begränsa antalet poster, sidstorlek med mera.
När du har anpassat vyn, glöm inte att klicka på knappen “Uppdatera” längst upp.
Därefter måste du visa dina formulärposter på din WordPress-webbplats. För att göra det, kopiera kortkoden under Visa namn.
Kortkoden kommer att se ut så här:
[display-frm-data id=2410]
Efter det, gå till valfritt inlägg eller sida där du vill visa formulärposterna. När du väl är i innehållsredigeraren lägger du bara till ett “Shortcode”-block.
Ange nu kortkoden som du kopierade tidigare i kortkodsblocket.
Efter det kan du förhandsgranska sidan och publicera den.
Du kan nu besöka din webbplats för att se formulärposterna i aktion.
Så här ser de ut på vår demowebbplats:
Visa WordPress-formulärposter genom att använda WPForms
Ett annat sätt att visa formulärposter på framsidan av din WordPress-webbplats är genom WP-formulär. Den här metoden kräver dock redigering av koden och rekommenderas för avancerade användare som har kunskap om kodning.
WPForms är det bästa kontaktformulärpluginet för WordPress och låter dig skapa olika typer av formulär med hjälp av en dra och släpp-formulärbyggare.
Tänk bara på att om du vill se dina formulärposter i WordPress-instrumentpanelen behöver du WPForms Pro version. Det finns även en WPForms Lite version som du kan använda gratis, som skickar e-postmeddelanden om alla dina formulärposter.
Först måste du installera och aktivera WPForms plugin. För mer information, se vår guide om hur du installerar ett WordPress-plugin.
Därefter måste du skapa ett onlineformulär med WPForms. Du kan kolla in vår steg-för-steg-guide om hur du skapar ett kontaktformulär i WordPress.
När du börjar ta emot formulärinmatningar måste du ange följande kod i ditt temas functions.php-fil. Om du gör det kan din webbplats gå sönder om du gör ett litet misstag, så vi rekommenderar att du använder den WPC-kod.
Kolla in vår guide om hur du enkelt lägger till anpassad kod i WordPress för mer information.
/**
* 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 'No entries found.
';
}
ob_start();
echo '
| ‘; echo esc_html( sanitize_text_field( $form_field[‘label’] ) ); kastade ut ‘ |
|---|
| ‘; foreach ( $entry_fields as $entry_field ) { if ( absint( $entry_field[‘id’] ) === absint( $form_field[‘id’] ) ) { echo application_filters( ‘wpforms_html_field_value’, wp_strip_all_tags( $entry_field[‘value’] ), $entry_field, $form_data, ‘entry-frontend-table’ ); ha sönder; } } kastade ut ‘ |
‘; $output = ob_get_clean(); returnera $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-pluginDu måste ange följande kortkod på valfri sida eller post för att visa formulärposterna.
[wpforms_entries_table id="FORMID"]
Byt bara ut FORMID med ditt formulär-ID.
Du hittar formulärets ID genom att gå till WPForms » Alla formulär och tittar sedan på kolumnen Kortkod.
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 “Shortcode”-block.
När du har lagt till blocket anger du bara din kortkod.
Förhandsgranska nu din WordPress-sida och klicka på knappen “Publicera” högst upp.
Så här såg förhandsvisningen av våra formulärposter ut i gränssnittet:
Du kan anpassa displayen ytterligare med anpassade CSS-stilar efter behov.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar WordPress-formulärposter på din webbplats. Du kanske också vill se vår guide om hur du skapar ett anpassat WordPress-tema eller våra expertval för de bästa kontaktformulärpluginerna för WordPress.
