how-to

tutorials

New to building web pages? These MDN tutorials walk you through the fundamentals:

Everything you learn there applies directly to 4orm. Write HTML in the content editor, add CSS in the CSS section, and add scripts in the custom HTML section.

markdown

Any content field (profile, pages, cards) can be switched to Markdown using the toggle above the editor. Markdown is a simpler alternative to HTML for writing formatted text.

See the Markdown cheat sheet for the full syntax reference.

layouts

Each page and your profile can use one of four layouts:

In raw mode on your profile, window.__4ORM is available in the <head> with your username, pages list, and lineage URL so your scripts can reference them: 

// window.__4ORM looks like:
{
  "username": "yourname",
  "display_name": "Your Name",
  "pages": [
    { "slug": "about", "title": "About Me" }
  ],
  "lineage_url": "/lineage#user-yourname"
}

custom CSS & HTML

In settings, you can add:

media

Upload images, videos, audio, and other files in the media library. Each user gets 500 MB of storage. Use the snippet picker on the create/edit page forms to insert media into your content.

guestbook

Every user has a guestbook that other logged-in users can sign. View yours at /u/yourname/guestbook.

To embed it on your profile or a page, add this to your content:

<iframe
  src="/u/yourname/guestbook"
  style="width:100%; height:400px; border:2px inset #ccc; background:#ffffee;"
></iframe>

The guestbook runs inside an iframe so it won't interfere with your page's CSS. Visitors can sign it without leaving your page. As the owner, you can delete entries.

profile cards

Your profile card appears on the homepage. It has a headline, freeform content (HTML or Markdown), and visual settings (accent color, border style, card CSS).

Cards render in sandboxed iframes. Your card CSS uses @layer, so any rules you write will always override the base card styles without needing !important.

forum

The forum is a shared space for discussion. Create threads, reply to others, and customize your threads with CSS and HTML.

BBCode

Forum posts support BBCode (a classic formatting language) or Markdown. BBCode basics: 

[b]bold[/b]
[i]italic[/i]
[u]underline[/u]
[s]strikethrough[/s]
[url=https://example.com]link text[/url]
[img]/uploads/yourname/image.png[/img]
[video]/uploads/yourname/clip.mp4[/video]
[audio]/uploads/yourname/song.mp3[/audio]
[quote]quoted text[/quote]
[code]code here[/code]
[color=red]colored text[/color]
[size=20]bigger text[/size]

posting images and gifs

To post an image or gif in the forum:

  1. Upload it to your media library
  2. When writing a post, use the media picker dropdown below the text area to insert it
  3. Or type the BBCode manually: [img]/uploads/yourname/funny.gif[/img]

The [img] tag works with any image format: .png, .jpg, .gif, .webp, etc. You can also link to external images without uploading them first: [img]https://example.com/image.gif[/img]

quoting

Click the "quote" button on any post to include it in your reply. The quoted text is a snapshot -- it won't change if the original is edited.

thread customization

Thread creators can add custom CSS and HTML to their threads, similar to personal pages. This lets you theme discussions with custom backgrounds, fonts, etc.

forum signature

Set your signature in settings. It uses BBCode and appears below all your forum posts. Max 200 characters.

webring

The 4orm webring connects members' sites. Join via settings and embed the navigation bar on your page: 

<iframe src="/u/yourname/webring" style="width:100%;height:32px;border:none;"></iframe>

Visitors can navigate to the previous or next member, or click the center link for a random member's profile.

status / mood

Set a status in settings to show what you're up to. Embed the badge on your page: 

<iframe src="/u/yourname/status" style="width:300px;height:32px;border:none;"></iframe>

Shows your emoji, text, and when it was last updated.

music player

Build a playlist from your uploaded audio files in settings. Embed the player on your page: 

<iframe src="/u/yourname/player" style="width:300px;height:200px;border:2px inset #ccc;"></iframe>

Visitors can browse your tracks and listen while browsing your page. Customize the player's look with CSS in settings.

RSS

4orm has RSS feeds for staying up to date: