Webflow - Code to the Rescue

credit: Michael Wells

Here’s a very easy code script to make your form more dynamic on Webflow

This script will allow you to show or hide a form field based on a value selected on the previous dropdown

Here’s how you do it

We have here 2 form fields for example. Once the user selects “email” from there dropdown, we will show the next field, which is “Email Address”. It is important that you assign a value to the “email item” (This will be referenced in the custom script)

We will give an ID to the dropdown (Select Field). In this case, I named it “dropdown-ID” for ease of understanding

Next, we will wrap the field that will show in a Div block and give it an ID. In this case, I gave it “new-field-ID”

In the below example, we want the “Email Address” field to show once the user selects “Email me” from the dropdown. Make sure to give it a value. In this case, the value is “email”

Once this is done, just add the code script in Before body tag of the page. Or if the form is present in multiple pages, you can add the same code in project settings.

To understand how the code works quickly, here’s a quick summary,

1. The form gets updated, where the first function is to search for the value of the dropdown that you placed in the script (in this case, it will be placed in "enter-dropdown-value-here")
2. If the ID matches with what you placed, then the New-Field will show. Otherwise, it won’t
3. That’s it!

‍

‍

That’s it. Now publish and test the form!

cr: Milan

If you want to open a new tab on form submission on Webflow, this custom code snippet will do just that. Once the user submits the form, a new webpage will get opened that will be based on what you specified

‍

‍

If you add this to Page Settings > Custom Code > Before tag and try submitting the form - it should open a new tab with webflow.com/{input}

cr: RR Abrot

Ever wanted to know how to make a custom button with a notch in Webflow? Here’s how you do it,

Create an HTML embed and place the below script. Make sure to replace “test” with the button class (keep in mind that it doesn’t have to be a button component. It can be a normal div)

‍

‍

And play with the values as you want, save and see the changes happen right on the Webflow designer!

cr: Milan

If you want to open a new tab on form submission on Webflow, this custom code snippet will do just that. Once the user submits the form, a new webpage will get opened that will be based on what you specified

If you add this to Page Settings > Custom Code > Before tag and try submitting the form - it should open a new tab with webflow.com/{input}

cr: Sabanna

discourse page

If you want to know how to prevent the body from scrolling when a modal window is open, this custom code will do just that. This snippet works when you use Webflow’s Navbar Component and will prevent the page from scrolling when it is open

The custom code is long because there is a bug when iOS doesn’t prevent users from scrolling past the modal if there is content that exceeds the viewport height, despite adding overflow: hidden in the CSS.

iOS bug created in 2016 was solved only in May 2019 but they have no idea when it will be released.https://bugs.webkit.org/show_bug.cgi?id=153852

So the code is updated with additional enhancement which detects the device's OS and makes a bit of a different approach if it is iOS.

Publish the site and test it :)

cr: Jenna from Holy Moly Creative Studio

Usually, accordions for FAQs work in a way that isn’t UX friendly. Ideally, when one accordion is opened, the others should close automatically. This custom code will do just that

Make sure to add the interaction to the whole accordion div that contains the question and answer!

Start by pasting the custom code on the page where the accordions are

Attributes to add

1. Add data-click= “Accordion” and role=”region” to the main accordion div. This is the div that houses the question and answer divs

2. Add aria-expanded = ”false” and role=”button” to the question div

3. Add aria-hidden = ”true” to the answer div

And that's it. Publish and test it out.

cr: Alex Manyeki

Want to show your website project on your website? Simply create an embed and paste it the custom code below,

cr: Flowbase

Sometimes you'll want smooth scrolling on a page, which is perfect to give a feel of luxury and well - smoothness. So this is how to create a smooth scrolling effect on Webflow with a little custom code.

Paste the code below into project settings. And then apply ID luxy to the main page wrapper that contains all the sections, divs and components.

Play around with the scroll speed by tweaking the <li-powerful>.wrapperSpeed<li-powerful>. Once you've tweaked the speed, you can publish to see it working live.

cr: Shmerler Eli‍

Sometimes, you want to greet your website visitors "Good morning" at the correct times, to make them feel welcomed and at home. Well, you can do that on Webflow with a little custom code

So let's say you want your text to read “Goodmorning” when the time is before 12 pm. And then make the text say “Good afternoon” after 12:00pm but before 5:00 pm. These rules can be set by the below code script

Place an embed component. Paste in the script. Add a text span to the text where the greeting will be. Give it an ID of <li-powerful>lblGreetings<li-powerful>. That's it. Publish it and you can see it update dynamically based on the time of the day :)

By using the <li-powerful>:nth-child<li-powerful>, you can select elements based on their index (source order) inside their container

Webflow has a built-in way to alter the nth child. You hover over the collection item itself and choose one of the structures that are available

Select the first item to alter how the first collection item looks

Select even items to alter how every even item will look

So is it all good? Not really

Webflow does limit the ability to make minute changes in the children of each collection item. But with a little code, you can do that easily

Place an embed in the page and edit the relevant script that you need

Here’s a quick explanation of what each element means,

<li-powerful>your-collection-item<li-powerful> = This is the class of the collection item (naming it will be better instead of using “Collection Item 5” as the name. Replace that here

<li-powerful>nth-child<li-powerful> = This is the child element in the item that you want to style. Replace that here

<li-powerful>3n+1, 3n+2…<li-powerful> = 3n means the number of items you want to style individually after which it starts repeating itself for the remainder of the items. 3n+2 means the second item in your collection. It can be 4n, 5n, and so on, depending on your use case

Advanced uneven custom CMS grid

Sometimes, you would want your CMS collection grid to be in this way. Here, the collection items are uneven and placed in a custom order. To achieve this, you would be using grid areas and a little custom script

You would first Place a collection list and turn it into a grid. Create the rows and columns (in this case, I created 3row and 3 columns). Then set the grid areas in it.

You can also set grids areas using your mouse. Add an area and the drag the area box to cover the rows and columns accordingly

Now, name those areas (these names will then be used in the code script. In this case, I named them first, second, third, fourth, and fifth)

Then place an embed and paste this code

You can see the list update live in Webflow Designer.

The idea behind this is that in Webflow, you would set the area. Then, with the script, you tell Webflow to put the collection items according to the area you set

cr: Timothy Ricks

It’s super easy to play background video in Webflow on mouse hover.

Simply place the below script in the before tag. Then replace <li-powerful>.video<li-powerful> to the background video class

Publish and test it out!

cr: Refokus & Lime knight

When you want to create a Pinterest-style layout, it becomes tough because when you make it using a grid, Webflow does this,

To achieve a masonry layout (Pinterest Style) in Webflow, there are 2 ways you go about: Use custom code or tweak it directly in Webflow. Let's look at both ways

Using custom code

Paste the below script in the “Before tag" field in the page settings

Now we’ll add 3 attributes to the div holding the collection list

a. Add <li-powerful>r-masonry-layout="1”<li-powerful> & set value to 1

b. Add <li-powerful>r-masonry-column-min="500”<li-powerful> & set value to 250

c. Add <li-powerful>r-masonry-gap="10”<li-powerful> & set value to 40

Hit publish and test!

Tweak in Webflow

We’ll not be using Flexbox or grid to achieve this. We’ll use text columns

• Leave the collection list as <li-powerful>display: block;<li-powerful>
• Set the number of columns you want (under Typography > More type options)
• Set the collection item to <li-powerful>display: inline-block;<li-powerful> to stop it from cutting the card in half when it reaches the bottom
• Set the horizontal gap using the column-gap property on the collection list (it's in the 3 dots menu next to columns)
• Set the vertical gap with margin-bottom on your collection items

‍

And that's it! You achieved a Pinterest style layout directly on Webflow! Perfect for displaying a image library, blog sections or anything creative that you're thinking of

cr: Robin G

This is how you scroll from section to another section (mostly 100VH) smoothly on Webflow by using a custom code.

Set each section to 100VH and add the class <li-powerful>s-scroll<li-powerful>. Setup cool interactions for when the page appears (see reference). Then add the below snippet to the footer section

Publish and test!

cr: Mikhail Voloshin&RR Abrot

If you want users to close pop-ups using the ESC key, you can easily implement that on Webflow using custom code.

After you properly develop a pop-up, you give the close button a class and add a script. Yes that simple. Here's how it's done

Make sure to name the class of the closing element (in this case the X) to <li-powerful>modal_close<li-powerful>. Insert the custom code in the project settings. Publish and test!

Once that's done, publish the site and test it out

cr: RR Abrot

Here's how to update the year on the footer section automatically on Webflow, using a little custom code

Paste the code snippet to project settings. Select the year, create it into a text span, and name the class into <li-powerful>current-year<li-powerful>. Hit publish and that's it!

cr: Matt Varughese‍

Here's how to reload page on form submission on Webflow, using a little custom code.

Add an ID to the form element and name it refreshThis. Place the below snippet in the before body tag section. Hit publish and test

You will enable a function to refresh the page once a user submits the form. This will work only on the published site

cr: Lionize Agency

Webflow allows you to style the submit button. But when you have a button with multiple divs and interactions, the submit button can become unclickable

The problem is that when the submit button (the official one that submits the form) is a child of any other wrapper-div, it becomes unclickable and users can no longer submit the form.

You can get around this by adding the following custom code:

The ‘btn-wrapper’ is the class you want clicks to pass through or ignore and ‘submit-btn’ is the class you want to be clickable.

‘pointer-events: none’ - makes the wrapper div “clickthrough” or invisible to clicks, but then you also have to add ‘pointer-events: auto’ to any child classes of the class you have made invisible. This makes them visible to click again

cr: Jose Orcando

Writing vertical text is super easy in Webflow. Usually, developers play with the transform property in Webflow. But that isn’t helpful, because it doesn’t dynamically affect other elements in the page. It might even crop out some text

A better way is to name the text class <li-powerful>vertical-text<li-powerful> (or anything you prefer). Then place an embed and put paste in the script

That easy. You can actually edit the text and see how it looks!

cr: Mikeyevin

If you’d like to enforce link color to match the parent or match normal body/paragraph color by default, place the below script in project settings,

Simply apply the classes as mentioned in the script to the relevant div block, and it should update accordingly

cr: http://www.lewisokami.com/

Tired of the standard blue background text when you select text on a webpage? You can style the text selection color just the way you want it on Webflow. Here's an example I did for a recent client project

‍

Add this script to the head code in project settings

The first color is text. The background color is, well you know 🙂

cr: Finsweet

Build a custom scroll width, color and more using a simple javascript. You can also use Finsweet’s Chrome extension. The main code looks like so,

Width = Scrollbar width‍

Track = Progress bar

Handle = The draggable scrolling handle

Handle on hover = Color of the handle when you hover on it

Simply edit the values and paste it in the head code of your project settings

The Quick Way

There's a quick and easy way to style text as code. Style a text in your style guide and name it <li-powerful>codescript<li-powerful>. Then click on the text you want the code class to be applied to. Write the script below in the embed and test.

The Best Way

If you want to place a code script with syntax highlighting that also works with a CMS in Webflow, you have to use a couple of scripts.

Yes, this works in a CMS too

Just to make it easier on you, I’ve collected the scripts you need to get syntax highlighting similar to what I used

You’ll need to put these scripts in the before <li-powerful></body> tag of the page where you want the scripts. This could be a CMS template or just any page

Then when you're putting the script in the Rich Text embed, you have to make sure the script goes in between 2 lines of codes like so,

That's it. Publish and Test!

To style the code script with more templates, check out an excellent tutorial from NoCodeCollab

1. Syntax styling- primejs.com
2. Scripts used from CDN Library

Here's how you create a back button on Webflow, using a little custom code. Keep it mind, this will take the user to the previous page, based on their browser activity. So if they came from the homepage to the current page (that has the back button), then will go back to the homepage when they click the back button

So you'll start by creating a link block (you can write back or add an icon as I did in the below image)

Paste <li-powerful>`javascript:history.back(-1);<li-powerful> in the URL section of the Link block

‍Publish the site and test! Yes, that's it!