DEV Community: azizqamar7

How to display Webflow form Success message into Netlify with 6 easy steps

azizqamar7 — Sun, 01 Oct 2023 12:40:22 +0000

Display a success message after a user completes a Webflow form instead of redirecting them to a success page in Netlify.

Here are a few steps you can follow to achieve this:

Step 1: Sign in to your Netlify account.

Create or Sign in to your Netlify account.

Step 2: Add data attribute `data-netlify="true"` to your Webflow form.

Adding data-netlify="true" helps in detecting the Netlify forms to manage in the submission within its platform.

Netlify's serverless form handling enables you to manage forms without the need for additional API calls or JavaScript. When you use the built-in form detection capability, our build system will automatically parse your HTML at deployment time, eliminating the need for you to make an API call or add extra JavaScript on your site.

Step 3: Change Webflow Form Settings

Change the form method: POST and form action="/"

Step 4: Create your own form success message & form error message

Create the form success & error div inside the Webflow form-block.

Customize the form success message and how you want to display it after the successful form submission. Similarly, customize the form error message and make both the blocks display: "none".

Step 5: Add this code to the custom code section in the Webflow page settings

Replace the form id="your-form" with your own id.
Add id="form-success-message" to form-success-message div block and add id="form-error-message" to form-error-message div block.

<!--Netlify Form Handler-->
<script>
const form = document.getElementById("your-form");

const formSuccessMessage = document.getElementById("form-success-message");
const formErrorMessage = document.getElementById("form-error-message");

const handleSubmit = (e) => {
  e.preventDefault();
  let formData = new FormData(form);

  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
    .then(() => {
      // Show the success message when the form submission is successful in formSuccessMessage 
      formSuccessMessage.style.display = 'block'
      form.style.display = 'none'
      form.reset();
    })
    .catch((error) => {
      //Show an error message when form submission fails in formErrorMessage 
      formErrorMessage.innerHTML = `<p>Oops! Something went wrong while submitting the form.</p>`;
      formErrorMessage.style.display = 'block'
    });
};

form.addEventListener("submit", handleSubmit);
</script>

Step 6: Export and Go Live

Export the site from the Webflow and open/drop the folder into Netlify by adding a new site to it.

After successful deployment, change the desired site name or add a custom domain into netlify. Enable the form detection in Netlify to verify the data attribute data-netlify="true"

Voila 🎉, you can test the form on the live site.

Create a Custom Exit-Intent Popup for Your Website

azizqamar7 — Sun, 24 Sep 2023 09:46:04 +0000

Engaging with website visitors is essential for businesses and content creators looking to capture leads and boost user interaction. One effective way to do this is by implementing an exit-intent popup, a feature that triggers a popup when a user is about to leave the website. In this blog post, we'll walk you through the creation of a custom exit-intent popup for your website using JavaScript.

Custom scenario for the new user when lands on the site

Here's the scenario:

The form is only on a contact form page.
If the user is on the contact page that has a form in it and the user navigates to other pages of the website and then the user tries to leave the site. We will trigger & show the popup.
This means I want to show an exit-intent popup only when the user has seen the form on the contact page and tries to leave the site if the user is on irrespective page of the site.

Here's the logic I used:

I want to trigger an exit-intent popup only when the user has seen the contact form on the website and tries to leave the site from any of the pages.
If the user has not seen the form, I will not trigger the popup.
I will use cookies, to perform this custom action on site.
If the user tries to leave the site after seeing the form. I will store two cookies for 30 days formSeen and exitPopupShown.
If the user closes the exit-intent popup, I will store a cookie closedExitPopup.

Implementation

Let's break down the key components:

Get Exit Popup & Close Button Element: This code initializes variables for the exit popup element and the close button.

const exitPopupElement = document.getElementById('exit-popup')
const closeButton = document.getElementById('close-popup')

isFormVisible: This function checks if a form is visible on the page. If a form is visible, it sets a cookie to indicate that the user has seen the form.

const isFormVisible = () => {
  const form = document.querySelector('.form')
  const checkDisplay = window.getComputedStyle(form).display
  if (checkDisplay === 'block' || checkDisplay === 'flex') {
    setCookie('formSeen', true, 30)
    return true
  }

  return false
}

validateExitPopup: This function is called when the user attempts to exit the page. It checks if the user has seen the form, if the exit popup has not been shown before, and if the user has not closed the exit popup. If all conditions are met, it displays the exit popup and sets a cookie to indicate that the popup has been shown.

const validateExitPopup = () => {
  if (
    checkCookie('formSeen') &&
    !checkCookie('exitPopupShown') &&
    !checkCookie('closedExitPopup')
  ) {
    showExitPopup()
    setCookie('exitPopupShown', true, 30)
  }
}

showExitPopup: This function sets the display property of the exit popup element to 'block', making it visible to the user.

const showExitPopup = () => {
  exitPopupElement.style.display = 'block'
}

closePopup: When the user clicks the close button, this function hides the exit popup and sets a cookie to indicate that the popup has been closed.

// Close Popup
const closePopup = () => {
  exitPopupElement.style.display = 'none'
  setCookie('closedExitPopup', true, 30)
}

setCookie, getCookie, checkCookie: These functions are used to manage cookies. They allow you to store and retrieve information about whether the user has seen the form, the exit popup has been shown, or the popup has been closed.

// setCookie function
function setCookie(cookieName, cookieValue, exdays) {
  const d = new Date()
  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
  let expires = 'expires=' + d.toUTCString()
  document.cookie = cookieName + '=' + cookieValue + ';' + expires + ';path=/'
}

// getCookie function
function getCookie(cookieName) {
  let name = cookieName + '='
  let decodedCookie = decodeURIComponent(document.cookie)
  console.log(decodedCookie)
  let ca = decodedCookie.split(';')
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i]
    while (c.charAt(0) == ' ') {
      c = c.substring(1)
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length)
    }
  }
  return ''
}

function checkCookie(cookieName) {
  let cookieValue = getCookie(cookieName)
  return cookieValue !== ''
}

Event Listeners: Event listeners are attached to relevant events. The DOMContentLoaded event triggers the isFormVisible function, the mouseleave event triggers the validateExitPopup function, and the close button's click event triggers the closePopup function.

window.addEventListener('DOMContentLoaded', isFormVisible)
document.addEventListener('mouseleave', validateExitPopup)
closeButton.addEventListener('click', closePopup)

Customization

To customize this code for your website, follow these steps:

HTML Markup: Create the HTML structure for your exit popup and form. Make sure to add the appropriate id and class names for the elements you reference in the JavaScript code.

Styling: Style the exit popup and form using CSS to match your website's design.

Cookie Expiry: You can adjust the cookie expiration time (in days) by changing the exdays parameter in the setCookie function.

Trigger Conditions: Modify the conditions in the validateExitPopup function to match your desired trigger criteria. For example, you can change the condition related to the form's visibility to match a different element or condition on your website.

Behavior: Customize the behavior of your exit popup by modifying the showExitPopup and closePopup functions. You can add animations, delays, or other effects to enhance the user experience.

Conclusion

Creating a custom exit-intent popup for your website can be a powerful tool for engaging with visitors and encouraging them to take specific actions. By using the provided JavaScript code as a foundation, you can tailor the popup to suit your website's needs and design. Be sure to test and iterate on your exit-intent popup to optimize its effectiveness in retaining visitors and converting them into leads or customers.

GitHub Repository

Let me know in the comment section if you think this can be improved 😊

Follow @azizqamar7 for more web development content.

Blockchain technology has the potential to change the schooling, the learning experience, and the storage of academic records.

azizqamar7 — Sat, 14 May 2022 18:20:13 +0000

Blockchain has led to the creation of many ideas and inventions, one of them was NFTs. In 2021, the start of the web3 world was phenomenal. I started seeing that technology is taking a curve to something new to adapt and change the way we perceive things in the web3 world.

POLEP - The technology that could revolutionize the education system using blockchain

The idea of POLEP(Proof Of Learning Experience Protocol) introduced by Kelly - founder of Blue studios is great.

The POLEP could be revolutionary in the education space. I believe if this learning experience is implemented in a systematic way like minting your end-of-the-day learning experience on the blockchain would be really great. It gives a sense of feeling to know that you have learnt something new today.

What is POLEP?

POLEP stands for Proof of Learning Experience Protocol. It's a new way of recording your learning experience on the blockchain forever as it’s immutable (cannot be edited). Visit this page to mint your first POLEP

Flex academic achievements & credentials on the blockchain

Not only learning experience, but also we can even store our academic records on the blockchain. The assessments we write in school or colleges can be minted on the blockchain. I know many people want their credentials to keep private to them. But if few students who scored well and good in their academics can mint their credentials on any blockchain network. This will eliminate the paperwork and can easily verify their credentials if joining a new institution just by providing a simple link. Our academic records will be safe on the blockchain. Due to the immutable feature of blockchain, our records or certificates, or credentials cannot be modified. This will help educational institutions to keep records of all the students on the blockchain and no need for hardcopy. This is just an idea I want to share, there might be limitations. Fortunately, by having this idea I thought of something awesome that can change the way we flex our academic achievements and records.

Use of AR technology in education space

As we know, Pokemon Go uses augmented reality technology. Similarly what if our academic achievements and records use some application software on mobile and flex the achievements and records using AR technology. This would save time and money in verifying our records by the institution or by employers if we want a job.

This might help students build their resumes from the beginning of the learning process that can be used for job hunting.

Rewards can be distributed to the students for their learning or based on assessment credits. This way it might motivate students to mint their assessment credits more often.

How students can leverage their skills using Instagram?

Now Instagram also has announced to integrate of NFTs within the platform. Most of them have IG accounts, students can leverage the platform to showcase their learning as an NFT or POLEP. Who knows they may get employed seeing their academic achievements and credentials. NFTs will change the way we perceive knowledge, experience, and flexing skills on the internet.

Ideas are endless if we just look around the educational sector. Share your view & ideas in the comment section below.

Follow @MrsKelleyOhh @BlueStudios_io on twitter & join the discord link here to know more about the POLEP, I'm sure you will love the community. I'm a proud collector of @BlueStudios_io family.

How to get early access of thirdWeb.com

azizqamar7 — Tue, 14 Dec 2021 09:32:45 +0000

On 13 Dec 2021, thirdweb launches its on platform to make it possible and incredibly to build web3 applications.

thirdweb will enable you to build web3 projects such as NFT's, marketplaces, tokens, and more awesome projects in few clicks.

You can also integrate web3 features into your app using SDK's, widgets, and interfaces.

To get early access of thirdweb, follow below steps:

Step-1: Go to this link https://thirdweb.com/early

Step-2: Before clicking connect wallet button, make sure you have Metamask wallet and Polygon Network added in your wallet. (P.S. you can connect any wallet, to be safe you can use Mumbai(testnet) network)

Here how you can get your Metamask wallet and to add Polygon network, add below details by clicking ADD NETWORK button in Metamask.

Network Name: Polygon Mainnet
New RPC URL: https://polygon-rpc.com
ChainID: 137
Symbol: MATIC
Block Explorer URL: https://polygonscan.com/

Step-3: Now you can click connect wallet button

Step-4: After connecting your wallet, you can select polygon network from drop down.

Step-5: Successfully message shall appear as below image shown

Now you have minted Free early access NFT 😉, enjoy!

To view your thirdweb early access NFT

Go to your OpenSea account, if you don't have create one by connecting your Metamask wallet.

After creating, go to your profile section and click the HIDDEN TAB, you can view there.

By clciking bottom 3 dots on that NFT, click unhide.

Here's how Early access membership NFT looks: click here

Hurray! Welcome to Web3.

If you have any questions let me know in the comment section. Happy to help here :)