Help to make my form select/dropdown pre-selectable! 🤖

Design help Custom code
1

Hello, guys! Please help me to write code to make my dropdown pre-selected. Here is my website on Webflow: Webflow - Getzing
And here is published one: https://www.getzing.pp.ua/
There are three cards offering three different plans. When you click one of these buttons the pop-up form appears with dropdown, which contains three options with text — one for each plan: “First option”, “Second option”, “Third option”. How can I make the dropdown to be pre-selected in popup form after pressing one of these three buttons (corresponding to each plan)? I used Finsweet attributes to bond the form select (which is hidden) with stylized dropdown. :space_invader:

2

In the Webflow Designer, assign unique IDs to each option in your dropdown. For example, you can use IDs like firstOption, secondOption, and thirdOption.
Go to the page settings and add a custom code embed. This code will contain the JavaScript logic to pre-select the dropdown based on the plan selected.
Write a script to be embedded in the custom code. Below is a sample script assuming you have jQuery available (Webflow uses it by default). If not, you may need to include jQuery in your project.

```javascript
<script>
    $(document).ready(function () {
        $('.popup-button').on('click', function () {
            var selectedPlan = $(this).data('plan');
            $('#dropdown').val(selectedPlan).change();
        });
    });
</script>
```
  • In this example, .popup-button is the class assigned to your plan buttons, and data-plan is an attribute that holds the corresponding dropdown option ID.
1 Like
3

Thank you for your reply! Unfortunately, I can’t assign IDs to the options in dropdown, because it has only one option with a link, which contains Finsweet attributes to auto generate options from the hidden select options after the site is published. I guess I need the code which allows to find these options after publishing and make one of them pre-selected depending on which button was pressed. I’m starting to think that perhabs it would be better to create the custom select from scratch with JS.

4

Hello Denis, have you managed to find a solution for this? I’m facing the same difficulty in implementing this functionality. Additionally, the integration of finsweet attributes for binding CMS items to a select field has me uncertain about whether it simplifies matters or poses a potential obstacle to any solution that may be found.

1 Like
5

Hello! I desided to give up Finsweet implementation and just wrote my custom select using hidden input bonded to drop-down, which could be fully customizable. Here is my code both in vanilla JS and jQuery on GitHub: https://github.com/denkhr/custom-pre-select
There are also 3 buttons there for pre-selection options in this custom select.