Follow us on - Dribbble | Twitter | Facebook

Form interaction using SVG

Signup form interaction svg

Hi… ? Here is the fun interaction for the signup form using SVG. I focused on how to add interaction for two states on focus and on validation. Let’s see how it’s working.

Demo

Tested in a browser such as chrome, firefox, safari.

Concepts used:

  • HTML
  • SVG
  • CSS3
  • Javascript

HTML:

Create HTML elements and SVG.

SVG has drawn using illustrator, finally past SVG code using get code option in illustrator .

CSS

Add CSS for HTML Elements

.form-field{position: relative; margin: 30px 0;}
.svgFormBg{position: absolute; left: 0; top: 0; transform-origin: center;}
.inputElm{width: 280px; position: relative; z-index: 1; color: #000; top: 0px; height: 39px; border: none; background: transparent; font-size: 15px; vertical-align: top;}
.inputElm:focus{outline: none;}
.ls-content{width: 40px; height: 40px; display: inline-block; }
.rs-content{width: 40px; height: 40px; display: inline-block; line-height: 40px;  text-align: center; font-size: 15px; vertical-align: top;  }

Add SVG related CSS

.ls-circle, .ls-line, .rs-circle, .rs-tick, .rs-close, .rs-close-dot{stroke-width: 2px; stroke: #4486ed; fill: none;}
.ls-circle, .ls-line{ transition: 0.5s all ease;}
.rs-tick{stroke: #27ae60;}
.rs-tick, .rs-error-g{transform: translateX(330px); }
.rs-error-g path{stroke: #e74c3c}

Set initial stage of stroke dasharray and offset for SVG path elements.

.ls-circle{stroke-dasharray: 126; stroke-dashoffset: 0;}
.ls-line{stroke-dasharray: 330; stroke-dashoffset: 330;}
.rs-circle, .rs-arc{stroke-dasharray: 126; stroke-dashoffset: -126; }
.rs-tick{stroke-dasharray: 122; stroke-dashoffset: 122;}
.rs-close{stroke-dasharray: 87.5; stroke-dashoffset: 87.5;}
.rs-close-dot{opacity: 0; }

Finally added initial CSS and HTML elements. Now add class name to the SVG using javascript based on input states.

States are:

  • Focus
  • Validation
  • Success
  • error

Focus State

.focus .ls-circle{stroke-dashoffset: 126;}
.focus .ls-line{stroke-dashoffset: -30;}
.focus .rs-circle{stroke-dashoffset: -126;}

Validatation State

.validate .ls-circle{stroke-dashoffset: 126;}
.validate .ls-line{stroke-dashoffset: -330; transition: 0.1s all 0s ease;}
.validate .rs-circle{animation: rotator 1s linear 0s infinite forwards; stroke-linecap: round; stroke-dasharray: 0, 126; stroke-dashoffset: 0;}
@keyframes rotator {
	0% {stroke-dasharray: 10, 116; stroke-dashoffset: 10;}
	50% {stroke-dasharray: 70, 53; stroke-dashoffset: 126;}
	100% {stroke-dasharray: 10, 116; stroke-dashoffset: 263;}
	
}

Success State

.success .ls-circle{stroke-dashoffset: 126;}
.success .ls-line{stroke-dashoffset: -330;}
.success .rs-circle{stroke-dashoffset: -126;}
.success .rs-tick{animation: tick 0.5s linear 0s 1 forwards; stroke-linecap: round; }
.success .rs-close-g{display: none; }
@keyframes tick {
	0% {stroke-dasharray: 0, 122; stroke-dashoffset: 0;}
	100% {stroke-dasharray: 25, 97; stroke-dashoffset: 122;}
	
}

Error State

.error .ls-circle{stroke-dashoffset: 126;}
.error .ls-line{stroke-dashoffset: -330;}
.error .rs-circle{stroke-dashoffset: -126;}
.error .rs-tick{display: none; }
.error .rs-close{animation: close 0.5s linear 0s 1 forwards; stroke-linecap: round; }
.error .rs-close-dot{opacity: 1;transition: 0.3s all 0.3s ease; }
@keyframes close {
	0% {stroke-dasharray: 0, 87.5; stroke-dashoffset: 0;}
	100% {stroke-dasharray: 11, 76; stroke-dashoffset: 86;}	
}

Demo

Thank you for reading this tutorial, if you have any queries feel free to ask. If you need any tutoial raise the request using Request Tutorial form.

Please share article on social media.

You may also like