QR Code Reader Camera Customization

Is there a way I can make a cure reader into a circle rather than the square in Jott form?

Thank you,

dsutphin

Is there a way I can make a circle instead of the square using Jotform qreader

Thank you

dsutphin

Hi dsutphin,

Thanks for reaching out to Jotform Support. Unfortunately, we can't customize the shape of the QR Code widget. As a workaround, we can add a white overlay to make the camera look like a circle. It's really easy to do. Let me show you how:

1. First, copy this code:

.video-container::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, transparent 40%, white 41%);

    transform: translate(-50%, -50%);

    pointer-events: none;

    border-radius: 50%;

}

@media (max-width: 480px) {

    width: 350px;

    height: 300px;

}

2. In Form Builder, select your QR Code Reader widget and click the Wand icon.

3. Go to Custom CSS tab and paste the code.

4. Click the Update button to save the changes. That's it.

Give it a try and let us know how it goes.