You can create 3 hidden forms and change the visibility based on the role selection change with a function.

or better use AJAX to change the form tag innerHTML according to your requirements. create 3 separate html files(form1.html,form2.html,form3.html) and add your inputs for each forms. In the main file use the ajax to load the forms.

<select onchange="loadForm(this.value)">
    <option value="">select a role</option>
    <option value="form1">Salse</option>
    <option value="form2">Admin</option>
    <option value="form3">Customer</option>
</select>

<form action="" id="form">Select a role Please</form>

<script>
    
    function loadForm(formName) {
        if(role !=""){
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("form").innerHTML =
                    this.responseText;
                }
            }
        xhttp.open("GET", formName+'.html', true);
        xhttp.send();
    }else{
        document.getElementById("form").innerHTML = "Select a role Please"
    }
};
</script>

1. Set an input that users will choose so you know if they are a buyer, seller, or agent. This can be radio buttons or a select input. Call this "input1"
2. Create your three forms and keep them hidden.
3. Put an event listener on the "input1" so if the user clicks or selects, you display the respective form.

If you don't want any being able to manipulate your forms, you can have your form html added/appended or removed by javascript so that the forms are not easily available with few website manipulations.