Navigating to new form from exclusively html page

Anvil Q&A
1

Does anybody know how to navigate to a new form from a page that is exclusively HTML?

For instance, I made a custom landing page using only the html editor and I would like for users to be able to click “Sign Up” and have that click redirect to an “Auth” form I created. Not sure what the appropriate href is.

Thanks for your help.

2

Hi there,

Well there are probably fancier solutions, but one idea is the following:

Now, in this example I put the HTML form and the button inside an XYPanel just so I could overlap the components (if that is desired). However, certainly you could use any other container component.

Try the clone!
https://anvil.works/build#clone:XZKGG5K5U3JU4DSP=W6A3WXWAOTWFBDEIA57324MK

com-video-to-gif%20(5)
ezgif.com-video-to-gif (5).gif800×450 37.5 KB

1 Like
3

Another way would be to use a JS to Anvil callback ( Anvil | Reference)

So in your custom HTML page (which I’m assuming is a custom HTML form in Anvil) you would create a function like this (edited from the docs page and tested as working) :

<a class="my-link" href="#">Click me</a>

<script>
$('.my-link').on('click', function(e) {
  var linkElement = this;
  anvil.call(linkElement, "fromjs_openform");
  e.preventDefault();
});

</script>

Then in your custom html form class, put this function :

  def fromjs_openform(self, **kwargs):
    open_form('Form1')

Here’s a demo app :
https://anvil.works/build#clone:YIJ5C5CWFDPLAZZO=KJSYVHCC5WNK5BVSGAJPSTA2

3 Likes
4

Thanks guys! Ended up going with the callback approach and it worked great. Much appreciated.

1 Like