Resgistration Form not working

I’m trying to create a separate registration page for new customers, I successfully created one for the login page by creating a new login file and access it using the following code in functions.php

//create a new shortcode for login PHP and input the shortcode on the created page.
function custom_sign_in( $atts ) {
  return woocommerce_get_template( "myaccount/form-login-custom.php" );
}
add_shortcode('custom_sign_in', 'custom_sign_in');

I just created a new page then used the created shortcode for login php.

then the code of login PHP is from the original file of woocommerce/my-account/form-login.php, I just added some class to the elements and hide the registration form via CSS.

Now, with the registration page, I do the same. Unfortunately, it doesn’t work. When I tried to click the submit button, nothing works, even hitting enter from the keyboard is not working not even reloading the page. I think I’m missing something but I can’t figure out what it is.

here’s the code for the registration php, I just added some class to the elements to hide the login form.

<?php
/**
 * Login Form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 4.1.0
 */

if ( !defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

do_action( 'woocommerce_before_customer_login_form' );
?>

<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

<div class="u-columns col2-set customer_registration" id="customer_login">

	<div class="u-column1 col-1">

		<?php endif; ?>

		<h2>
			<?php esc_html_e( 'Login', 'woocommerce' ); ?>
		</h2>

		<form class="woocommerce-form woocommerce-form-login login" method="post">

			<?php do_action( 'woocommerce_login_form_start' ); ?>

			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="username">
					<?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span>
				</label>
				<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>"/>
				<?php // @codingStandardsIgnoreLine ?>
			</p>
			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="password">
					<?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span>
				</label>
				<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password"/>
			</p>

			<?php do_action( 'woocommerce_login_form' ); ?>

			<p class="form-row">
				<label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
					<input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span>
				</label>
			
				<?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
				<button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>">
					<?php esc_html_e( 'Log in', 'woocommerce' ); ?>
				</button>
			</p>
			<p class="woocommerce-LostPassword lost_password">
				<a href="<?php echo esc_url( wp_lostpassword_url() ); ?>">
					<?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?>
				</a>
			</p>

			<?php do_action( 'woocommerce_login_form_end' ); ?>

		</form>

		<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

	</div>

	<div class="u-column2 col-2">

		<h2>
			<?php esc_html_e( 'Register', 'woocommerce' ); ?>
		</h2>

		<form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >

			<?php do_action( 'woocommerce_register_form_start' ); ?>

			<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>

			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="reg_username">
					<?php esc_html_e( 'Username', 'woocommerce' ); ?>
				</label>
				<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>"/>
				<?php // @codingStandardsIgnoreLine ?>
			</p>

			<?php endif; ?>

			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="reg_email" class="csx-custom-label">
					<?php esc_html_e( 'E-Mail Address', 'woocommerce' ); ?>
				</label>
				<div class="csx-custom-input"><i class="fas fa-at csx-custom-form-icon"></i><input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>"/>
				</div>
				<?php // @codingStandardsIgnoreLine ?>
			</p>

			<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="reg_password" class="csx-custom-label">
					<?php esc_html_e( 'Password', 'woocommerce' ); ?>
				</label>
				<div class="csx-custom-input"><i class="fas fa-key csx-custom-form-icon"></i><input type="password" class="woocommerce-Input woocommerce-Input--text input-text csx-password" name="password" id="reg_password" autocomplete="new-password"/><a href="#" class="btn-eye-show-password"><i class="fas fa-eye-slash"></i></a>
				</div>
			</p>

			<?php else : ?>

			<p>
				<?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?>
			</p>

			<?php endif; ?>

			<?php do_action( 'woocommerce_register_form' ); ?>

			<p class="woocommerce-form-row form-row">
				<?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
				<button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Continue', 'woocommerce' ); ?>">
					<?php esc_html_e( 'Continue', 'woocommerce' ); ?>
				</button>
			</p>

			<?php do_action( 'woocommerce_register_form_end' ); ?>

		</form>

	</div>

</div>
<?php endif; ?>

<?php do_action( 'woocommerce_after_customer_login_form' ); ?>

Anyway, I’m using Dokan plugin too.