Customize List form with JS/Css

Hi All,

Am trying to build list form using SP.UI.ModalDialog.showModalDialog JS Modal.

I will have button on the Portal page, where user click the button and open the modal.

The list is for a questions purpose. I have sample picture below, I would like to build. 

Any help would be nice.

<script type="text/javascript">
    function openDialog(dialogUrl) {
        var options = {
            url: dialogUrl,
            showMaximize: true,
            showClose: true,
            dialogReturnValueCallback: function () {
                window.location.href = window.location.href
            }
        };
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    }
</script>

<a class="button" href="javascript:openDialog('https://siteName/_layouts/15/listform.aspx?PageType=8&ListId=ListIDNUmber&RootFolder=')">
    Submit Your Idea
</a>



---

Abenet