Shortcode does not render my form, rather showing its name as text

Question

I have started learning WordPress recently. I am trying to create a custom form for users to post data using a custom post type which I have created without plugin. For this I have created a custom plugin and activated it from admin. But when the page loads I don't see the form, rather it displays the name of shortcode as text. I already checked another StackOverflow post Shortcode rendering as text not as shortcode should but could not understand properly how it relates to my problem.

My plugin looks like this:

<?php
/*
Plugin Name: Custom frontend entry form
Description: Custom frontend entry form for publishing trip reports by users
Version: 1.0
Author: Subrata Sarkar
*/

/* Register Custom Post Type */
function trip_report_init() {
    //Set up labels
    $labels = array(
        'name' => 'Trip Report',
        'singular_name' => 'Trip Report',
        'add_new' => 'Create New Report',
        'add_new_item' => 'Create New Report',
        'edit_item' => 'Edit Trip Report',
        'new_item' => 'New Trip Report',
        'all_items' => 'All Trip Reports',
        'view_item' => 'View Trip Report',
        'search_items' => 'Search Trip Reports',
        'not_found' => 'No Trip Report Found',
        'not_found_in_trash' => 'No Trip Report found in Trash',
        'parent_item_colon' => '',
        'menu_name' => 'Trip Reports'
    );

    //register_post_type
    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'show_ui' => true,
        'capability_type' => 'post',
        'hierarchical' => false,
        'rewrite' => array('slug' => 'trip-reports'),
        'query_var' => true,
        'menu_icon' => 'dashicon-normalize',
        'supports' => array(
            'title',
            'editor',
            'excerpt',
            'comments',
            'author',
            'thumbnail',
            'page-attributes'
        )
    );

    register_post_type('trip_report', $args);

    //register taxonomy
    register_taxonomy('report_category', 'trip_report', array(
        'hierarchical' => true,
        'label' => 'Report Category',
        'query_var' => true,
        'rewrite' => array('slug' => 'report-category')
    ));

    //echo 'Trip report entry form';
}
add_action('init', 'trip_report_init');
/* Ends registration */

/* Build the form */
function trip_report_entry_form() { ?>
    <form id="trip-report-entryform" name="trip-report-entryform" method="post" action="">
        <div class="row">
            <div class="col-md-12">
                Report title <i class="red-text">*</i>
                <input type="text" id="txtTitle" name="txtTitle" class="form-control" maxmaxlenght="30" required />
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <input type="submit" value="Submit" class="btn btn-primary text-small" />
            </div>
            <div class="clearfix"></div>
        </div>
    </form>
<?php }
/* Ends form */

add_shortcode('new_trip_report', 'trip_report_entry_form');

//if ( shortcode_exists( 'new_trip_report' ) ) { echo "The shortcode exists";}

?>

But when I add the shortcode in a page content editor, the page does not render the form rather it only displays the name of the shortcode as text.

Screenshot:

I referred http://teachingyou.net/wordpress/wordpress-post-from-the-front-end-with-a-custom-post-type/

To my knowledge I could not find any difference between the reference code and that of mine. What is wrong in my approach?

Answer 1

There are 2 issues in your code.

1. Shortcodes should return a value; they shouldn't output directly.
2. Your shortcode is registered as new_trip_report while you're attempting to use new-trip-report

Return the HTML in your shortcode callback and update the registration.

function trip_report_entry_form() {
   return '<form id="trip-report-entryform" name="trip-report-entryform" method="post" action="">
        <div class="row">
            <div class="col-md-12">
                Report title <i class="red-text">*</i>
                <input type="text" id="txtTitle" name="txtTitle" class="form-control" maxmaxlenght="30" required />
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <input type="submit" value="Submit" class="btn btn-primary text-small" />
            </div>
            <div class="clearfix"></div>
        </div>
    </form>';
}
add_shortcode( 'new-trip-report', 'trip_report_entry_form' );

Further reading: https://codex.wordpress.org/Function_Reference/add_shortcode

Answer 2

In the post editor, make sure your characters aren't being escaped. On the top right of the content editor, switch from Visual to HTML. Your shortcode brackets come up as [ and ] if they're being escaped.

Answer 3

The problem is your function trip_report_entry_form not returning anything.

replace that function with these codes:

function trip_report_entry_form($atts) {
    $out = '';
    $out .='<form id="trip-report-entryform" name="trip-report-entryform" method="post" action="">
                <div class="row">
                    <div class="col-md-12">
                        Report title <i class="red-text">*</i>
                        <input type="text" id="txtTitle" name="txtTitle" class="form-control" maxmaxlenght="30" required />
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="submit" value="Submit" class="btn btn-primary text-small" />
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>';
    return $out;
 }