Você precisa criar o arquivo .html e usar o botão de upload na página do portal cativo na GUI do pfSense para fazer o upload do arquivo para o firewall.
Para amostras de HTML, você pode tentar o tópico do fórum do pfSense que tem amostra de 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>
Ou você pode tentar as instruções em Personalizando a página de login do Portal Cativo no PFsense
A parte mais relevante é o HTML mais sofisticado:
<!----------------------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>