Form with Toast Notification in HTML CSS and js

Form with Toast Notification in HTML CSS and js creates a stunning user experience for Form with Toast Notification, which basically you will see in popular frameworks like React or any, but we are doing it in only html css and JS, no cdns connections 100% no jQuery and actually working form with toast.

Form with Toast Notification in HTML CSS and js

here is the code for Form with Toast Notification in HTML CSS and js

HTML:-

 <form class="entry-form">
                  <div class="form-row-entry">
                    <label for="name" class="entry-label">Name:</label>
                    <input type="text" id="name" name="name" placeholder="Enter your name" required />
                  </div>
                  <div class="form-row-entry">
                    <label for="phone" class="entry-label">Phone Number:</label>
                    <input type="tel" id="number" name="number" placeholder="Enter your Number" required />
                  </div>
					<div class="test-buttons-forwhatsapp">
						<button class="entry-form_submit submit-btn"type="submit">Submit</button>
					</div>
                </form>

CSS :-

These css for toast for form you can get here Login Registration Screens Components

.toast{
position: absolute;
bottom: -300px;
opacity: 0;
border-radius: 60px;
background: #fff;
padding: 10px 10px 10px 10px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
border-left: 6px solid #24358E;
overflow: hidden;
transform: translateY(calc(100% + 30px));
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.toast.active{
transform: translateY(0%);
opacity: 1;
z-index:10000;
bottom: 60px;
left:60px;
}
.toast .toast-content{
display: flex;
align-items: center;
30px;
}
.toast-content .check{
display: flex;
align-items: center;
justify-content: center;
height: 35px;
width: 35px;
background-color: #24358E;
color: #fff;
font-size: 20px;
border-radius: 50%;
padding: 6px;
}
.toast-content .message{
display: flex;
flex-direction: column;
margin: 0 20px 0 10px;
gap: 20px;
}
.message .text{
font-size: 12px;
font-family: ‘DM Sans’, sans-serif;
font-weight: 400;
color: #666666;
line-height:0;
}
.message .text.text-1{
font-weight: 600;
font-family: ‘DM Sans’, sans-serif;
color: #333;
line-height:0;
}
.toast .close{
position: absolute;
top: 10px;
right: 15px;
padding: 5px;
cursor: pointer;
opacity: 0.7;
font-size:8px;
}
.toast .close:hover{
opacity: 1;
}
.toast .progress{
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: -webkit-fill-available;
background: #ddd;
}

Javascript :-

These are the codes for sending form data to Zapier with url parameters

//popup form sending form data to zapier

  const button = document.querySelector(".entry-form_submit");
  const toast = document.querySelector(".toast");
  const closeIcon = document.querySelector(".close");
  const progress = document.querySelector(".progress");
  const toastMessageTitle = document.querySelector(".text-1");
  const checksuccess = document.querySelector('.check');
  const toastMessageBody = document.querySelector(".text-2");
  let timer1, timer2;
  
  
  function getURLParameter(param) {
    const params = new URLSearchParams(window.location.search);
    return params.get(param) || ""; 
  }
  
  // Function to show the toast
  function showToast(title, message, color) {
    toastMessageTitle.innerText = title;
    toastMessageBody.innerText = message;
    toast.style.backgroundColor = color;
    toast.classList.add("show");
  
    clearTimeout(timer1);
    clearTimeout(timer2);
  
    timer1 = setTimeout(() => {
      toast.classList.remove("show");
    }, 5000); 
  }
    document.querySelector(".submit-btn").addEventListener("click", (e) => {
      e.preventDefault();
      
    
      // Get the form data
      const name = document.querySelector("#name").value.trim();
      const number = document.querySelector("#number").value.trim();
    
      // Validate the form fields
      if (!name) {
        alert("Please enter your name.");
        return;
      }
    
      if (!number || !/^\d+$/.test(number)) {
        alert("Please enter a valid phone number.");
        return;
      }
    
      function getURLParameter(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }
    
    // Extract Meta Ads parameters
    const clid = getURLParameter("fbclid") || getURLParameter("gclid") || "empty"; 
    const utmSource = getURLParameter("utm_source") || getURLParameter("utm_source") || "empty";
    const utmMedium = getURLParameter("utm_medium") ||  getURLParameter("utm_agid") || "empty";
    const utmCampaign = getURLParameter("utm_campaign") || getURLParameter("campaignid") || "empty";
    const utmContent = getURLParameter("utm_content") || "empty";
    const placementMeta = getURLParameter("placement") || "empty";
    const device = getURLParameter("device") || "empty";
    const utmterm = getURLParameter("utm_term") || "empty";
    
      // Prepare the data to send
      const data = {
        Last_Name:name,
        Phone: number,
		clid: clid,
        utm_source: utmSource,
        utm_medium: utmMedium,
        utm_campaign: utmCampaign,
        utm_content: utmContent,
        placement: placementMeta,
        device: device,
        utm_term: utmterm,
        Page_URL: window.location.href, // Current page URL
    };
    console.log('data', data);
    
      // Send the data to the server
     const sendToFirstAPI =   fetch("your_url_here", {
        method: "POST",
        body: JSON.stringify(data),
      })
        .then((response) => response.text())
        .then((data) => {
          console.log(data);
          showToast("Success", "Your data has been saved", "#24358E");
          document.querySelector("#name").value = "";
          document.querySelector("#number").value = "";
        })
        .catch((error) => {
          showToast("Error", "Failed to submit. Retry", "#f44336");
          console.error(error);
        });
		
		
    
    // Function to get URL parameters
    function getURLParameter(name) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(name);
    }
    
    
  function showToast(title, message, color) {
    // Set toast message and color
    toastMessageTitle.textContent = title;
    toastMessageBody.textContent = message;
    toast.style.borderLeftColor = color;
    toast.classList.add("active");
    progress.classList.add("active");

    // Auto-hide the toast after 5 seconds
    timer1 = setTimeout(() => {
      toast.classList.remove("active");
    }, 5000);

    timer2 = setTimeout(() => {
      progress.classList.remove("active");
    }, 5300);
  }

  closeIcon.addEventListener("click", () => {
    toast.classList.remove("active");
    setTimeout(() => {
      progress.classList.remove("active");
    }, 9000);
    clearTimeout(timer1);
    clearTimeout(timer2);
  });

Share your opinions below about it and also, if you like the content, check my portfolio aswell

Thefallen.in