Customizing Captive Portal Login Page on PFsense
You can change "(Company Name Here)" to your business name,and you can customize the "Services Offer" to anything you want.
Login Page Preview
Login Page Preview
before you do:
if you want edit =this captive portal login page here the code?
need notepad then paste 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 2016 (Your Company Here) Hotspot. All Rights Reserved.
</b></font><br />
Created By: <a href="http://www.rocainet.com">Benjamin S. Roca Jr</a>. </p></td>
</tr>
</table>
</center>
</form>
</body>
</html>
then save portal.html
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.
0 comments:
Post a Comment