Custom HTML Forms

When adding a Form to your Anvil app, you have a choice of styles to choose from. The exact choices depend on which theme you chose, but there is always the option to add a Custom HTML Form:

Editing Custom HTML

You can set the raw HTML of a Custom HTML form to anything you like by clicking the ‘Edit’ button in the Properties Panel

This will open the HTML Editor at the bottom of the Form Editor, and you can expand the panel by clicking the separator bar:

This will open the HTML Editor to the right of the Form Editor:

As you edit the HTML, you will see the changes appear live in the Form Editor. You can designate slots in the HTML to support dragging and dropping new components into your custom Form - see Custom HTML Templates for details.

Accessing elements

Any element in the form’s HTML that has an anvil-name="<name>" attribute can be looked up in the dom_nodes property of the form, which is a dictionary mapping names to DOM nodes.

For example, if your form’s HTML contains the element <div anvil-name="main-div">...</div>, then you can find its DOM node with self.dom_nodes["main-div"].

These objects are real Javascript HTMLElement objects, and you can access their properties and methods over Anvil’s Javascript-to-Python bridge. For example, to add a CSS class to the main-div element, you can use self.dom_nodes["main-div"].classList.add("some-class").

Tips

You can include any custom HTML you like into your form, including <script> and <style> tags, but if you are including third-party scripts then you should probably be using the Native Libraries feature to ensure they are loaded at the right time. For custom styles, you may prefer to edit the main style of your app instead.

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.