How do I redirect customers to a certain page after filling out a form?

[Forever-Curls]

I have a form where I am redirecting customers to a different page depending on which option they select in one of the fieldsets. I am trying to use the {% if form.posted_successfully? %} hook to trigger the page redirect, but it is not working correctly.  It just brings the page to a "prove you are not a robot" page and then back to the same form page. It appears that the {% if form.posted_successfully? %} is not being triggered. This is how my page looks.

<div class="page-width">
    <div class="grid">
      <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
        <div class="section-header text-center">
          <h1>{{ page.title }}</h1>
        </div>

        <div class="rte">
            {{ page.content }}
        </div>
        
        <div id="register-form" class="form-vertical">
            {%- assign formId = 'RegisterForm' -%}
            {% form 'contact', id: formId %}
            {% include 'form-status', form_id: formId %}
            
            {%- if form.errors -%}
                <div class="form-message form-message--error">
                    {{ form.errors | default_errors }}
                </div>
            {%- endif -%}
            
            <div class="grid grid--half-gutters">
                <div class="grid__item medium-up--one-half">
                    <label for="user-type">I am a</label>
                    <select name="user-type" id="user-type" autofocus >
                        <option disabled selected value>Select an option</option>	
                        <option value="Salon-Owner">Salon Owner</option>
                        <option value="Stylist">Stylist</option>
                    </select>
                </div>
            </div>
  
            <div class="grid grid--half-gutters">
                <div class="grid__item medium-up--one-half">
                    <label for="tickets">How many tickets would you like to purchase?</label>
                    <input 
                        type="number" 
                        min="1" max="15" 
                        name="tickets" 
                        id="tickets" 
                        autofocus
                        >
                </div>
            </div>

            <div class="grid grid--half-gutters">
                <div class="grid__item medium-up--one-half">
                    <label for="pre-register">Would you like to pre-register for Curl Certification?</label>
                    <select name="pre-register" id="pre-register" aria-required="true" autofocus>
                        <option disabled selected value>Select an option</option>	
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
            </div>
            
            <div>
                <p>Please provide each attandee's name, email, phone, salon address, Instagram, and TikTok handle</p>
                <div id="add-btn" class="btn" onclick="addFields(document.getElementById('tickets').value)">Add Fields</div>
            </div>

            <div id="attendee-info"></div>

            <div class="text-center">
                <input id="register-submit" type="submit" value="Submit" class="btn">
            </div>

            {% if form.posted_successfully? %}
                <script>
                    console.log('form posted successfully!');
                    const e = document.getElementById("pre-register");
                    const selection = e.options[e.selectedIndex].value;
                    if (selection === 'Yes') {
                        window.location.href = "https://ouidad-education.myshopify.com/products/curl-confidence-with-curl-certification-pre-registration";
                    } if (selection === 'No') {
                        window.location.href = "https://ouidad-education.myshopify.com/products/curl-confidence";
                    }
                </script>
            {% endif %}

            {% endform %}
        </div>	
      </div>
    </div>
</div>

If I use an onclick() method my page redirects work correctly. Here is an example:

<div id="test-btn" class="btn" onclick="redirect();">Test Redirect</div>
<script>
    function redirect() {
        const e = document.getElementById("pre-register");
        const selection = e.options[e.selectedIndex].value;
        console.log('firing redirect', selection);
        if (selection === 'Yes') {
            window.location.href = "https://ouidad-education.myshopify.com/products/curl-confidence-with-curl-certification-pre-registration";
        } if (selection === 'No') {
            window.location.href = "https://ouidad-education.myshopify.com/products/curl-confidence";
        }
    }
</script>

 
I need this page to submit the information to be stored in Shopify so I can receive emails with information from this form.

[Forever-Curls]

I realized I am using the contact form on two pages. Will this lead to issues? I noticed when testing my contact form it brings me to the registration form page. I basically have two forms on my store. There is the Contact Us page and then there is a Register page for capturing information about our client. The register page is using the contact form as well. I need the register page, which is shown above, to save the information and email the information over to us. 

[Jferguson1]

Did you ever manage to work out how to automatically redirect users once they submit? Thanks