.svg){kind=icon}
Community Posting
Install Method 2 - From Scratch
Please note, we recommend starting from a template or adding a template to an existing Webflow project to speed up the design process and installation of our different community posting features. If none of the templates are your cup of tea and you would prefer to build from the ground up, you can use the from scratch method by following the steps below:
Create a new spark
After authorizing Supersparks to your website, click 'Add Spark' on the homepage. Once on the app select screen, select 'Community Discussions', and click create spark.
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.
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, select a text field for posts subjects / titles, and click 'Save & Create ID Field'.
Step 2: Rich text content form
a) Paste form template
A key component to every forum, is the form where users can submit new discussions / posts. To enable this, select a template for your new post form.
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.
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.
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.
*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.
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.
Once your rich text is livelive, you should be able to create a new CMS item from the CMS collection selected in step 1. Plus the rich text input in the editor will be imported into the newly created item's rich text field.
Step 3: 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.
Next, paste this template into the CMS collection page for where new forum posts are being created.
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.
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.
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.
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.
Step 4 (Optional but recommended): Memberships
By default, the new post and comment forms will come pre-installed with guest name and email inputs, allowing logged out visitors to post content. However, Supersparks also gives you the option to integrate your community content with two membership tools commonly used with Webflow sites: Memberstack & Outseta. 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 component) with any content they post while logged in. See here for a more detailed guide to Member posting.
To set this up, first go to the 'Memberships' section in Supersparks, select the memberships tool you would like to use, click save. To display custom member fields and an anonymous username, you will need to paste in the respective field IDs into Supersparks by following the steps below.
Memberstack
By default, the name and custom field 1 slots in Supersparks will be dedicated to the first-name and last-name fields that come pre-installed with any new Memberstack project. To add any additional custom fields, their IDs 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.
Outseta
By default, the full name of the user from Outseta will be displayed as the name of the author. To display additional profile data with member content, you can paste System Names from your custom person properties into Supersparks member field settings.
Member Custom Field Elements
Your component already includes elements for showing member names and profile pictures with their posts and comments. To display the custom member field data:
- Create text elements in Webflow where you want to show member information
- Copy the class names from Supersparks and add them to your Webflow elements
Please note: the class names for post author and comment author details are different.
Please note: if you plan on enabling commenting with community posting, the classes for custom fields for posts and comments are unique - see below an example. To navigate to the member settings for your post page's comment section click ‘Edit Comment Section’ on the side navigation.
Guest author inputs
If you also want to allow guests and members to post content, you can use Outseta or Memberstack's user visibility settings to only show the author & email fields 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 or deleting the author & email fields altogether from your community post and comment forms. See here for more details on how to customize this with each membership tool.
*If an author is logged out, the guest author name provided will be displayed in the newly created posts author / OP section.
Step 5: 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. If you would like to create one that dynamically displays author data for each post, you can leverage use one of our components in our extra function for collection lists - these components also come pre-installed with filtering, sorting, and pagination from Finsweet Attributes. Below is a short tutorial for setting this up:
Step 6: 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.
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.
Extra features
In the extra features section of our editor and help center, you can find instructions for implementing the following features:
- Public profile page with members' content history
- Displaying author details inside collection list elements
- Connecting posts to a category / topic via a reference field
- Upvoting
- And much more
Video Tutorial
For a guide for setting up the basics, be sure check out the below tutorial:
