Subscription forms offer a simple and functional way to grow your mailing list. Here's how you can use Crisp to create a contact form and save this user to your Contacts!



The first thing you will need to do is ensure Crisp is added to your website page where the subscribe form will live. This guide is for a standalone page that does not actually show the chatbox, so we're going to hide the chat form the page, but will still be able to make use of its capabilities.

1.) First we will import the Bootstrap library to your HTML page.

Bootstrap is a free and open source front end development framework for the creation of websites and web apps. We will be using it for some form styling and its built in behaviors.

Copy the 4 lines of code below and add it in between the <head> tags on your HTML page.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

2.) Next, take the code below and add it just before your closing </body> tag of the HTML page. These pieces of code handle certain behaviors of the form.

The way this works, is that when a customer fills in the inputs, we will use the JavaScript SDK methods to set their name and email in the session. We also push a message on the users behalf so a conversation can be initiated in the Crisp inbox. The message being pushed to the inbox is "Subscribe me to the newsletter please!", but this can be changed by modifying that text in the code below.

<script>
// Hide Crisp on page load
window.CRISP_READY_TRIGGER = function () {
$crisp.push(["do", "chat:hide"]);
};

window.addEventListener('DOMContentLoaded', ()=> {
$crisp.push(["do", "chat:hide"]);
})

// Error banner close button
let closeBtn = document.querySelector(".close-btn")
let alert = document.querySelector('.alert');
let form = document.querySelector('form');
// To ensure checkbox is ticked before submitting form.
let checkBox = document.querySelector('.form-check-input');

// Hide error banner from top of page
closeBtn.addEventListener('click', ()=> {
alert.classList.remove('show');
})

const submitInfo =()=>{
let name = document.getElementById('name');
let email = document.getElementById('email');

// Arbitrary email value length, but checks there is something there before showing success message.
if(name.value.length > 0 && email.value.length > 6){
$crisp.push(["do", "message:send", ["text", "Subscribe me to the newsletter please!"]]);
$crisp.push(["set", "user:email", [email.value]]);
$crisp.push(["set", "user:nickname", [name.value]]);

// Reset input values
name.value = "";
email.value = "";
checkBox.checked = false;
removeError();
showSuccess();
} else{
showError();
}
}

function showError(){
alert.classList.add('show');
}

function removeError(){
alert.classList.remove('show');
}

// When [Subscribe] btn is clicked, prevent page from reloading.
// If checkbox is ticked, run submitInfo()
// Else show error banner at top (it's currently hidden in the HTML) .
form.addEventListener('submit', (e) => {
e.preventDefault();
// let checkBox = document.querySelector('.form-check-input');
if(checkBox.checked){
submitInfo();
} else{
showError();
}
})

let successModal = document.querySelector('.success-modal-submit');
successModal.style.visibility = 'hidden';

function showSuccess(){
successModal.click();
}
</script>


3.) Finally, copy the code below to add the content of the form to your page. This will go in the <body> of your HTML page.

The HTML text content here in Step 3 can be modified to suit your needs.

<!-- Button HTML (to Trigger Modal) -->
<a href="#successModal" class="success-modal-submit" data-toggle="modal">Click to Open Success Modal</a>

<!-- Modal HTML -->
<div id="successModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header justify-content-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body text-center">
<h4>Thanks!</h4>
<p>You've successfully signed up for email notifications!</p>
<!-- <button class="btn btn-success" data-dismiss="modal"><span>Back to home</span> <i
class="material-icons">&#xE5C8;</i></button> -->
<a href="#">Back to home 🏠</a>
</div>
</div>
</div>
</div>

<div class="alert alert-warning fade align-self-center text-center" role="alert">
<strong>You should check in on some of those fields below.</strong>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true" class="close-btn">&times;</span>
</button>
</div>

<form>
<h2 class="text-center">Join our newsletter!</h2>
<!-- Name input -->
<div class="form-outline mb-4">
<input type="text" id="name" class="form-control" required/>
<label class="form-label" for="form5Example1">Name</label>
</div>

<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="email" class="form-control" required/>
<label class="form-label" for="form5Example2">Email address</label>
</div>

<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<label class="form-check-label" for="form5Example3">
I agree to subsribe to marketing emails 😎
</label>

<input class="form-check-input mt-4" type="checkbox" value="" id="form5Example3" />

</div>

<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4" id="subscribe-btn">Subscribe</button>
</form>


This will go in between the <head> tags of your HTML file as well.

<style>

form{
width: 360px;
margin: 5% auto;
background-color: rgb(209, 237, 248);
padding: 15px;
border-radius: 8px;
}

body{
background-color: rgb(85, 190, 238);
}
/* larger checkbox */
.form-check-input{
height:15px;
width: 15px;
}

</style>
Was this article helpful?
Cancel
Thank you!