<!-- Added Open Sans from Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet" type="text/css">

<form class="main-cont" action="#">
  <label for="email" class="label">Email*</label>
  <input id="email" type="text" required>

  <fieldset class="label">
    <legend>Plan*</legend>
    <input id="plan-free" type="radio" name="plan" required>
    <label for="plan-free">Free</label>

    <input id="plan-pro" type="radio" name="plan">
    <label for="plan-pro">Pro</label>
  </fieldset>

  <label for="referral" class="label">How did you hear about us?</label>
  <input id="referral" type="text">

  <br>

  <button type="submit" id="sign-up" class="button">
    Sign Up
  </button>
</form>

body, * {
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
  color: #383838;
}

.main-cont {
  display: block;
  width: 300px;
  padding: 30px;
  border-radius: 5px;
  margin: auto;
  background: #ececec;
}

.label:not(:first-child),
.button {
  display: block;
  margin-top: 15px;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  margin-top: 5px;
  border-radius: 5px;
  border: solid 1px #c7c7c7;
}

fieldset {
  padding: 0;
  border: none;
}

.button {
  display: inline-block;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  background-color: #D80000;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}

.button:hover, .button:focus {
  background-color: #A30000;
}

      var btn = document.getElementById('sign-up');

btn.addEventListener('click', function(event) {
  event.preventDefault();
  alert('You asked to sign up!');    
});