Customizing the ListForm template in Visual Studio

Question

I'm trying to customize the ListForm template used in the webpart that displays information about a list in the EditForm.aspx, NewForm.aspx and DispForm.aspx pages

I want to add 2 buttons within the webpart the Disp form next to the "Close"(Fermer) button wich will trigger different functions :

And in the New end Edit forms, I want to add more fields to fill depending on other infos selected, ex:
one of the field would be a radio button control indicating if wether or not you want to add a contact
If the button is cilcked and active, another field would show up where you can select a contact

I've made some research about it and tried a few things :

Making another webpart below the existing one with a JavaScript code and 2 buttons, that does the work for the DispForm but looks awful

I have found the different pages in SharePoint designer but I didn't find a way to modify the webparts from there

Can I also do it using Visual studio ?
Is there a way to use the ListFormWebPart class ?
Or do I have to write the WebPart myself from scratch ?

EDIT :
For anyone looking for an official tutorial : https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/customize-a-list-view-in-sharepoint-add-ins-using-client-side-rendering

EDIT 2
Here's the full working code that solved my problem, in case anyone wanted it :

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
    {
        OnPostRender: function(ctx){
            if(ctx.ListSchema.Field[0].Name == 'Attachments')
                ManageButtonTemplate(ctx.ListSchema.Field[0]);
            }
    });

function ManageButtonTemplate(item)
{
    var identifier = 'ctl00_toolBarTbl_RightRptControls_ctl01_ctl00_diidIOGoBack';
    var buttonNode = document.querySelector('input[id*="' + identifier + '"]');

    AppendButton(buttonNode.parentElement, "Valider", "true");
    AppendButton(buttonNode.parentElement, "Refuser", "false");
}

//Configuration et ajout du bouton demandé à une balise donnée
function AppendButton(node, name, status)
{
    var button = document.createElement("input");
    button.type = "button";
    button.value = name;
    button.id = name;
    button.name = name + "Button";
    button.onclick = function() {
            new ManagementAction(status);
        };

    node.appendChild(button);
}

Answer 1

I advise you the CSR (Client-Side Rendering) way by deploying a custom JavaScript file to you SharePoint site (site assets, style library or CDN).

• Here an excellent article with sample codes.
• Here more answers from the community

Enjoy.