Libib | Register

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Libib | Register</title> <meta name="apple-mobile-web-app-title" content="Libib | Web"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="google" content="notranslate" /> <link rel="shortcut icon" href="/img/favicon.png" /> <link rel="icon" type="image/vnd.microsoft.icon" href="/img/favicon.png"> <link rel="icon" type="image/x-icon" href="/img/favicon.png"> <link rel="icon" href="/img/favicon.png" /> <link rel="apple-touch-icon" href="/img/libib-webapp-icon.png"/> <link rel="preload" href="/img/public/squiggle-pattern-gray.jpg" as="image"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script defer data-domain="libib.com" src="https://d2owygzutcldbs.cloudfront.net/js/script.js"></script>   <link href="/css/fonts.css?v=36" rel="preload stylesheet" as="style">  <link rel="stylesheet" href="/css/foundation.css?v=36"> <link rel="stylesheet" href="/css/notification.css?v=36"> <link rel="stylesheet" href="/css/public/style.css?v=36"> <link rel="alternate" hreflang="en" href="https://www.libib.com/register" /><link rel="alternate" hreflang="es" href="https://www.libib.com/register?lang=es" /><link rel="alternate" hreflang="fr" href="https://www.libib.com/register?lang=fr" /><link rel="alternate" hreflang="it" href="https://www.libib.com/register?lang=it" /><link rel="alternate" hreflang="nl" href="https://www.libib.com/register?lang=nl" /><link rel="alternate" hreflang="ja" href="https://www.libib.com/register?lang=ja" /><link rel="alternate" hreflang="pt" href="https://www.libib.com/register?lang=pt" /> </head> <body class="login-tpl"> <div class="navbar-spacer"></div> <div id="navbar"> <div class="grid-container"> <div class="grid-x"> <div class="cell small-4 medium-4 large-2"><a id="logo" class="text-left" title="Homepage" href="/">libib</a></div> <div class="cell small-8 medium-8 large-10"> <a href="#" id="mobile-menu" class="hide-for-large hide-text">Menu</a> <ul class="menu align-right"> <li><a title="Pricing & Features" href="/pricing" class="nav-item">Pricing</a></li> <li><a title="Support Site" href="https://support.libib.com" target="_blank" class="nav-item">Support</a></li> <li><a title="Contact Us" href="/contact" class="nav-item">Contact Us</a></li> <li> <a id="login-button" title="Login" href="/login" class="nav-item button dark big-br margin-left">Login</a> </li> <li> <a title="Create Account" href="/register" class="nav-item button dark big-br margin-left-large">Get Started</a> </li> </ul> </div> </div> </div> </div> <div class="g-recaptcha" data-callback="validate" data-sitekey="6LfH3scUAAAAAOXV1lUMYIdjsKTewETEeTOln9Sf" data-size="invisible"> </div> <div class="grid-x grid-padding-x"> <div id="register-heading" class="cell small-12 text-center"> <h1>Sign up for Libib!</h1> <p class="lead hide-for-small-only">Your library catalog available anywhere, anytime.</p> </div> </div> <form id="register-form" method="post" action="/home/register/submit" data-abide novalidate> <div class="grid-x grid-padding-x "> <div class="cell small-12 align-center"> <h4 class="strong">Select a Subscription</h4> <fieldset id="register-plan-fieldset" class="register-plan-fieldset"> <input id="register-basic" type="radio" name="register-plan" value="basic" tabindex="-1" /> <label class="register-plan-label" for="register-basic" tabindex="0">Basic <span class="register-plan-description"> For an individual's home library. Personal use only, no ads, and we do not sell or share your data. </span> </label> <input id="register-pro" type="radio" name="register-plan" value="pro" tabindex="-1" checked="" /> <label class="register-plan-label" for="register-pro" tabindex="0">Pro 🎉 <span class="register-plan-description"> Enjoy powerful features like lending, patron management, and a customizable published library. </span> </label> <input id="register-ultimate" type="radio" name="register-plan" value="ultimate" tabindex="-1" /> <label class="register-plan-label" for="register-ultimate" tabindex="0">Ultimate <span class="register-plan-description"> Need multiple accounts? More than 25 managers? Need invoicing and POs? Contact Us! </span> </label> </fieldset> <a class="pricing-link" href="/pricing" target="_blank">What's the difference?</a> </div> <div class="cell small-12"> <hr> </div> <div class="cell small-12"> <h4 class="strong">Account Info</h4> </div> <div class="cell small-12 medium-6"> <label>First Name <input name="register-first-name" type="text" placeholder="First Name" required> </label> </div> <div class="cell small-12 medium-6"> <label>Last Name <input name="register-last-name" type="text" placeholder="Last Name" required> </label> </div> <div class="cell small-12 medium-6"> <label>Email <input name="register-email" type="text" placeholder="Email" pattern="email" required> </label> </div> <div class="cell small-12 medium-6"> <label>Password <input name="register-password" type="password" placeholder="Password" required> </label> </div> <div class="cell small-12 medium-6"> <label>Country <select name="register-country" id="register-country" class="static" required> <option value="com">United States (Default)</option> <option value="other">All Others (Not Listed)</option> <option value="com.br" >Brazil (República Federativa do Brasil)</option> <option value="ca" >Canada</option> <option value="fr">France (République française)</option> <option value="de">Germany (Deutschland)</option> <option value="it">Italy (Italia)</option> <option value="co.jp" >Japan (日本)</option> <option value="nl">Netherlands (Nederland)</option> <option value="es">Spain (España)</option> <option value="co.uk" >United Kingdom</option> </select> </label> </div> <div class="cell small-12 medium-6 pro-only"> <label>Organization Name <input name="register-org" id="register-org" type="text" placeholder="Organization Name" maxlength="100" required> </label> </div> <div class="cell small-12"> <hr> </div> <div class="cell small-12 pro-only"> <h4 class="strong">Plan Options</h4> </div> <div class="cell small-12 pro-only gray-background"> <div class="grid-x grid-padding-x">  <div class="cell small-12 medium-3 large-4"> <select name="register-currency" id="register-currency"> <option value="usd">USD $     </option> <option value="eur" >EUR €     </option> <option value="gbp" >GBP £     </option> <option value="cad" >CAD C$     </option> <option value="jpy" >JPY ¥     </option> </select> </div> <div class="cell small-12 medium-6 large-4 text-center">  <div class="switch-wrapper"> <input id="register-monthly" value="month" type="radio" name="register-payment-frequency" checked> <input id="register-yearly" value="year" type="radio" name="register-payment-frequency"> <label for="register-monthly">Monthly</label> <label for="register-yearly">Yearly</label> <span class="highlighter"></span> </div> </div> <div class="cell medium-3 large-4 hide-for-small-only"></div> <div class="cell small-12"> <div id="additional">Add Managers (<span class="currency-symbol">$</span><span id="additional_user_cost">2</span>/per): <select id="register-number-of-managers" name="register-number-of-managers" class="static"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> </select> </div> </div> <div class="cell small-12"> <div id="total">Total: <span class="total_additional"><span class="currency-symbol">$</span><span class="total-amount">9</span>/<span class="total-frequency">month</span></span></div> </div> <div class="cell small-12 text-right"> <small>Education or Nonprofit?</small> <div class="switch tiny"> <input class="switch-input" id="register-discount" type="checkbox" name="register-discount" value="NPEDU25"> <label class="switch-paddle" for="register-discount"> <span class="show-for-sr">Education or Nonprofit?</span> </label> </div> </div> <div id="registration-discount-requirements" class="cell grid-x grid-padding-x hide"> <div class="cell small-12 medium-6"> <strong>For education (K-12 and University):</strong> <p>1. Are you a teacher or student at a K-12 school or University?</p> <p>2. Do you agree to use this Libib account <em>only</em> for classroom work?</p> <p>If you answered <em>yes</em> to both, you qualify.</p> </div> <div class="cell small-12 medium-6"> <strong>For non-profits:</strong> <p>1. Are you part of a legally recognized non-profit organization in your country?</p> <p>2. Do you agree to use this Libib account <em>only</em> for non-profit work?</p> <p>If you answered <em>yes</em> to both, you qualify.</p> </div> <div class="cell small-12"> <strong>Your <b>25% discount</b> will be applied immediately.<br>We will contact you for verification after you have completed registration.</strong> </div> </div> </div> </div> <div class="cell basic-only hide" id="basic-agreement"> <label for="basic-home-required"> <input id="basic-home-required" name="basic-home-required" type="checkbox" value="agreed"> I understand that Libib Basic is only for personal use and have read the <a href="/terms-of-service" target="_blank">Terms of Service</a>. <br>Organizations, businesses and other groups may use Libib Pro or Ultimate. </label> </div> <div class="cell padding-top-20"> <input id="register-submit" type="submit" class="button" value="Submit" /> </div> </div>  <input id="validated" name="validated" type="button" class="hide no-post"> <input type="hidden" id="register-captcha" name="register-captcha" value=""> </form> <div id="checkout-form" class="hide"> <div class="grid-x grid-padding-x"> <div class="cell small-12"> <button id="register-go-back" class="button small">Back</button> <div><small>Do not navigate away from this page after submitting your payment info.<br>You will automatically be redirected to login.</small></div> </div> <div id="checkout" class="cell small-12">  </div> </div> </div> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script src="https://js.stripe.com/v3/"></script> <script> // Shorthand for $( document ).ready() $(function() { const stripe = Stripe("pk_live_i9l6ADDKc1Pu52CFr96yAWUE"); let checkout; // Call our recaptcha on submit, which on success will call the window.validate function $('#register-submit').on('click', function() { grecaptcha.execute(); }); // Gets called on successful captcha completion window.validate = function(captchaToken) { // Reset our captcha, so it can be called again if validation of inputs fail grecaptcha.reset(); // Save our captcha token to a hidden input to confirm server side $('#register-captcha').val(captchaToken); // Trigger our postform by clicking on a hidden button $("#validated").trigger( "click" ); } // postForm(options, callback, preprocess) // #validated is called through the validate() function because we need to captcha first $('#validated').postForm({formId: 'register-form', clearForm: false}, function(data) { if (data) { var obj = $.parseJSON(data); if (obj['clientSecret']) { clientSecret = obj['clientSecret']; stripe.initEmbeddedCheckout({ clientSecret }) .then((initializedCheckout) => { checkout = initializedCheckout; $('#register-form').slideUp(400); $('#checkout-form').removeClass('hide'); // Once checkout is ready, mount it checkout.mount('#checkout'); }) .catch((error) => { console.error('Error initializing embedded checkout:', error); }); } else if (obj['outcome'] == 'success') { // Keep inputs disabled to prevent resubmit before redirection $('input, select').prop('disabled', true); notification(obj['info'], 'notification-success'); setTimeout(function() { window.location.href = "/login"; }, 600); } } }); $('#register-go-back').on('click', function() { $('#register-form').slideDown(400); $('#checkout-form').addClass('hide'); // Safely unmount checkout if it exists if (checkout) { checkout.destroy(); checkout = null; // Clear reference to old instance } // Replace checkout container to ensure clean state $('#checkout').empty(); }); $('input[name="register-plan"]').on('change', function() { var plan = $(this).val(); if (plan == 'basic') { $('#register-org').prop('required', false); $('#basic-home-required').prop('required', true); $('.pro-only').addClass('hide'); $('.basic-only').removeClass('hide'); } else if (plan == 'pro') { $('#register-org').prop('required', true); $('#basic-home-required').prop('required', false); $('.pro-only').removeClass('hide'); $('.basic-only').addClass('hide'); } else if (plan == 'ultimate') { $('.pro-only').addClass('hide') modal("Leave the registration page and contact Libib about our Ultimate plan?", 'Contact Libib', 'modal-confirm', function() { window.location.href = '/contact'; }, function() { $('input[id="register-pro"]').click(); }); } }); // Change the number of managers for payment $( "#register-number-of-managers" ).on('change', function() { calculateTotal(); }); // Change the discount $('#register-discount').on('change', function() { var is_checked = $(this).prop('checked'); if (is_checked) { $('#registration-discount-requirements').removeClass('hide').hide().slideDown(400); } else { $('#registration-discount-requirements').slideUp(400, function() { $(this).addClass('hide'); // Add the 'hide' class back after it's hidden }); } calculateTotal(); }); // On radio change for payment frequency $("input[name='register-payment-frequency']").on('change', function() { calculateTotal(); }); $('#register-currency').on('change', function() { var currency = $(this).val(); if (currency == 'usd') { $('.currency-symbol').text('$'); } else if (currency == 'eur') { $('.currency-symbol').text('€'); } else if (currency == 'gbp') { $('.currency-symbol').text('£'); } else if (currency == 'cad') { $('.currency-symbol').text('C$'); } else if (currency == 'jpy') { $('.currency-symbol').text('¥'); } else if (currency == 'brl') { $('.currency-symbol').text('R$'); } calculateTotal(); }); // Trigger radio button selection when Space or Enter is pressed on the label $('#register-plan-fieldset label').on('keydown', function (e) { if (e.key === ' ' || e.key === 'Enter') { // Prevent scrolling when pressing space e.preventDefault(); $radio = $(this).prev('input'); // Check the radio button programmatically $radio.prop('checked', true); $radio.trigger('change'); } }); function calculatePricing(payment_frequency, currency, field = null) { const pricing_config = { usd: { month: { base_price: 9, multiplier: 2 }, year: { base_price: 99, multiplier: 24 } }, eur: { month: { base_price: 9, multiplier: 2 }, year: { base_price: 99, multiplier: 24 } }, gbp: { month: { base_price: 9, multiplier: 2 }, year: { base_price: 99, multiplier: 24 } }, cad: { month: { base_price: 15, multiplier: 4 }, year: { base_price: 165, multiplier: 48 } }, jpy: { month: { base_price: 1500, multiplier: 400 }, year: { base_price: 16500, multiplier: 4800 } }, brl: { month: { base_price: 50, multiplier: 10 }, year: { base_price: 550, multiplier: 120 } } }; const pricing = pricing_config[currency][payment_frequency]; return field ? pricing[field] : pricing; } function calculateTotal() { var payment_frequency = $("input[name='register-payment-frequency']:checked").val(); var number_of_managers = parseInt($("#register-number-of-managers").val()); var currency = $('#register-currency').val(); var base_price = calculatePricing(payment_frequency, currency, 'base_price'); var multiplier = calculatePricing(payment_frequency, currency, 'multiplier'); var total = base_price + (number_of_managers * multiplier); if ($('#register-discount').prop('checked')) { multiplier = multiplier * 0.75; multiplier = Number.isInteger(multiplier) ? multiplier : multiplier.toFixed(2); $('#additional_user_cost').text(multiplier); total = total * 0.75; total = Number.isInteger(total) ? total : total.toFixed(2); } else { $('#additional_user_cost').text(multiplier); } $('.total-amount').text(total); $('.total-frequency').text(payment_frequency); } }); </script>  <script src="/js/what-input.js?v=36"></script> <script src="/js/foundation.min.js?v=36"></script> <script src="/js/public/script.js?v=36"></script> <script src="/js/notification.js?v=36"></script> <script src="/js/postform.js?v=36"></script> </body> </html>

CINXE.COM

Libib | Register