Indie hackers need a fast, cheap way to build a product landing page. Webflow gives you visual design, CMS power, and built‑in hosting without writing a line of code. This guide shows you step‑by‑step how to set up a Webflow project, add a sign‑up form, connect Stripe, and launch a live site that converts.
Go to webflow.com and click “Get started – it’s free”. Use your email or a Google login. After confirming, you land on the dashboard.
For indie SaaS, the “Startup Landing Page” template works well. Click “Use this template”. It gives you a hero section, feature grid, pricing table, and footer already styled.
Enter a name like my-saas-landing. Click “Create project”. Webflow opens the Designer.
Replace the placeholder headline with your product name. In the Designer, click the H1 element and type “Boostify – Real‑time analytics for indie apps”. Add a sub‑headline paragraph below.
Drag a Button element into the hero. Change its text to “Start free trial”. In the Style panel, set the background to #1e88e5 and the text color to #fff. Add a data-wf-page attribute later for tracking.
Copy the three‑column grid from the template. Replace icons with SVGs from Heroicons. Update titles: “Live dashboards”, “Zero‑code integrations”, “Team sharing”. Add a short 15‑word description under each.
Use a Collection List bound to a new CMS collection called “Plans”. This lets you edit pricing without republishing.
Plan Name | Price | Features
---|---|---
Starter | $0/mo | 1 project, 5k events
Growth | $29/mo | Unlimited projects, 100k events
Pro | $79/mo | Priority support, 1M events
In the CMS panel, click “Add new collection”. Name it “Features”. Add fields: Title, Icon (image), Short description (rich text). Add 5 records such as “Real‑time charts”, “Custom alerts”, etc.
Drag a Collection List onto the section where you want the features. Select the “Features” collection. Bind each element: Text → Title, Image → Icon, Paragraph → Description.
Create “Testimonials” with fields: Name, Company, Quote, Avatar. Add three real quotes from beta users. Then place a slider (Webflow Slider component) and bind each slide to a testimonial.
Drag a Form Block** onto the hero or pricing section. Add fields: Email (type email), Password (type password). Set the button text to “Create account”.
In the Form Settings, set the Action URL to your Stripe Checkout session endpoint. Example Node.js endpoint:
const stripe = require('stripe')(process.env.STRIPE_SECRET);
app.post('/create-checkout', async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [{price: 'price_1Hh1XYZ', quantity: 1}],
mode: 'subscription',
success_url: 'https://yourdomain.com/success',
cancel_url: 'https://yourdomain.com/cancel',
metadata: {email: req.body.email}
});
res.redirect(303, session.url);
});Paste the endpoint URL into the Form Action field. Turn on “Redirect after submit”.
In the Designer, select the Form Block, go to Settings, and disable “Show success message”. This prevents duplicate pages after Stripe redirects.
Open Project Settings → SEO. Fill in:
Every image gets an alt attribute describing its content. Use a single H1 per page (the product name). Use H2 for sections like “Features” and “Pricing”.
| Task | Impact |
|---|---|
| Compress images to WebP | Reduces load by up to 30 % |
| Enable lazy‑load for below‑the‑fold images | Improves First Contentful Paint |
| Use Webflow’s built‑in CDN | Global fast delivery |
| Minify custom CSS/JS | Smaller payload |
Click the “Publish” button in the top right. Choose yourproject.webflow.io. Verify that all links work and the Stripe flow redirects correctly.
In Project Settings → Hosting, add your domain (e.g., boostify.com). Follow the DNS instructions: set an A record to 75.2.70.75 and a CNAME to proxy-ssl.webflow.com. SSL will activate within minutes.
Duplicate the hero section. Change the button text to “Get started – free”. Use Webflow’s built‑in “Page Settings → A/B testing” (available on the Business plan) to split traffic 50/50. Track conversions with Google Analytics.
Embed a Typeform survey after checkout using an <iframe> inside a new “Thank you” page. Ask users about onboarding friction and pricing clarity.
No. Webflow is a visual builder. You can create layouts with drag‑and‑drop and add custom code only when needed.
Webflow can host static front‑ends, forms, and simple interactions. For server‑side logic you need external services like Zapier, Integromat or a separate backend.
The Lite plan is $24 / month (billed annually) and includes 100 GB bandwidth, 25 pages, and basic CMS. The CMS plan at $39 / month adds dynamic content and higher limits.
Yes. Webflow generates clean HTML, lets you edit meta tags, schema, and alt text. You can also add custom redirects.
Integrate Stripe Checkout or PayPal via Webflow’s Embed element or use a third‑party tool like Memberstack or Finsweet Forms for subscription billing.
Webflow gives indie hackers a fast, visual way to launch a product page. Follow the steps, test each integration, and iterate based on real user data. Your first landing page can be live in a day and start generating sign‑ups immediately.