Join the pack!
Are you tired of being nice and behaving? Come and kick some ass with us while rocking those fishnets!
Oops! Something went wrong while submitting the form.
Oops! Something went wrong while submitting the form.
Let's say you are a roller derby team and you want to recruit some new staff members and also new players. You have an awesome website and you want to add a form for collecting info from the people who might be interested in joining.
Now, you need to collect specific info for those wanting to join the team and a different type of info for those wanting to join the staff. You want to show this as a Tabs element: one tab for rookies and another one for advanced skaters.
So far everything looks good and it works, but then you're asked to add a couple of call to action buttons that would take you directly to the desired form and also to focus the first input field so it catches the user's attention. Here's where Slater AI comes into the game.
Here's how I first approached it, my first prompt:
I have a Tabs element with two tabs, each has a form inside. Now, the first thing I need to create is a function that triggers when a button with the ID "rookie-btn" is clicked, this will scroll the page to the section with ID "top" and will check if the current tab is the one with ID tabRookie if not, we need to add it the class w--current and remove this same class from the other tab. Then, we also need to set the input field with ID "rookie-name" to focus.
So that didn't work (not at first at least) I got too many errors and it wasn't working as expected. I attribute this to the fact that I was giving Slater too much information for one single prompt, so what I did next was to separate each action that I wanted done and ask Slater one by one.
This was my action list:
1. Scroll to top when button clicked.
2. Check if tab (menu) has class "w--current" if not, add it and remove it from the other tab.
3. Check if tab (pane) has class "w--tab-active" if not, add it and remove it from the other tab.
4. Focus the input field with class "is-focus"
I prompted each action to Slater and this is what I got for actions 1 to 3:
So far everything looks good and it works, but then you're asked to add a couple of call to action buttons that would take you directly to the desired form and also to focus the first input field so it catches the user's attention. Here's where Slater AI comes into the game.
Here's how I first approached it, my first prompt:
I have a Tabs element with two tabs, each has a form inside. Now, the first thing I need to create is a function that triggers when a button with the ID "rookie-btn" is clicked, this will scroll the page to the section with ID "top" and will check if the current tab is the one with ID tabRookie if not, we need to add it the class w--current and remove this same class from the other tab. Then, we also need to set the input field with ID "rookie-name" to focus.
So that didn't work (not at first at least) I got too many errors and it wasn't working as expected. I attribute this to the fact that I was giving Slater too much information for one single prompt, so what I did next was to separate each action that I wanted done and ask Slater one by one.
This was my action list:
1. Scroll to top when button clicked.
2. Check if tab (menu) has class "w--current" if not, add it and remove it from the other tab.
3. Check if tab (pane) has class "w--tab-active" if not, add it and remove it from the other tab.
4. Focus the input field with class "is-focus"
I prompted each action to Slater and this is what I got for actions 1 to 3:
So it was working for the Rookie button, but now I needed the same functionality for the Pros button, so I basically duplicated the event listener and did the necessary adjustments:
The last remaining action (number 4) was to focus the input field to catch attention. This was the prompt:
We need to add one more action inside the buttons' event listeners, we need the input fields with class "is-focus" set to focus state.
I added that last code snippet to both of the event listeners and that was it! 🎉
Here's the full code:
We need to add one more action inside the buttons' event listeners, we need the input fields with class "is-focus" set to focus state.
I added that last code snippet to both of the event listeners and that was it! 🎉
Here's the full code:
I added this script as custom code in the footer section of this page for showcase purposes, but let's have in mind that the most efficient way to use Slater is linking it with your Webflow project, so all the code is hosted in Slater, and also that way you can update faster an easier than having to publish your site every time. You can learn more about how to link your projects here.
And now let's give it a try!👇