How to create a forum with Webflow - no-code & in under 5 minutes!

Create your own custom designed forum using Webflow's Designer & CMS. Improve SEO & community engagement by allowing registered users or guests to create new pages of content with rich text on your Webflow site.

IN THIS TUTORIAL

Why create a forum with Webflow?

In the past, Webflow would be one of the last tools people would think of for building a forum. But with the emergence of new 3rd party apps, Webflow is now a fantastic option for building a forum, especially when you consider the following advantages it possesses over other website, web app, & forum development tools:

1) SEO - If you are building a forum, chances are organic traffic will be one of your most important acquisition channels. Out of the box, Webflow offers best-in-class technical SEO and tools (clean code, fast page speed, meta data, minifying, etc.) that maximize the likelihood of new pages of user generated content not only being indexed on search engines, but also ranking higher.

2) Design flexibility - This is a matter of preference. But if you wanted to create a forum with unique design that matches your brand, instead of directing users to a community platform with generic out of box design, Webflow is a fantastic choice. With Webflow, you can custom-design every aspect of your forum in a visual editor, completely no-code.

3) No cross-platform friction - When Webflow sites already own a userbase, through a tool like Memberstack or Webflow Memberships, syncing user data with community tools (like Circle) requires cumbersome Zapier or Make automations. Or with Slack or Discord, your users need to sign up again to another 3rd party tool. Through the solution in this tutorial, you have memberbase within one tool without needing to sync data across platforms.

How can I create a forum on my Webflow site?

The tool we are going to use in this tutorial is Supersparks, which enables forums within a Webflow site in 5 minutes and gives you the freedom to custom-design every aspect of your forum in the Webflow Designer. To see this tool in action, before getting started, check out this demo video and live example of a forum built with Supersparks & Webflow. In addition to covering the basics, this tutorial will also explain the different configurations & settings that are possible through this solution.

After signing up to Supersparks and authorizing your forum site, you can get started with the installation 👇:

Create a new spark

First off, click 'Add Spark' on the project where you would like to add the forum. Once on the app select screen, select 'Community Discussions', and click create spark.

Supersparks Community Tool For Werbflow
Supersparks' app select screen

Step 1: Connect CMS Collection & Field

Since this solution uses Webflow's CMS to create new forum posts, it's important to first create a CMS collection with a rich text field for forum content.

CMS collection for forum posts with a rich text field

The first step for installing Supersparks, is to select this same collection in the first dropdown, select the rich text field in the second dropdown, and click 'Save & Create ID Field'.

Connecting the CMS collection where forum posts will be created & the rich text field for long form forum content

Step 2: Rich text content form

a) Paste form template

A key component to every forum, is the form where users can submit new topics / posts. To enable this, select a template for your new topic form.

Webflow rich text form template select screen

Once you've selected a template, you will be redirected to screen where you can copy the template and paste it into a static page in Webflow (pressing CMD + V). Please note, it's not possible to copy & paste Webflow components on Safari.

Copying the template to clipboard
Webflow rich text editor component
Pasting the rich text form into your static page in Webflow

b) Paste code snippet

After copying & pasting this template, proceed to the code snippet step. After clicking the copy icon of the code snippet, open up your form page's settings, paste the code snippet inside the <head> tag, and press save.

Copying Supersparks' code snippet to clipboard
Pasting the code snippet inside the <head> tag of the page settings

Optional 1: Adapt the design of your form

The goal of Supersparks' template installation is to speed up the process of designing & developing the essential components of forums. But the beauty of this solution is that you can adapt almost aspect of these templates in the Webflow Designer.

In the likely scenario that you are using the all tags (eg. 'All Paragraph, 'All H2s' etc.), these styles will be automatically applied in the rich text editor element (class ql-editor). If you want to make the font styling inside the editor different from these tags (eg. margin, size, font etc), be sure to check out the next section.

Changing the background color of the editor
Changing the color of the icons in the toolbar. You can also replace these with your own icons!

*All templates come pre-installed with the required classes for enabling Supersparks. In case you see any classes for Supersparks (eg. 'supersparks-post-submit-xxxxx'), we recommend not removing them from template elements.

Optional 2: Paste CSS overrides

Certain aspects of the rich text elements can only be adapted through CSS overrides. To simplify this process, Supersparks has a code snippet that can pasted into the body tag of your page settings. These CSS overrides, will by default add margins between line breaks, which will prevent users from pressing enter twice to separate paragraphs or other text elements - in step 4 you will see the importance of this when we use Webflow’s rich text element inside of a CMS page template.

Copying the default CSS overrides

If you're not a CSS expert, do not worry. You can adapt the margins or font sizes, by changing the number to the left to the ‘px’ to the one you desire. It's also possible to adapt the rich text editor’s placeholder text & color in the last section of the code snippet.

Where to adapt the styling of the h3 inputs and placeholder text.

Step 3: Webflow Logic Setup

The next step is to use Webflow’s native logic feature to create a new CMS item whenever the form from step 2 is submitted. There are 100s of tutorials on how to do this, but below is the minimum setup for enabling Supersparks. Please note, if you prefer to use another automation tools (like Make or Zapier) for this step, knock yourself out - just be sure the field mapping is the same as the second image below.

Creating a new Webflow CMS item with rich text
a) Select the template 'community poster form' as the flow trigger
b) Follow the input & field mapping above.
c) Run a test for the flow
d) Stage the flow for publish

Now that your Webflow logic automation is live, you should be able to create a new CMS item. Plus the rich text input in the editor will be imported into the newly created item's rich text field.

Step 4: Forum Content CMS Page

The next step is to create a page template for the forum content where OP / author data gets displayed & users can respond.

a) Select the template

Similar to step 2) this process requires copying and pasting a template the template page of the CMS template page for your posts. For a forum, we recommend selecting using a template ‘With Comments’.

After proceeding, select a page template, copy & paste it into your CMS page template, and proceed to the next section.

Copying the selected forum post template to clipboard

Next, paste this template into the CMS collection page for where new forum posts are being created.

Pasting this template into the CMS collection page

b) Optional: Adapt design

After pasting, you can get started adapting the design of the template. We recommend making the margins between text elements inside the rich text element to match the formatting from the CSS overrides in step 2.

Webflow forum component

c) Paste post page code snippet

Next, copy & paste the code snippet inside the <head tag> of the the CMS page template and press save.

c) Connect CMS fields with elements

Finally, the last step is to connect the each CMS field property to their respective element in the page template page.

Connecting the post title field to the element
Connecting the rich text field in the forum collection to a rich text element

Optional: Comment Section

We also, highly recommend decreasing the opacity of the comment section by making the opacity 0% for the comment grid (with class ‘supersparks-comments-grid-xxxxx’). This will prevent the placeholder elements from flickering on screen if comments are loaded in the first frame.

Decreasing the opacity of the comment section before publishing

By selecting a template with comments, Supersparks' commenting feature comes pre-installed. Similarly, you can adapt the designs of the comment section & form in the Webfow Designer. It's also possible customize the settings and add extra functionality for this comment section from by clicking ‘Edit Comment Section’ on the side bar.

Updating the settings of the pre-installed / connected comment section

Step 5 (Optional but recommended): Memberships

Supersparks integrates with two membership tools commonly used with Webflow sites: Memberstack & Webflow Memberships (Webflow’s free memberships feature). Through this functionality, data from member accounts (name, username, avatar, & up to 3 custom fields of your choosing) will automatically be displayed in the OP / author section (step 4's template) for any content they post into the rich text form (step 2), while logged in.

To set this up, first go to the 'Memberships' section in Supersparks, select the memberships tool you would like to use, click save, and integrate the member fields for each membership tool.

Webflow Memberships

To integrate Webflow memberships, copy the slugs provided by Supersparks, go to your memberships settings, replace the slugs for every member field (you would like to display with content) with the slug copied from Supersparks, and then click save. For example, below is the process for displaying a custom field for profession in the OP / author section.

Memberstack

Unlike Webflow Memberships, the field IDs from Memberstack need to be pasted into Supersparks’ field settings. For example, below is how you would add a field for profession to Supersparks’ custom field 1 slot.

*For Memberstack, be sure to follow this exact process with your connected comment section.

Member Elements

All of the elements for displaying member data inside of the OP & comments section comes pre-installed with the template from step 4. Feel free to remove any member field elements you don’t want from the template.

Guest author inputs

If you also want to allow guests to post content, then you can use Webflow Memberships or Memberstack's user visibility settings to only show the author & email fields that (included with the templates) inputs to visitors that are logged out. Members don't need to input these details since they are already saved to their account. If you want to make your forum member only, we recommend hiding the author & email fields altogether.

Webflow Memberships native conditional visibility setting
Memberstack attribute for conditional visibility.

*Unlike member data, Supersparks does not automatically display guest author data in the OP section. Instead, you can use Webflow Logic to add guest author inputs into the CMS & then dynamically retrieve this text from the CMS template.

Step 6: Collection List Element For Selecting Forum Posts

The last step is to create a collection list element, where users / visitors can browse through forum posts & navigate to one they would like to view. Supersparks unfortunately does not offer any component for this right now, but you can create one from scratch in a matter of minutes by:

  1. Adding a collection list element
  2. Selecting the CMS collection where posts are being created as the source of the element
  3. Design & create a component where users can select posts
  4. Connecting fields that you would like to preview in the post selector to their respective text field (eg. post title & date)
  5. Adding a link or button element that directs users to the ‘Current Post’
Connecting your CMS collection as the source element to a Collection List Element
Link setting to direct users to direct users to pages for different posts

To enable pagination, search, and filtering on your post select screen, we recommend Finsweet Attributes or Jetboost.

Step 7: Go live 🚀

Now the fun begins. After publishing your site, you can test out your forum by logging in through your memberships tool, and navigating to the static page with your rich text editor.

After submitting your content, member details should appear in the author / OP section of the forum post and any additional comments posted by members.

Webflow rich text editor
Submitting a new forum post in the rich text editor
Webflow forum post by member
New forum post created by a member
Webflow comment section
Comment section where users can respond to the post

Optional Settings

a) Pre-moderation - you can either allow posts to automatically be published to your website. Or if you want more control over content moderation you can manually review and approve every new post that gets submitted to your forum in the Supersparks dashboard. Depending on your selection, be sure to show the relevant success screen in the template from step 2:

Hide the success screen message thats irrelevant to your pre-moderation setting

b) Owner notification - Get notified via email any time a new post gets created.

c) Author notification - Send an email to the author, with a link to their post, when it is first published to your website.

d) URL path - If your CMS collection is nested inside of a folder and has a multi-path URL structure, be sure to input this path of the folder, to ensure Supersparks directs users to the correct URL.

Supersparks' forum settings

Manage Content

Once your website starts receiving content, you can can review all of the forum posts & comments posted to your website in the Supersparks dashboard. It's also possible to publish & unpublish any forum posts to your Webflow site.

Supersparks' content dashboard

Upcoming features 👀

Supersparks community tool is brand new, but we have some exciting new features planned for the future, including:

  • Public profile page with members' content history (see below)
  • Displaying author details inside collection list elements
  • Social features (upvoting, following, etc.)
  • Option to create posts without creating CMS items
  • And much more
Upcoming public profile page for members' content history!

---

Thanks for reading! In case you have any questions or get stuck do not hesitate to reach out to us at hello@supersparks.io 💪!

Enable user generated content on Webflow!

Power-up your no-code tools today!