Customizing Captive Portal Login Page on PFsense
After configuring captive portal, you can change the default login page
Open notepad, copy and paste the code below, click Save As, type File name login.html and simply save it to your desktop.
<!----------------------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 2017 (Your Company Here) Hotspot. All Rights Reserved.
</b></font><br />
Created By: <a href="https://pfsense-tutorial.blogspot.ca">RocaInet</a>. </p></td>
</tr>
</table>
</center>
</form>
</body>
</html>
<!----------------------End Here-------------------------------------------------------------------->
You can change "(Company Name Here)" to your business name,and you can customize the "Services Offer" to anything you want.
Login Page Preview
Next you need to upload it to your PFsense Captive portal
Go to Services > Captive Portal
Find the "Portal page contents" click Browse and select the file login.html from your desktop, then click "Save"
For error page, you can still use the html code above and Add this line of code $PORTAL_MESSAGE$ where you wanted to display the error message.
Done, Enjoy!
If you want to see more videos about PFsense Captive Portal, please visit my youtube Channel
Thank you :)
