PhishMe Data Entry Toolkit

Base

To use the grid and components, use the below code as your base. This will load all required external CSS and JS. You can then build out your layout using the grid and then copy and paste the HTML of any of the components below. Only embed the CSS code if you are going to edit those styles.

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>Page Title Goes Here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/system/content_files/uploads/da3/ecd/bf-/original/normalize.css">
<link rel="stylesheet" href="/system/content_files/uploads/96a/57b/67-/original/data-entry-toolkit-styles-v2.css">

<!-- Add custom CSS styles here -->
<style>

</style>
</head>

<body>


<!-- These are the external calls to scripts that load out Javascript libraries and help with the interaction of the interface. 
Do not remove these. -->
<script src="/system/content_files/uploads/e2b/7ca/2c-/original/jquery-3.3.1.min.js"></script>
<script src="/system/content_files/uploads/faf/9bd/62-/original/data-entry-toolkit-functions.js"></script>
</body>
</html>

Grid

Standard 12 Column grid to build responsive layouts.

Column 3

Column 9

Column 4

Column 8

Column 5

Column 7

Column 6

Column 7

Column 5

Column 8

Column 4

Column 9

Column 3

Markup Examples

Three Thirds

Column 4

<div class="container">
  <div class="row">
    <div class="four col">
    <p>Column 4</p>
    </div>
    <div class="four col">
    <p>Column 4</p>
    </div>
    <div class="four col">
    <p>Column 4</p>
    </div>
  </div>
</div>

Four Quarters

Column 3

<div class="container">
  <div class="row">
    <div class="three col">
    <p>Column 3</p>
    </div>
    <div class="three col">
    <p>Column 3</p>
    </div>
    <div class="three col">
    <p>Column 3</p>
    </div>
    <div class="three col">
    <p>Column 3</p>
    </div>
  </div>
</div>

Data Entry Form

This markup for the form includes all relevant code to work in Simulator. Just copy and paste and customise the styles as needed.

Username Password

Form Markup

This markup is ready to go into the CMS

HTML

<label for="username">Username</label>
<input id="username" name="username" placeholder="" type="text" value="" /> 

<label for="password">Password</label>
<input id="password" name="password" placeholder="" type="password" value="" /> 

<form action="[[PHISHMESUBMITURL]]" autocomplete="off" id="landing_form1" method="post" name="landing_form1">
  <input class="button primary" name="submit" type="submit" value="Sign In" />
</form>

CSS

label {
  display: block;
  font-weight: 700;
  color: #0E2438;
}
input[type=text] {
  margin: 5px 0px 10px 0px;
  display: block;
}
input[type=password] {
  margin: 5px 0px 25px 0px;
  display: block;
}
input[type=text], input[type=password] {
  background-color: white;
  border: 1px solid #666666;
  padding: 10px;
  box-sizing: border-box;
  max-width: 460px;
  width: 100%;
}

Buttons

Primary Button Secondary Button Inactive Button

Button Markup

HTML

<a href="#" class="button primary">Primary Button</a>
<a href="#" class="button secondary">Secondary Button</a>
<a href="#" class="button inactive">Inactive Button</a>
<button class="button primary">primary Button</button>
<button class="button secondary">Secondary Button</button>
<button class="button inactive">Inactive Button</button>

CSS

.button {
  text-align: center;
  cursor: pointer;
  margin: 0;
  font-size: .9rem !important;
  padding: 10px 16px;
  border: none;
  font-weight: 600;
  text-transform: uppercase;
}
.primary {
  background-color: #D9282F;
  color: #ffffff;
}
.secondary {
  background-color: #90CAF9;
  color: #1B2057;
}
.inactive {
  background-color: #ADB5BB;
  color: #FFFFFF;
}
.button:hover {
  opacity: 0.8;
}

Navbar

Accessible and responsive navbar. For a demo see the navbar on this page. The default behaviour includes a company logo to the left (an example of this is available in the templates section).

Navbar Markup

HTML

<header>
  <div class="container">
  <nav class="navbar">
    <a class="navbar-brand" href="#">Company Logo</a>
    <button class="mobileToggle button primary" aria-label="Toggle navigation" aria-controls="navbar-nav" aria-expanded="false">Menu</button>
    <ul id="navbar-nav" class="float-right">
      <li><a href="#">Link One</a></li>
      <li><a href="#">Link Two</a></li>
    </ul>
  </nav>
  </div>
</header>

CSS

.openNav {
  height: auto;
  display: block !important;
}
.navbar {
  width: 100%;
  padding: .5rem;
  overflow: auto;
  box-sizing: border-box;
}
.navbar .navbar-brand {
  display: inline-block;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 1rem;
  line-height: inherit;
  color: #1B2057;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
}
.navbar ul {
  list-style: none;
  text-align: right;
  margin: 0;
  display: inline-block;
  padding: .5rem 0;
}
.navbar ul li {
  display: inline-block;
  margin-left: 35px;
}
.navbar ul a {
  text-decoration: none;
  color: #0E2438;
  text-transform: uppercase;
  font-size: 0.9em;
  font-weight: 700;
}
.navbar ul a.active {
  color: #D9282F;
}
.navbar ul a:hover {
  color: #D9282F;
}
.navbar .mobileToggle {
  display: none;
  cursor: pointer;
}

To have the nav so it is centered without a logo like the example page, simply remove the navbar-brand anchor and add the class 'center' to navbar-nav ul.

Pagination

First «1 2 3 4 5 »Last

Markup

HTML

<div class="pagination">
  <a href="#">First</a>
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">»</a>
  <a href="#">Last</a>
</div>

CSS

.pagination {
  margin-top: 1rem;
}
.pagination a, .pagination strong {
  background: #EEEEEE;
  display: inline-block;
  margin-right: 3px;
  padding: 4px 12px;
  text-decoration: none;
  line-height: 1.5rem;
  color: #162531;
}
.pagination a:hover {
  background-color: #D9282F;
  color: #FFFFFF;
}
.pagination a:active {
  background: #D9282F;
}
.pagination a.active {
  background: #D9282F;
  font-weight: 700;
  color: #FFFFFF;
}

Tables

Heading	Heading	Heading
Column	Column	Column
Column	Column	Column

Markup

HTML

<table>
  <tbody>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
    <tr>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
    </tr>
    <tr>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 100%;
  font-weight: 400;
}
th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1;
}
th:first-child, td:first-child {
  padding-left: 0;
}
th:last-child, td:last-child {
  padding-right: 0;
}

ReCaptcha

A simulation of a recaptcha form.

I'm not a robot

reCAPTCHA
Privacy - Terms

Markup

HTML

<div class="captcha-container">
  <div class="captcha">
    <div class="captcha-wrapper">
      <button type="button" class="captcha-box box-hover"></button>
    </div>
    <input type="checkbox" name="hidden-captcha" id="hidden-captcha" disabled="disabled" />
    <label for="hidden-captcha" class="captcha-label">I'm not a robot</label>
  </div>
  <div class="captcha-right"> <img src="/system/content_images/uploads/1fe/092/e8-/original/cap.png" alt="img" width="22" height="auto">
    <p>reCAPTCHA<br>
    Privacy - Terms</p>
  </div>
</div>

Miscellaneous

Misc styles, typography, anchors etc.

Off Screen Skip to Main Content

Add this code after the body tag for an option for users to skip to the main content.

HTML

<div id="skip">
  <a href="#content">Skip to Main Content</a>
</div>

CSS

#skip a {
  display: inline;
  float: left;
  font-size: 100%;
  left: -9999px;
  line-height: 33px;
  margin-left: 13px;
  margin-right: 3%;
  position: absolute;
}
#skip a:active,#skip a:focus {
  left: 0px;
  top: 10px;
  z-index: 1000;
}

Components

Base

Grid

Markup Examples

Three Thirds

Four Quarters

Data Entry Form

Form Markup

HTML

CSS

Buttons

Button Markup

HTML

CSS

Navbar

Navbar Markup

HTML

CSS

Pagination

Markup

HTML

CSS

Tables

Markup

HTML

CSS

ReCaptcha

Markup

HTML

Miscellaneous

Off Screen Skip to Main Content

HTML

CSS