Form within a form issue with Paypal buttons - php

Question

I am having an issue with the test PayPal button I created, were it won't fire correctly when placed inside my contact form on my contact.php page. I know that another form cannot exist inside an already created form. I am using PHP to email the form once submitted and I am using "php echo htmlspecialchars($_SERVER["PHP_SELF"])" to provide some sort of feedback once submitted as well. I do not know AJAX and my PHP knowledge is pretty beginner as well. How can I get the PayPal button to still work inside my form and transfer my user to the Paypal payment page while still providing the feedback on site page? This is my code so far:
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]) ?>" method="POST">
<div class="form-group row">
<div class="col-sm-12 col-md-6">
<label for="firstname" class="col-form-label">Name</label>
<input type="text" class="form-control" name="name" id="name" required>
</div>
<div class="col-sm-12 col-md-6">
<label for="firstname" class="col-form-label">Email</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
</div><!--end form-group row-->
<div class="form-group row">
<div class="col-sm-12 col-md-6">
<label for="phone" class="col-form-label">Phone Number</label>
<input type="text" class="form-control" name="phone" id="phone" required>
</div>
<div class="col-sm-12 col-md-6">
<label for="address" class="col-form-label">Address</label>
<input type="text" class="form-control" name="address" id="address" required>
</div>
</div><!--end-form group row-->
<div class="form-group row">
<div class="col-sm-12 col-md-4">
<label for="city" class="col-form-label">City</label>
<input type="text" class="form-control" name="city" id="city" required>
</div>
<div class="col-sm-12 col-md-4">
<label for="state" class="col-form-label">State</label>
<input type="text" class="form-control" name="state" id="state" required>
</div><div class="col-sm-12 col-md-4">
<label for="zipcode" class="col-form-label">Zipcode</label>
<input type="text" class="form-control" name="zipcode" id="zipcode" required>
</div>
</div><!--end form-group row-->
<div class="row">
<div class="col">
<textarea rows="10" class="form-control" id="groceries" name="groceries" placeholder="LIST SPECIFIC ITEMS (eg: Publix brand gallon of milk or Winn Dixie brand eggs)" required></textarea>
</div>
</div>
<!--Paypal-->
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="5WVQ7ZJD3FDTW">
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<!--End Paypal-->
<!--<button class="send-btn" type="submit">Order Now!</button> OLD SUBMIT BUTTON-->
</form>

Answer 1

You need to change the tags, since you have to use form in order to utilize the paypal button. You need to use the div tag on the first form tag you used.