Contact form 7 shortcode appear outside form tag

by

It’s because your shortcode echoes the output than returning it — shortcodes should not echo the output, but return it — unless in certain cases like complex HTML markup in the output, where you need to use output buffering.

So your code should look like:

function cf7_shortcode() {
    return '<span>test shortcode</span>';
}
add_shortcode( 'cf7_shortcode', 'cf7_shortcode' );