pfSense Captive Portal page to require 'agree to terms'?
7,421
You need to create the .html file, and then use the upload button on the Captive Portal page within the pfSense GUI to upload the file to your firewall.
For HTML samples you could try the pfSense forum topic which has sample HTML:
<style type="text/css">
<!--
.style3 {
color: #FFFFFF;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.style4 {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
}
.style6 {color: #000099}
-->
</style>
<p align="center"><img src="logo.gif" width="200" height="150"></p>
<div align="center">
<table width="300" border="1">
<tr>
<td bgcolor="#066BBC"><div align="center" class="style3">LOGIN - PORTAL </div></td>
</tr>
</table>
</div>
<p align="center"> </p>
<div align="center">
<table width="300" border="1" bgcolor="#ACCED8">
<tr>
<td>
<form method="post" action="$PORTAL_ACTION$">
<p> </p>
<p align="left" class="style4"><span class="style6">User</span>
<input name="auth_user" type="text" size="15">
</p>
<p align="left" class="style4"><span class="style6">Password</span>
<input name="auth_pass" type="password" size="15">
<input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
</p>
<p align="center">
<span class="style4">
<input name="accept" type="submit" value="Validar">
</span> </p>
<p> </p>
</form> </td>
</tr>
</table>
</div>
<p align="center"> </p>
Or you could try the instructions at Customizing Captive Portal Login Page on PFsense
Of which the most relevant part is the much fancier sample HTML:
<!----------------------Start Here-------------------------------------------------------------------->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>(Company Name Here) Hotspot - Secure Access!</title>
<style type="text/css">
body {
background-color: #000;
}
.offer {
font-size: 24px;
color: #F00;
text-align: center;
}
.bolder {
border: 1px solid #FFF;
}
.copyright {
font-size: 12px;
text-align: center;
color: #FFF;
}
.button {
font-size: 16px;
font-weight: bold;
}
body,td,th {
color: #6FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
</style>
</head>
<title>Secure Access - Login</title>
<body>
<form method="post" action="$PORTAL_ACTION$">
<input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
<center>
<table cellpadding="6" cellspacing="0" width="780" height="380" style="border:1px solid #000000">
<tr height="10" bgcolor="#990000">
<td align="center" style="border-bottom:1px solid #000000">
<font color='white'>
<b>
Welcome to (Your Company Here) Hotspot
</b></font></td>
</tr>
<tr>
<td>
<div id="mainlevel">
<center>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<center>
<div id="mainarea">
<center>
<table width="100%" border="0" cellpadding="5" cellspacing="5">
<tr>
<td>
<div id="maindivarea">
<center>
<div id='statusbox'>
<font color='red' face='arial' size='+2'>
<b>
</b>
</font>
To gain access through the internet, Please enter your Username and Password or Voucher Code.<br><br>
If you have any difficulties you may contact our technical support technician at (Tel. No Here)<br></div>
<br/>
<div id='loginbox'>
<table>
<tr>
<td align="right"> </td>
<td>Members Only</td>
</tr>
<tr><td align="right">Username:</td><td><input name="auth_user" type="text"></td></tr>
<tr><td align="right">Password:</td><td><input name="auth_pass" type="password"></td></tr>
<tr>
<td colspan="2" align="right"> </td>
</tr>
<tr>
<td align="right"> </td>
<td>Prepaid User</td></tr>
<tr>
<td align="right">Voucher Code:</td>
<td><input name="auth_voucher" type="text"></td>
</tr>
<tr>
<td align="right"> </td>
<td><input name="accept" type="submit" class="button" value="Continue"></td>
</tr>
<tr>
<td align="right"></td><td></td></tr>
</table><br />
<hr />
<table width="600" border="0">
<tr>
<td colspan="5"><h2 class="offer">SERVICES OFFER!</h2></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="2" class="bolder">Prepaid</td>
<td width="87"> </td>
<td colspan="2" class="bolder">Unlimited Surfing - up to 4 Mbps</td>
</tr>
<tr>
<td width="150" class="bolder" align="left">1 Hour</td>
<td width="99" class="bolder" align="left">USD 1.00</td>
<td> </td>
<td width="142" class="bolder" align="left">1 Day</td>
<td width="100" class="bolder" align="left">USD 10.00</td>
</tr>
<tr>
<td class="bolder" align="left">3 Hours</td>
<td class="bolder" align="left">USD 2.00</td>
<td> </td>
<td class="bolder" align="left">7 Week</td>
<td class="bolder" align="left">USD 50.00</td>
</tr>
<tr>
<td class="bolder" align="left">5 Hours</td>
<td class="bolder" align="left">USD 4.00</td>
<td> </td>
<td class="bolder" align="left">1 Month</td>
<td class="bolder">USD 150.00</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="offer"><h2 class="offer">OTHER SERVICE!</h2></td>
</tr>
<tr>
<td class="bolder" align="left">Reformatting</td>
<td class="bolder" align="left">USD 100.00</td>
<td> </td>
<td class="bolder" align="left">PC Maintenance</td>
<td class="bolder" align="left">USD 80.00</td>
</tr>
<tr>
<td class="bolder" align="left">Apps Installation</td>
<td class="bolder" align="left">USD 50.00</td>
<td> </td>
<td class="bolder" align="left">PC Upgrade</td>
<td class="bolder" align="left">USD 85.00</td>
</tr>
<tr>
<td class="bolder" align="left">PC / Laptop repair</td>
<td class="bolder" align="left">USD 100.00</td>
<td> </td>
<td class="bolder" align="left">Games</td>
<td class="bolder" align="left">USD 30.00</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<p> </p>
</div>
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</center>
</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
<tr height="10" bgcolor="#990000">
<td align="center" style="border-bottom:1px solid #000000">
<p><font color='white'>
<b>
©Copyright 2013 (Your Company Here) Hotspot. All Rights Reserved.
</b></font><br />
Created By: <a href="http://pfsense-tutorial.blogspot.com">Benjamin S. Roca Jr</a>. </p></td>
</tr>
</table>
</center>
</form>
</body>
</html>
Related videos on Youtube
26 : 25
pfsense Captive Portal
13 : 26
Configure WIFI Captive Portal on pfSense
![[pfsense]How to solve captive portal cannot show automatically when access website](https://i.ytimg.com/vi/X8cdQewVCpU/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDLt9tA18jue8Z-DGNOdzImNoDekw)
03 : 57
[pfsense]How to solve captive portal cannot show automatically when access website
15 : 40
09. pfSense Captive Portal
14 : 20
Authenticated and NON Authenticated Captive Portals with pFsense 2021
Author by
Thomas Ward
Moderator on Ask Ubuntu Member of the Charcoal-SE team, working on the SmokeDetector project Open Web Application Security Project (OWASP) member. Graduated from Penn State University with a BS Degree in Security and Risk Analysis, with a focus on Information and Cyber Security, and a minor in Information Systems and Technology. Network Security Administrator for some local non-profits in my region. Certified Linux Administrator, LPIC-1 level.
Updated on September 18, 2022Comments
-
Thomas Ward almost 2 years
I've got a guest wifi VLAN on my network that can't communicate with the other VLANs, and can only communicate out to the Internet over specific ports.
I'm trying to set up 'Captive Portal' on the network segment so that guests have to click a text box stating that they agree to certain terms of use, and then click a button to continue to get access to the Internet over the guest wifi.
However, I"m a little stuck. I've got the 'captive portal' part configured, but I do not know how to go about configuring the actual page such that it prompts the user to accept the terms, and if they don't, cancel the connection.
Is anyone able to provide a little bit of guidance on where to start with this?