Embed code to a specific form

Anvil Q&A
1

What I’m trying to do:
I’m trying to embed different forms into different pages of a website

What I’ve tried and what’s not working:
I looked at HTTP endpoint but figured that’s the wrong way to go as its not embedding. I’m wondering if there is some magic to add the the embed code that will take users to a specific form?

2

I’m not at all sure I understand what you want to do. Here are some possibilities, if you could narrow it down that’d help.

  1. You have a form and you want another form to be a component of that form. You can do that just by dragging the subform from the left pane in the IDE onto the form you want to embed it on

  2. You have a main form and want to replace a subform as the user clicks navigation links. The basics of that are covered in the Anvil docs on navigation, under the Replacing Just The Main Content section: Anvil Docs | Navigation

  3. Something else entirely?

3

Oh man firstly let me say THANK YOU for the help/support!

Here’s the lowdown…

I have a webpage created with squarespace and I am using iframe to embed my anvil form.

The problem is - I want to embed say, FORM A into webpage A and FORM B into webpage B. But the embed code embeds the “startup form” only it seems.

So I was hoping that there is another way to embed specific forms ?

Many thanks,

Michael

4

You could always consider hosting the whole thing with anvil. You could create your own html template based on the existing squarespace site but add slots for dropping in anvil components.

5

Maybe, you could try and implement hash routing, which allows you to navigate to a particular form. GitHub-> Hash routing and Forum post → here

Hope I am of help! Good luck!

2 Likes
6

Got it. If you decide to continue with the static site embedding Anvil forms, then you need some way in the URL to say which form you want to embed. With Anvil, you need to use hash routing.

There’s a hash routing dependency that’s overkill for what you want, but might be worth checking out.

The basic idea, though, is to use a startup module instead of a startup form, and in that module look for the hash part of the URL and open the right form based on that. Documentation on accessing the hash part of the URL is here: Anvil Docs | Navigation

Or, you can go the route Owen mentions, creating the entire site in Anvil. In that case you do want the hash routing dependency as that allows each form to have a distinct URL: HashRouting: Routing, navigation with URL Hash

A third possibility is to use Anvil for the backend via HTTP endpoints, and build the front end in Javascript in an otherwise static HTML page. I did this for one project that needed a shopping cart in the static site, and it works but requires you muck about in Javascript.

2 Likes
7

Thank you very much! I’ll pursue the hash routing option. I didn’t even know that I could set a module as the startup.

Much appreciated :slight_smile:

1 Like
8

That’s an interesting idea but even then… if “Form 1” is set as the startup form, how would I give people a link that takes them directly to Form 3 or form 8?

9

If you’re using Anvil for the entire website, use the hash routing dependency linked above to get links to every form.

1 Like
10

Did you figure this out in the end? I tried using a Module but it looks like get_url_hash() is only available in forms. Trying to do the same thing as you.

11

Welcome to the forum.

You have better chances of getting a good answer if you create a new question instead of replying to this old one.

And you have even better chances if you describe what you are trying to do and what doesn’t work.

12

Hi :slight_smile:

Actually I just made another app that loaded info from the same database. It was easier at the time but now I think I’d work out using HTTP endpoints.

its actually very exciting - here’s some code that worked for me (not the same thing but an example)


 
@anvil.server.http_endpoint('/live_item2/')
def serve_content():
  response = anvil.server.HttpResponse(302, "Redirecting to Wikipedia...")
  response.headers['Location'] = "https://www.wikipedia.org"
  return response

when you’re doing this look at the bottom of the server page and it will tell you the URl link to start the web address off with.

:slight_smile:

13

Thanks! I’ll look into how this works.

14

Thanks again! This solution worked great. I was able to send a variable to the Anvil server and get a response back on the same webpage. For anyone else who tries this, I did need to add the following to avoid a server error:

  r = anvil.server.HttpResponse()
  r.headers['Access-Control-Allow-Origin'] = '*'
  r.headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
  r.headers['Access-Control-Request-Method'] = '*'
  r.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  r.status = 200

Then, my response was sent back as r.body