Out of the box forms provided by Mycrosoft Dynamics CRM give us the flexibility to communicate with data coming from or data entering the product itself. Sometimes we need to communicate with external websites or get better control over the form using our own elements and showing them as we want. Good example to this would be the ability to add buttons or simple HTML picklist (select HTML element) to the form. Both of these are handled easily with the use of custom HTML page incorporated into the form.
How to add a custom HTML page to the form?
The first thing to know when it comes to using custom HTML page on the form is that it has to be added as a form field to which we then attach this page. Once we open the form in the editor ribbon we will see an “INSERT” tab with the “Web Resource” button in it.

ribbonn

Assuming that we already have the HTML page as a web resource created we will have an option to create a field and associate it with the web resource.

createCustomHtml

Once we have created a field and attached the HTML web resource to it we can then find the field under the form “Field Explorer” and drag and drop it onto the form. From this point on we add the content to our web resource, attach javascript files to it (if we need it) and implement the logic.
Tip: In order to access elements located on the custom HTML page from the CRM form we need to get control over the web resource, it’s DOM and finally the element itself.
Example:
var myHtml = Xrm.Page.ui.controls.get(“WebResourceFieldName”);
var htmlDOM = myHtml.getObject().contentWindow.document;
var DOMelement = htmlDOM.getElementById(“NeededElementId”);