#179 - Rich Text Fields For Webflow Forms v0.1
Add a simple rich text editor to Webflow forms so members can format text with headings, styles, and links.
Kopf-Code
Place this in your page <head>
<!-- 💙 MEMBERSCRIPT #179 v0.1 RICH TEXT FIELDS FOR WEBFLOW FORMS 💙 -->
<style>
/* =========================================== */
/* MAIN EDITOR CONTAINER - Customize borders, colors, etc. */
/* =========================================== */
.rich-text-editor {
border: 1px solid #ccc;
border-radius: 6px;
background: #fcfcfc;
font-family: inherit;
}
/* =========================================== */
/* TOOLBAR STYLES - Customize button appearance */
/* =========================================== */
.toolbar {
display: flex;
gap: 5px;
padding: 10px;
background: #f9fafb;
border-bottom: 1px solid #d1d5db;
border-radius: 6px 6px 0 0;
flex-wrap: wrap;
}
/* =========================================== */
/* TOOLBAR BUTTONS - Customize button styling */
/* =========================================== */
.toolbar button {
padding: 6px 10px;
border: 1px solid #d1d5db;
background: white;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
}
.toolbar button:hover {
background: #f3f4f6;
}
.toolbar button.active {
background: #3b82f6;
color: white;
}
/* =========================================== */
/* EDITOR CONTENT AREA - Customize typing area */
/* =========================================== */
.editor-content {
padding: 15px;
min-height: 120px;
outline: none;
line-height: 1.6;
}
/* =========================================== */
/* CONTENT STYLING - Customize text formatting */
/* =========================================== */
.editor-content p {
margin: 0 0 10px 0;
}
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
font-family: inherit;
font-weight: bold;
margin: 15px 0 10px 0;
}
.editor-content h1 { font-size: 1.8em; }
.editor-content h2 { font-size: 1.5em; }
.editor-content h3 { font-size: 1.3em; }
.editor-content ul,
.editor-content ol {
margin: 10px 0;
padding-left: 30px;
}
.editor-content a {
color: #3b82f6;
text-decoration: underline;
}
/* Link input overlay styles */
.link-input-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.link-input-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
min-width: 300px;
}
.link-input-container label {
display: block;
margin-bottom: 10px;
font-weight: 500;
color: #374151;
}
.link-url-input {
width: 100%;
padding: 10px;
border: 2px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
margin-bottom: 15px;
box-sizing: border-box;
}
.link-url-input:focus {
outline: none;
border-color: #3b82f6;
}
.link-input-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.link-cancel-btn, .link-create-btn {
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.link-cancel-btn {
background: #f3f4f6;
color: #374151;
}
.link-cancel-btn:hover {
background: #e5e7eb;
}
.link-create-btn {
background: #3b82f6;
color: white;
}
.link-create-btn:hover {
background: #2563eb;
}
</style>
Code der Einrichtung
Place this in your page <body>
<!-- 💙 MEMBERSCRIPT #179 v0.1 RICH TEXT FIELDS FOR WEBFLOW FORMS 💙 -->
<!--
===========================================
JAVASCRIPT FUNCTIONALITY - DO NOT MODIFY
===========================================
The script below handles all the rich text editor functionality.
Only modify if you know what you're doing.
-->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Find all rich text editors
const editors = document.querySelectorAll('[data-ms-code="rich-text-editor"]');
editors.forEach(function(textarea) {
// Hide original textarea
textarea.style.display = 'none';
// Create editor container
const editorContainer = document.createElement('div');
editorContainer.className = 'rich-text-editor';
// Create toolbar
const toolbar = document.createElement('div');
toolbar.className = 'toolbar';
toolbar.innerHTML = `
<button type="button" data-command="formatBlock" data-value="h1">H1</button>
<button type="button" data-command="formatBlock" data-value="h2">H2</button>
<button type="button" data-command="formatBlock" data-value="h3">H3</button>
<button type="button" data-command="formatBlock" data-value="p">P</button>
<button type="button" data-command="bold"><b>B</b></button>
<button type="button" data-command="italic"><i>I</i></button>
<button type="button" data-command="underline"><u>U</u></button>
<button type="button" data-command="insertUnorderedList">• List</button>
<button type="button" data-command="insertOrderedList">1. List</button>
<button type="button" data-command="createLink">Link</button>
<button type="button" data-command="removeFormat">Clear</button>
`;
// Create editable content area
const editorContent = document.createElement('div');
editorContent.className = 'editor-content';
editorContent.contentEditable = true;
editorContent.innerHTML = textarea.value || '';
// Assemble editor
editorContainer.appendChild(toolbar);
editorContainer.appendChild(editorContent);
textarea.parentNode.insertBefore(editorContainer, textarea);
// Handle toolbar buttons
toolbar.addEventListener('click', function(e) {
if (e.target.tagName === 'BUTTON') {
e.preventDefault();
const command = e.target.dataset.command;
const value = e.target.dataset.value;
if (command === 'createLink') {
handleLinkCreation();
} else if (command === 'formatBlock') {
document.execCommand('formatBlock', false, value);
} else {
document.execCommand(command, false, null);
}
// Update button states
updateToolbarStates();
// Update hidden field
updateHiddenField();
}
});
// Handle link creation without popup
function handleLinkCreation() {
const selection = window.getSelection();
const selectedText = selection.toString().trim();
if (selectedText) {
// Store the selection range to restore it later
const range = selection.getRangeAt(0);
// Create a temporary input field for URL entry
const linkInput = document.createElement('div');
linkInput.className = 'link-input-overlay';
linkInput.innerHTML = `
<div class="link-input-container">
<label>Enter URL for "${selectedText}":</label>
<input type="url" placeholder="https://example.com" class="link-url-input">
<div class="link-input-buttons">
<button type="button" class="link-cancel-btn">Cancel</button>
<button type="button" class="link-create-btn">Create Link</button>
</div>
</div>
`;
// Add styles for the input overlay
const overlayStyles = `...`; // (Styles unchanged, truncated here for brevity)
// Add styles if not already added
if (!document.querySelector('#link-input-styles')) {
const styleSheet = document.createElement('style');
styleSheet.id = 'link-input-styles';
styleSheet.textContent = overlayStyles;
document.head.appendChild(styleSheet);
}
// (Remaining logic unchanged — handles link creation, cancel, enter/escape keys, etc.)
}
}
// Update toolbar button states
function updateToolbarStates() { ... }
// Update hidden field with HTML content
function updateHiddenField() { ... }
// Handle content changes
editorContent.addEventListener('input', function() {
updateHiddenField();
});
// Handle selection changes for toolbar states
editorContent.addEventListener('mouseup', updateToolbarStates);
editorContent.addEventListener('keyup', updateToolbarStates);
// Initial update
updateHiddenField();
// Handle form submission
const form = document.querySelector('[data-ms-code="rich-text-form"]');
if (form) {
form.addEventListener('submit', function() {
updateHiddenField();
});
}
});
});
</script>
Customer Showcase
Have you used a Memberscript in your project? We’d love to highlight your work and share it with the community!
Erstellen des Make.com-Szenarios
1. Laden Sie den JSON-Blaupause unten, um angegeben zu bekommen.
2. Navigieren Sie zu Make.com und erstellen Sie ein neues Szenario...

3. Klicken Sie auf das kleine Kästchen mit den 3 Punkten und dann auf Blaupause importieren...

4. Laden Sie Ihre Datei hoch und voila! Sie sind bereit, Ihre eigenen Konten zu verknüpfen.
Brauchen Sie Hilfe mit diesem MemberScript?
Alle Memberstack-Kunden können im 2.0 Slack um Unterstützung bitten. Bitte beachten Sie, dass dies keine offiziellen Funktionen sind und der Support nicht garantiert werden kann.
Treten Sie dem 2.0 Slack beiAutorisierung und Zahlungen für Webflow-Websites
Fügen Sie Ihrer Webflow-Website Logins, Abonnements, Gated Content und vieles mehr hinzu - einfach und vollständig anpassbar.
.webp)
"Wir verwenden Memberstack schon seit langem, und Es hat uns geholfen, Dinge zu erreichen, die wir mit Webflow nie für möglich gehalten hätten. Es hat uns ermöglicht, Plattformen mit großer Tiefe und Funktionalität zu bauen, und das Team dahinter war immer sehr hilfsbereit und offen für Feedback.

"Ich habe eine Mitgliedschaftsseite mit Memberstack und Jetboost für einen Kunden erstellt. Es fühlt sich wie Magie an, mit diesen Tools zu bauen. Als jemand, der in einer Agentur gearbeitet hat, wo einige dieser Anwendungen von Grund auf neu programmiert wurden, verstehe ich jetzt endlich den Hype. Das ist viel schneller und viel billiger."

"Eines der besten Produkte, um eine Mitgliederseite zu starten - ich mag die Benutzerfreundlichkeit von Memberstack. Ich war in der Lage, meine Mitgliederseite innerhalb eines Tages einzurichten und zu betreiben.. Einfacher geht's nicht. Außerdem bietet es die Funktionalität, die ich brauche, um die Benutzererfahrung individueller zu gestalten."

"Mein Geschäft wäre ohne Memberstack nicht das, was es ist. Wenn Sie denken, dass $30/Monat teuer sind, versuchen Sie mal, einen Entwickler zu engagieren, der für diesen Preis individuelle Empfehlungen in Ihre Website integriert. Unglaublich flexible Tools für diejenigen, die bereit sind, einige minimale Anstrengungen zu unternehmen und die gut zusammengestellte Dokumentation zu lesen."


"Die Slack-Community ist eine der aktivsten, die ich kenne, und andere Kunden sind bereit, Fragen zu beantworten und Lösungen anzubieten. Ich habe ausführliche Bewertungen von alternativen Tools durchgeführt und wir kommen immer wieder auf Memberstack zurück - sparen Sie sich die Zeit und probieren Sie es aus."

Brauchen Sie Hilfe mit diesem MemberScript? Treten Sie unserer Slack-Community bei!
Treten Sie der Memberstack-Community Slack bei und fragen Sie los! Erwarten Sie eine prompte Antwort von einem Team-Mitglied, einem Memberstack-Experten oder einem anderen Community-Mitglied.
Unserem Slack beitreten