creedmoor-sports-form.md

Creedmoor Sports Forms

Instructions:

rj-form.html

This file has the structure for both the form. The HTML for each should be switched out with the current mailchimp forms starting at "<!-- Begin MailChimp Signup Form -->".

rj-form.js

This file has the code needed to make these forms functional. The forms are already hooked up to this list in your account: https://rj2.rejoiner.com/mv4Pwbv/lists/9AvqN2d/

rj-form.css

This file has the code needed to style these forms similarly to your current forms.

rj-form.css

#rejoiner_signup {
  clear: left;
  font: 14px Helvetica,Arial,sans-serif;
  width: 100%;
}

.rejoiner-hidden {
  display: none;
}

#rejoiner_signup form {
  text-align: center;
  padding: 10px 0 10px 0;
}

#rejoiner_signup label {
  display: inline-block!important;
  font-size: 16px;
  padding-bottom: 10px;
  font-weight: bold;
}

#rejoiner_signup input.email {
  font-family: "Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;
  font-size: 15px;
  border: 1px solid #ABB0B2;
  border-radius: 3px;
  color: #343434;
  background-color: #fff;
  box-sizing: border-box;
  height: 32px;
  padding: 0px 0.4em;
  display: inline-block;
}

#rejoiner_signup #rejoiner_signup_content .rj-subscribe-btn {
  display: inline;
}

#rejoiner_signup .button {
  font-size: 13px;
  border: none;
  border-radius: 3px;
  letter-spacing: .03em;
  color: #fff;
  background-color: #aaa;
  box-sizing: border-box;
  height: 32px;
  line-height: 32px;
  padding: 0 18px;
  display: inline-block;
  margin: 0;
  transition: all 0.23s ease-in-out 0s;
}

#rejoiner_signup .button:hover {
  background-color: #777;
  cursor: pointer;
}

@media (max-width: 768px) {
  #rejoiner_signup input.email {
    width: 100%;
    margin-bottom: 5px;
  }
  
  #rejoiner_signup .button {
    width: 100%;
    margin: 0;
  }
}

rj-form.html

<!-- Begin Rejoiner Signup Form -->
<div id="rejoiner_signup">
  <form id="rejoiner_subscribe_form">
    <div id="rejoiner_signup_content">
      <label for="rj-EMAIL">Subscribe to our Email Newsletter</label>
      <div id="rejoiner_input">
        <input type="email" name="EMAIL" class="email" id="rj-EMAIL" placeholder="email address" required>
        <div class="rj-subscribe-btn">
          <input type="submit" value="Subscribe" name="subscribe" id="rj_subscribe" class="button">
         </div>
      </div>
    </div>
    <div id="rejoiner_confirm" class="rejoiner-hidden">
      Thanks for subscribing!
    </div>
  </form>
</div>

rj-form.js

var rejoinerSiteId = 'mv4Pwbv';
var rejoinerDomain = 'creedmoorsports.com';
var rejoinerListId = '9AvqN2d';

var _rejoiner = _rejoiner || [];
_rejoiner.push(['setAccount', rejoinerSiteId]);
_rejoiner.push(['setDomain', rejoinerDomain]);
(function() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'https://cdn.rejoiner.com/js/v4/rj2.lib.js';
  var x = document.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);
})();


var rjForm = document.getElementById('rejoiner_subscribe_form');
var rjFormEmailInput = document.getElementById('rj-EMAIL');
var rjFormInputs = document.getElementById('rejoiner_input');
var rjFormConfirm = document.getElementById('rejoiner_confirm');
rjForm.addEventListener('submit', function(event) {
  event.preventDefault();
  if (rjFormEmailInput.value) {
    _rejoiner.push(['subscribeToList', {
      email: rjFormEmailInput.value,
      list_id: rejoinerListId,
      source: 'website',
    }]);
    rjFormInputs.classList.add('rejoiner-hidden')
    rjFormConfirm.innerHTML = 'Thank you for subscribing!';
    rjFormConfirm.classList.remove('rejoiner-hidden');
  }
});