I have created a custom postcode checker plugin, and a shortcode to add it to the site. The plugin functionality works, but it outputs my code at the top of the page.

How do I get it to output my code in the location I place the shortcode? I was told that I can use 'ob_start();' and return 'ob_get_clean();' but when I used that nothing happened. Or maybe I was doing it wrong. I would appreciate any advice.

The main plugin file contains the shortcode

function vw_postcode_check (){
    include_once ('check-postcode.php');
}
add_shortcode('postcode_checker', 'vw_postcode_check');

Then I have a separate PHP file check-postcode.php

<?php
/*-------------------------------------------------*/
/*-------------Check Postcode -----------------*/
/*-------------------------------------------------*/
?>
<style>
#postcode-checker-container {background:white; padding:40px; max-width:300px; border-radius:10px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); position:absolute; z-index: 100; top:200px;}
#postcode_checker input, #postcode_checker button {
  font: inherit;
  border: 0;
}
.check-postcode-link {cursor: pointer;color: #ffffff !important;
    font-size: 19px;
    line-height: 21px;
    text-transform: uppercase;
    font-family: "Trade Gothic W01 Cn_18";
    text-decoration:underline;}
#postcode_checker input:focus, #postcode_checker button:focus {
  outline: none;
}
form#postcode_checker {
  display: -webkit-box;
  display: flex;
  grid-column: 2;
  width:200px;
}

#postcode_checker input {
  -webkit-box-flex: 1;
          flex-grow: 1;
  padding: 0.5em 0.75em;
  border:1px solid #8DC63F;
}

#postcode_checker button {
  padding: 0.5em 0.75em;
  background: #8DC63F;
  color:#fff;
  font-weight:bold;
}
p.delivery_confirmed {font-size:16px; line-height:18px; font-weight:normal;}
p.delivery_notconfirmed {font-size:16px; line-height:18px; font-weight:normal;}
p.invalid {font-size:16px; line-height:18px; font-weight:normal; color:red;}
#checkDelivery {background:#fff; border-radius:10px; -webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30);
-moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30);
box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30); padding:40px; width:500px;}
</style>
<script>
// When the user clicks on div, open the popup

jQuery(document).on('click', '.check-postcode-link', function(event) {
    if ( !jQuery(event.target).hasClass('postcode-checker-container')) {
         jQuery(".postcode-checker-container").toggle();
    }
});

</script>

<div id="postcode-checker-container" class="postcode-checker-container">
  <h3>Please enter your postcode to check if we deliver to your area.</h3>
<form method="post" id="postcode_checker">
  <input type="postcode" name="postcode">
 <button type="submit" name="submit">Submit</button>
</form>

<?php
global $wpdb;
$table_name = $wpdb->prefix.'vw_postcode_checker';

if (!empty($_POST['postcode']))
{
    $postcode = $_POST['postcode'];
    if (Postcode::isValidFormat($postcode))
    {
      $district = Postcode::getDistrict($postcode);
    }
    else {

      echo '<p class="invalid">Please enter a valid postcode.</p></div>';
      return;
    }
    $entry = $wpdb->get_row( "SELECT * FROM ".$table_name." WHERE postcode = '" . $district . "'");
    if (isset($entry))
    {
        $town = $entry->town;
        $county = $entry->county;
        $your_area = $town . ", " . $county;
        $confirmed = "<p class='delivery_confirmed'>Congratulations, we are delivering to " . $your_area . "</p>";
         echo $confirmed;
    }
    else
    {
      $notconfirmed = "<p class='delivery_notconfirmed'>Sorry, we are not delivering to your area at this time.</p>";
      echo $notconfirmed;
    }
}
?>
</div>

Thank you