Campo de formulário HTML - Como exigir um formato de entrada

O que eu quero fazer aqui é exigir que os números de telefone sejam inseridos no meu formulário HTML como (XXX) XXX-XXXX e que os números SS sejam inseridos como XXX-XX-XXXX. É isso aí.

A única razão pela qual estou fazendo isso é para que os resultados do envio do formulário sejam consistentes e fáceis de exportar para o Excel.

Disseram-me para usar o Javascript para fazer isso, mas talvez eu não tenha avançado o suficiente para entender todas as etapas para fazer isso.

Alguém pode me indicar a direção certa, lembrando que sou iniciante?

Uau, muito obrigado Ethan e @ suman-bogati! Estou quase lá agora! O campo agora exibe um erro informando para usar o formato correto de 555-55-5555. Isso é ótimo. Mas não importa o que eu entre, entre nesse campo, o pop-up persiste. Eu tentei 555-55-5555 e também 555555555 e nenhum deles é aceito. Aqui está o HTML para esse campo:

<label>
            Social Security Number:
            <input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
                title="Expected pattern is ###-##-####" />
        </label>
</div>
    <script>$('form').on('submit', function(){
        $(this).find('input[name="SocialSecurity"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
    $(this).find('input[name="ssn"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
});</script>
    <br />

questionAnswers(4)

yourAnswerToTheQuestion