Filtering and redirect to page

Community resources General
1

Hello everyone,

I am very new to creating websites and unfortunately have no idea about programming at all and am therefore currently stumbling across the following problem. I have already searched the web but can’t find an exact solution. I have to create buttons in Webflow which, when selected, redirect you to a contract. There are a total of 6 buttons that represent certain preferences and should redirect the customer to one of a total of 2 contracts. Only one or more buttons can be selected. Unfortunately, I have not yet started a workspace that I could link here, as I still lack the approach. I had thought about CMS filtering, but that doesn’t seem to make sense for this problem, or conditional visibility. Maybe there is someone here who can kindly give me a tip, I would be very grateful :slight_smile: Many thanks in advance.

Max

2

Hey Max, unfortunately your breakdown is a bit incomplete to offer specific advice.
In general it would depend on your business logic during the options selection.

You might be able to do it just with interactions, e.g. click one button, now you are shown 3 more buttons to choose from. Click second button, now you are given your PDF contract.

Custom code is probably the right way to do it as it’s the only versatile way to express business logic.

You might look at some progressive forms options too like;

1 Like
3

Hello Michael,

thank you very much for your quick reply and please forgive my brief paraphrase. The website is to be created for a fitness studio. The 6 buttons are created as a grid on the homepage. On the buttons are personal preferences such as, for example, interested in yoga, nutrition, muscle building, back pain. The two contracts are for two departments of the fitness studio, one is a health center and the other is a classic gym. Depending on what you click on, you will either be referred to the health center or the gym, depending on your preferences. So you can see the 6 buttons as a quiz. So your suggestion is in the right direction, many thanks again. According to the AI, I should do the following:

  1. Add a button element to your Webflow page.
  2. Add a custom attribute to each button that specifies the URL of the contract it should redirect to.
  3. Write JavaScript code that captures the URL of the selected button(s) and redirects the user to the appropriate contract.

Here’s an example code snippet that you can use as a starting point:

// Get all the buttons on the page
var buttons = document.querySelectorAll('.my-button-class');

// Add a click event listener to each button
buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    // Get the URL of the selected button
    var url = button.getAttribute('data-contract-url');
    
    // Redirect the user to the appropriate contract
    window.location.href = url;
  });
});

You will need to replace .my-button-class with the class name of your button element and data-contract-url with the name of the custom attribute you added to each button.

4

The script you have there won’t get you what you need, it’s no different from a link. Click the button and it will navigate.

But you’re headed in the right direction, it will depend entirely on the business logic and UX you need.

Drop me a message if you need some dev work done.

It does sound as though a filter might be well suited for this if your business logic is 1:1.
e.g. if they click yoga or muscle building, they get the fitness studio. If they click nutrition or back pain they get the health center. If they choose a combination, they might see 2 cards at the same time. Click the card will take them to that part of the site… something like that.