How to make this advanced form landing page

Design help Design inspiration
1

Hi,
I am tasked with making a landing page in webflow inspired by this one : https://www.goensol.com

The landing page part is easy. But the simulation/form part is not.

There is many things I don’t know how to do :

  • The Google Maps integration to auto-fill locatioon while typing
  • The Google Maps integration to show the location just after entering and opening the form
  • The clickable map with auto calculated solar data (our engineers have this data, but how do I make the interaction in webflow)
  • The slider that does real time calculations

As a tech savy marketer I guess I am way over my head with this hahaha…
And I will probably need to ask help to our software engineers.

But if you have any idea of tools / libraries / tutorials on any of those, I will gadly take the help !

Thank you so much

2

1 and 2 are pretty straightforward integrations using Google Maps APIs.
I remember Finsweet has a youtube video walking through the code and integration work that you should be able to find.

Check for cloneables as well.
You might also want to consider Mapbox, depending on your presentation goals.

3 and 4 are custom to your specific business logic, so you’d have to break that down. If users are just randomly clicking anywhere, you might get lat/long and address to work with as part of a click event. If you’ve pre-created pins and loaded data then you’ll know which pin they clicked.

Google maps or mapbox take care of most of the work regarding the pop-up that would appear, you just have to create the content and HTML, not the display interaction.

But based on what you’re describing, I’d think that click the map or pin would display info in the side panel instead, so that it can be part of the inputs to a calculator.

3

Hi @memetican, sorry for the late reply. Thank you so much for your answer.

In the end, because we already have developed a simulator, both back end and front end, all we need to do is connect the backend with the new webflow front end. There is a tool for that, called Wized. So in association with the developer, we’ll be able to do it.

Have a nice day!