Webflow Website Setup and Customization
Setting up a Webflow website is configuring hosting, domain, SEO, analytics, forms, and integrations. Customization is working with design, animations, custom code, and extending platform standard capabilities. Unlike Tilda and Wix, Webflow provides more precise configuration tools and better supports custom code.
Connecting a Domain
Webflow hosts the website on its own CDN (Fastly). Domain connection — through DNS settings:
A records for naked domain:
A @ → 75.2.70.75
A @ → 99.83.190.102
CNAME for www:
CNAME www → proxy-ssl.webflow.com
After adding in DNS provider: Project Settings → Hosting → Custom Domains → Add Domain. SSL via Let's Encrypt is issued automatically.
For naked domain without www.domain.comconfigures redirect domain.com → www.domain.com (or vice versa) through Project Settings → Hosting.
Email on domain — Webflow does not provide email hosting. Google Workspace or Zoho Mail — via MX records at DNS provider independently of Webflow.
SEO Configuration
Project Settings → SEO:
- Title tag format:
{Page Name} | {Site Name}— template for all pages - Default meta image (og:image by default)
- Webflow branding (noindex) — disable for custom domain
For each page (Page Settings → SEO Settings):
- SEO Title — unique, 50-60 characters
- Meta Description — 140-160 characters
- Open Graph Image — 1200×630px
- Canonical URL — if there's risk of duplicates
- Indexing: Allow / Disallow (noindex, nofollow)
CMS Collection Templates: In template settings — SEO fields are bound to collection fields:
- Title →
{{SEO Title}}or{{Name}} | Site Name - Description →
{{SEO Description}} - og:image →
{{Featured Image}}
Sitemap.xml — generated automatically at domain.com/sitemap.xml. Configure priorities — through Page Settings → SEO → Priority.
301 Redirects — Project Settings → SEO → Redirects. CSV import for mass redirects (when migrating from old site):
/old-page,/new-page
/old-services/design,/services/ux-ui
/blog/2020/post-name,/blog/post-name
Analytics
Google Analytics 4: Project Settings → Integrations → Google Analytics → Measurement ID (G-XXXXXXXXXX).
Webflow automatically sends page_view. For custom events — custom JS:
<!-- Project Settings → Custom Code → Before </body> tag -->
<script>
// Track CTA clicks
document.querySelectorAll('[data-track-cta]').forEach(btn => {
btn.addEventListener('click', () => {
gtag('event', 'cta_click', {
cta_label: btn.dataset.trackCta,
page_location: window.location.pathname,
});
});
});
// Track successful Webflow form submission
window.addEventListener('message', function(event) {
if (event.data.type === 'webflow.form.success') {
gtag('event', 'generate_lead', {
form_id: event.data.form,
});
}
});
</script>
Yandex.Metrica: Project Settings → Custom Code → insert counter code in <head>.
Google Tag Manager — preferred approach for projects with multiple analytics systems:
<!-- <head> -->
<script>
(function(w,d,s,l,i){/* GTM snippet */})(window,document,'script','dataLayer','GTM-XXXX');
</script>
<!-- <body> -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" ...></iframe></noscript>
Webflow Forms
Webflow Forms are processed by the platform: data is saved in Dashboard → Forms. Email notifications — Project Settings → Integrations → Email Notifications.
Custom form processing via Action:
<!-- In Designer: Form Settings → Action → insert backend URL -->
<!-- After Submit Webflow does POST to specified URL -->
But more commonly — intercept via JS and send to custom API:
const form = document.querySelector('[data-form="contact"]');
form.addEventListener('submit', async function(e) {
e.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
const submitBtn = form.querySelector('[type="submit"]');
submitBtn.disabled = true;
submitBtn.textContent = 'Sending...';
try {
const res = await fetch('/api/leads', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
if (res.ok) {
form.querySelector('.w-form-done').style.display = 'block';
form.style.display = 'none';
// Send conversion event
gtag('event', 'generate_lead');
} else {
throw new Error('Server error');
}
} catch {
form.querySelector('.w-form-fail').style.display = 'block';
submitBtn.disabled = false;
submitBtn.textContent = 'Try Again';
}
});
Integrations
Zapier / Make: Webflow → Trigger "Form Submission" or "New CMS Item" → actions in CRM, Slack, Google Sheets.
Webflow API for CMS automation:
# Create collection item via API
curl -X POST "https://api.webflow.com/v2/collections/{collection_id}/items" \
-H "Authorization: Bearer {API_TOKEN}" \
-H "Content-Type: application/json" \
-d '{
"fieldData": {
"name": "New Post",
"slug": "new-post",
"content": "Article text",
"_draft": false,
"_archived": false
}
}'
This is useful for automatic content creation from external systems: job postings from HR platform, listings from ERP, press releases from PR tool.
Memberstack: protected pages, personal account, paid subscriptions. Installed as JS script + attributes on elements:
<div ms-code-protected-redirect="/login">
<!-- Content only for logged-in users -->
</div>
Finsweet Attributes — free JS library of extensions for Webflow:
-
fs-cmsfilter— CMS collection filtering without JS code (via data-attributes) -
fs-cmssort— collection sorting -
fs-cmsnest— nested collections (Multi-reference items) -
fs-cmsload— infinite scroll / load more
<!-- CMS filtering by tag — only data-attributes, no code -->
<div fs-cmsfilter-element="filters">
<button fs-cmsfilter-field="category" fs-cmsfilter-value="all">All</button>
<button fs-cmsfilter-field="category" fs-cmsfilter-value="design">Design</button>
</div>
<div fs-cmsfilter-element="list">
<!-- Collection List -->
</div>
Animation Customization
Additional CSS animations on top of Webflow Interactions:
<!-- Project Settings → Custom Code → <head> -->
<style>
/* Custom cursor */
* { cursor: none; }
.cursor {
width: 12px;
height: 12px;
background: #111;
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.15s ease;
}
.cursor--expanded {
transform: scale(4);
background: rgba(17,17,17,0.15);
}
</style>
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.style.left = e.clientX - 6 + 'px';
cursor.style.top = e.clientY - 6 + 'px';
});
document.querySelectorAll('a, button').forEach(el => {
el.addEventListener('mouseenter', () => cursor.classList.add('cursor--expanded'));
el.addEventListener('mouseleave', () => cursor.classList.remove('cursor--expanded'));
});
Editors and Content Management
Webflow Editor — editing mode for clients without Designer access. Editors see inline-editing of texts and images directly on page.
Project Settings → Collaborators → add editors (Editor role). Editor can:
- edit texts and images on static pages
- add/edit CMS records
- publish changes
Editor cannot: change structure, CSS, animations — only content.
Typical Timelines
Basic setup of new website (domain, SSL, GA4, form with notifications, sitemap, redirects) — 1 working day. Full configuration with integrations (CRM via Zapier, custom GA4 events, GTM, Memberstack) — 3-4 days. Advanced customization with Finsweet Attributes, custom JS, and CMS SEO — 4-6 days.