WiFi Splash Page Examples: 8 Designs That Convert and Why They Work
Key takeaways: The highest-converting WiFi splash pages have three things in common: the login action is visible above the fold on a 375px screen, the value exchange is stated explicitly ("Free WiFi. Exclusive offers."), and the form has no more than two fields. Design trends — gradients, branded photography, minimal text — follow from these conversion principles. A splash page that looks polished but buries the CTA below the fold will underperform a plain-looking page where the button is the first thing a user sees.
WiFi splash pages (also called captive portals) are the first branded touchpoint a guest has with a venue's digital presence. They're seen by everyone who connects to the guest network — often hundreds or thousands of people per day. The design of that page determines whether a guest provides real contact information, provides fake information to get through faster, or abandons the connection entirely.
This guide walks through eight examples of WiFi splash page designs that convert well, explains the mechanics behind each, and gives you the patterns to replicate for your own client deployments.
What makes a WiFi splash page convert
Before the examples: the three universal conversion principles that all good splash pages share.
The login must be above the fold on mobile. Over 85% of captive portal sessions start on a phone. If the email field or social login button requires scrolling to reach, a significant percentage of users won't bother. Design at 375px width (iPhone SE) first. If the CTA is visible without scrolling there, it's visible everywhere.
The value exchange must be explicit. "Free WiFi" is table stakes — every venue offers it. The persuasive element is what the guest gets beyond connectivity: "Free WiFi + exclusive offers", "Connect to unlock today's specials", "WiFi access + loyalty points". Users who understand why they're being asked for their email convert at significantly higher rates than users who see a generic form.
Two form fields maximum. Every additional field reduces completion. Name + email is the practical ceiling for a mobile form. Phone number as a required field kills completion for venues that don't have an explicit SMS marketing program. For the data on form field conversion rates, see captive portal best practices.
Example 1: The full-bleed food photo (restaurant)
Pattern: The entire background is a high-quality photo of the venue's signature dish or a crowd scene from the interior. The login form floats in a semi-transparent white card centered on screen. The CTA button uses the restaurant's brand color (typically red, orange, or green).
Why it converts: The food photo does two things simultaneously: it establishes the venue's identity and it triggers appetite, which is the emotional state you want to reinforce in a restaurant context. Guests who connect at a restaurant are usually hungry. A beautiful plate of food reinforces the decision to stay and spend.
The semi-transparent card creates enough contrast to make the form readable while keeping the background visible. If the card is fully opaque, the design is flat. If it's too transparent, the form is unreadable on light backgrounds.
Best used for: Restaurants, cafes, and food halls with strong visual brand identity.
Configuration notes:
- •Background image should be 1920×1080px minimum, compressed to under 200KB for fast load
- •Card background: white at 90% opacity or venue's secondary brand color at 80% opacity
- •Headline: venue name in large type above the form
- •Subheadline: "Connect to WiFi. Get today's specials." (or similar value statement)
Example 2: The minimal dark mode (retail and tech venues)
Pattern: Pure dark background (black or near-black navy). Single logo in white, centered. Below the logo, two options side by side: "Continue with Google" and "Continue with Facebook" as ghost buttons with brand-colored icons. Below both: a small text link "Use email instead."
Why it converts: Dark mode portals signal premium brand positioning. For retail clients targeting a younger demographic, tech-forward aesthetic, or any venue that wants to avoid the generic "click through" feel, a dark portal communicates that the business has invested in its digital experience.
The two social login options as primary CTAs reduce friction to near-zero: the user is already logged into Google or Facebook on their phone. One tap authenticates them and returns a verified email address. The "Use email instead" fallback catches users who prefer not to use social login.
Best used for: Tech-forward retail, gym and fitness studios, coworking spaces, any venue with a 25-40 demographic.
Configuration notes:
- •Background: #0A0F1E or similar near-black
- •Logo: SVG in white, 200px wide maximum
- •Social buttons: ghost style (transparent background, white border, brand-colored icon)
- •No hero image — the darkness is the design
- •Consent text in small muted type below the buttons (required for GDPR)
Example 3: The loyalty reinforcement (hotel)
Pattern: Hotel logo prominently placed. Background is a lifestyle shot of the property (lobby, pool, room view). Below the logo: "Welcome to [hotel name]." Below that: two buttons — "Loyalty member login" (primary, solid color) and "Guest access" (secondary, ghost). Both buttons capture contact data; the loyalty member login also links the WiFi session to their loyalty account.
Why it converts: This design serves two audiences: returning loyalty members who want their account recognized, and first-time guests who become candidates for the loyalty program. The "loyalty member login" as the primary CTA subtly suggests that having a loyalty account is the default, not the exception. First-time guests who click "guest access" still submit their email and are automatically enrolled in the hotel's follow-up sequence.
Best used for: Hotels, spa resorts, and hospitality venues with a loyalty program or wanting to build one.
Configuration notes:
- •Loyalty member login can connect to a PMS (property management system) via API for recognized guest flow, or simply use the email to cross-reference with an existing loyalty database
- •"Guest access" should still capture name and email — never make it a frictionless click-through
- •Post-login redirect: loyalty members see their account status; guests see a "join our loyalty program" page with a clear incentive
Example 4: The offer-first design (quick service restaurant)
Pattern: Large headline in bold type, positioned above a form: "Get 10% off your next order." Below the headline in smaller text: "Connect to WiFi and we'll send your discount code." The form has one field (email) and a brightly colored CTA button: "Claim my discount."
Why it converts: The offer is the hero, not the venue. In quick service environments (fast food, bakeries, bubble tea shops, food trucks), the transaction is small and impulsive. Customers are not thinking about loyalty; they're thinking about their current order. An immediate, tangible offer converts significantly better than a generic "connect to WiFi" form.
The single email field removes all friction. The CTA says "Claim my discount" rather than "Connect" or "Submit" — it frames the action as receiving a benefit, not providing personal information.
Best used for: Quick service restaurants, food trucks, bakeries, and any venue where the average transaction is under $20 and the customer mindset is immediate.
Configuration notes:
- •The discount code should be delivered in the welcome email immediately after signup, not on the portal itself (this ensures the email address is real before the code is issued)
- •Discount code should be unique per customer and time-limited (7 to 14 days) to create urgency
- •Track redemption rates by linking the code to a POS discount category
Example 5: The event portal (conference or trade show)
Pattern: Event logo and branding take the full background or occupy the top third of the screen. Below: "Welcome to [Event Name] 2026." Three fields: name, company, email. CTA: "Access conference WiFi." Below the CTA in small text: "You'll receive agenda updates and exhibitor resources."
Why it converts: Conference attendees expect to provide contact information to access event WiFi — it's an accepted norm. The three-field form (including company) is justified here because the data is commercially valuable and attendees understand the context. The value statement below the CTA ("agenda updates and exhibitor resources") frames the email capture as a service rather than surveillance.
Event portals often achieve higher completion rates than venue portals because the user has higher stakes: they need reliable WiFi to do their job at the event.
Best used for: Trade shows, conferences, corporate events, festivals, and any temporary event deployment.
Configuration notes:
- •Add a session token to each login record so the event organizer receives a clean list of confirmed attendees
- •The post-event data export should include name, company, email, and connection timestamp
- •Consider adding a company field to the form — for B2B events, company data significantly increases the commercial value of the contact list
- •For events with sponsors, the portal is the right place for a single sponsor logo or "Presented by [Sponsor]" line — not a cluttered ad banner
Example 6: The social proof portal (mid-size retail)
Pattern: Venue logo at the top. Below: a rotating testimonial quote from a previous customer ("Love the exclusive WiFi offers! — Sarah M."). Below the testimonial: a clean two-field form (name + email) with a CTA: "Join 2,400+ loyal customers."
Why it converts: This design borrows a conversion technique from e-commerce landing pages: social proof reduces hesitation. A guest who sees "2,400 loyal customers" before submitting their email feels less like they're doing something unusual and more like they're joining something established. The testimonial adds authenticity.
The number in the CTA ("Join 2,400+ loyal customers") should be real — pull it from the venue's actual database count. A fake or exaggerated number undermines trust if the venue ever mentions it elsewhere.
Best used for: Established retail shops, salons, and boutiques that have an existing customer base and want to reinforce community rather than discount.
Configuration notes:
- •Rotate 2 to 3 testimonials if possible, either through JavaScript or by alternating between portal versions
- •The customer count in the CTA should be updated quarterly to stay current
- •The testimonial should be attributable to a first name and initial (not anonymous) — "Sarah M." is more credible than "A loyal customer"
Example 7: The multi-location brand portal (chain retail or franchise)
Pattern: Brand logo and chain name at the top. Location name ("West End Store" or "[City] Location") in smaller text below. Clean white background with brand primary color on CTA. Form: email + opt-in checkbox. CTA: "Connect to WiFi."
Why it converts: For chain retail and franchise environments, consistency is the design goal. The same portal across 50 locations reinforces brand recognition and ensures that every location captures data in the same format. The location name in the portal lets the brand segment their contact list by store, which enables location-specific campaigns ("You last visited our West End store — here's what's new there").
Best used for: Franchise restaurants, chain retail, hotel groups, gym chains, and any multi-location operator who wants centralized data collection with location-level segmentation.
Configuration notes:
- •Each location should have a distinct portal with the correct location name, but the same brand template
- •Tags or location metadata should be added to each contact at the time of capture to enable location segmentation in campaigns
- •For franchise models, the chain operator and the individual franchisee both need clarity on who owns the contact data — document this in the data processing agreement
Example 8: The WhatsApp portal (LATAM, EMEA, Southeast Asia)
Pattern: Green-and-white color scheme (WhatsApp brand alignment). Headline: "Connect with WhatsApp." Subheadline: "Enter your number. Receive a one-time code. Connect in seconds." Phone number input field with country code selector. CTA: "Send my code." Below: a line of text linking to full terms.
Why it converts: In markets where WhatsApp is the dominant messaging platform (Brazil, Mexico, Saudi Arabia, UK, Germany, Indonesia), users are more comfortable with WhatsApp-based authentication than email. The WhatsApp OTP flow is also inherently verification-enforcing — the user must have a real, active WhatsApp number to complete login. Fake phone numbers fail the verification step.
WhatsApp contacts captured through this flow have near-100% deliverability for subsequent WhatsApp messages, compared to 20 to 30% inbox delivery rates for cold email. In WhatsApp-dominant markets, this portal format produces the highest-quality contact list of any login method.
For more on the WhatsApp WiFi login channel and its market applicability, see why WhatsApp WiFi login is replacing email capture.
Best used for: Any venue in a WhatsApp-dominant market. Particularly effective for hospitality, food service, and retail in LATAM, EMEA, and Southeast Asia.
Configuration notes:
- •Country code selector should default to the venue's country
- •The WhatsApp verification message should be branded with the venue name: "Your [Venue Name] WiFi code is 482719. Valid for 5 minutes."
- •Post-login redirect should be to the venue's WhatsApp channel or a promotional offer page
The anti-patterns to avoid
For every example above, there's an equal and opposite design failure to avoid:
The modal-within-modal: A portal page that requires the user to close a welcome banner before reaching the login form. Eliminates the "above the fold" requirement in a single UX decision.
The essay disclaimer: Five paragraphs of terms and conditions above the login form. Required legal text should be in the footer as a link, not above the CTA.
The dead CTA: A "Connect" button that is greyed out until the user has filled every optional field, even though those fields are supposedly optional.
The wrong redirect: After login, the user lands on a generic "You are now connected" page with no offer and no link. The post-login redirect is the highest-engagement moment — don't waste it on a blank confirmation.
The desktop-first layout: A beautiful desktop portal that is completely broken at 375px because it was never tested on a real phone.
For a systematic approach to portal design decisions, see captive portal design: 7 patterns that convert.
FAQ
What is a WiFi splash page? A WiFi splash page (also called a captive portal) is the login screen that appears when a user connects to a guest WiFi network before they receive internet access. The page is displayed by the WiFi router or access point before authentication and serves as the data capture interface: the user provides their email address, connects via social login, or verifies via WhatsApp OTP. The venue receives the contact information in exchange for free internet access. For businesses, the splash page is the primary interface for building a permission-based guest contact database.
What should a WiFi splash page include? Every WiFi splash page should include the venue's logo and brand colors, a clear value statement explaining what the guest receives ("Free WiFi + exclusive offers"), a login form with no more than two fields (or a social login option), a marketing opt-in checkbox that is unchecked by default, and a link to the venue's privacy policy. Optional additions that increase conversion: a food or lifestyle photo as a background, a testimonial or social proof statement, and a specific offer tied to completing the login (a discount code, a free item offer).
How do I design a WiFi splash page that converts? The three most impactful design decisions: ensure the login form is above the fold on a 375px mobile screen, limit the form to two fields maximum, and include a specific value statement rather than a generic "enter your email to connect." Beyond these fundamentals, match the design to the venue's brand identity (logo, colors, photography) and provide a clear redirect to a useful destination (the menu, a promotional page) after login. Test every deployment on a real mobile device before going live.
What is the best WiFi splash page design for a restaurant? A full-bleed food photo background with a semi-transparent login card converts well in restaurant environments because it reinforces the sensory experience the guest is already in. The CTA should be framed as accessing an offer ("Get today's specials") rather than just "connect to WiFi." Social login options reduce friction on mobile. For quick service restaurants, an offer-first design (discount code visible before login) typically outperforms the full-bleed food photo approach because the transaction intent is immediate rather than experiential.
How are WiFi splash pages different from regular login pages? A WiFi splash page is intercepted by the network itself rather than navigated to by the user. When a device connects to a guest SSID, the router or access point redirects the device's HTTP traffic to the splash page before granting internet access. This means the user sees the portal before they can access any website. Regular login pages are navigated to voluntarily. The intercepted nature of captive portals is what gives them high reach (every connecting device sees them) but also requires careful design: the user did not choose to see this page, so friction and confusion are especially costly.
Ready to deploy high-converting portals for your clients? See platform features for a full overview of portal customization options, or explore captive portal best practices for the technical configuration decisions that support these designs.