Why is Form at the Top?

I have added user registration shortcode at the bottom ofmy html. Why is the output appearing at the top? How can I fix this? MY HTML (I know its a mess):

 <div data-tabs class="mk_smart-tabs"><div class="smart-tab"><input type="radio" name="tabgroup" id="tab-1" checked><label for="tab-1">Login</label><div class="smart-tab__content"><div style="margin-top:20px;padding:20px 20px 0px 20px;" class="mk-row"><div class="mk-row-inside"><div class="mk-column"><p class="i-am-roboto" style="text-align:left;margin-bottom: 20px;">Login/Sign up with Facebook</p><hr style="margin-bottom:20px;" /><p>
<a href="https://edu.databoy.space/unza/login/?loginFacebook=1&redirect=https://edu.databoy.space/unza" onclick="window.location = 'https://edu.databoy.space/unza/login/?loginFacebook=1&redirect='+window.location.href; return false;"><div class="new-fb-btn new-fb-4 new-fb-default-anim"><div class="new-fb-4-1"><div class="new-fb-4-1-1">Login/Sign up with Facebook</div></div></div></a></p></div><div class="mk-column"> <div id="sign_me_in"><p class="i-am-roboto" style="text-align:left;margin-bottom: 20px;">Log In with username/email</p><hr style="margin-bottom:20px;" />[do_widget id=bp_core_login_widget-2]
</div></div></div></div> </div> </div><div class="smart-tab"><input type="radio" name="tabgroup" id="tab-2"><label for="tab-2">Sign up</label><div class="smart-tab__content"><p>Sign up with your email Below. To create an account with social account click the button in the 'Login' tab</p><div style="padding-top:20px;" id="sign_me_up"><hr style="margin-bottom:10px;margin-top:20px;" />[user_registration_form id="236"]</div></div> </div></div></div></div>

But in the last line you’ll see this “[user_registration_form id=”236″]”. Please help, I have provided a link.

The page I need help with: [log in to see the link]