Want to get this as ready made template with just 1 CLICK INSTALL?
CSS Code Snippet for Contact Form:
selector{
--button-width: 370px;
--message-height: 400px;
--form-primary-color: #D7C94F;
--form-secondary-color: #1C1915;
--empty-error: 'This field is required.';
--email-error: 'This is not a valid email.';
}
selector .form-left{
margin: 0;
width: calc(100% - var(--button-width));
}
selector input,
selector textarea{
padding: 30px;
}
selector input{
transition: none !important;
}
selector input:-webkit-autofill,
selector input:-webkit-autofill:hover,
selector input:-webkit-autofill:focus,
selector input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 100px var(--form-secondary-color-disabled) inset !important;
}
selector input:-webkit-autofill{
-webkit-text-fill-color: var(--form-primary-color-disabled) !important;
}
selector textarea{
height: var(--message-height);
resize: none;
}
selector input::placeholder,
selector textarea::placeholder{
opacity: 1;
}
selector .elementor-field-type-submit{
display: flex;
align-items: stretch;
width: var(--button-width);
}
selector .elementor-message{
position: absolute;
right: 25px;
background: var(--form-primary-color);
padding: 10px 15px;
border-radius: 50px;
width: max-content;
pointer-events: none;
}
selector .elementor-form-fields-wrapper+.elementor-message{
position: fixed;
bottom: 20px;
right: 50%;
transform: translateX(50%);
}
selector .elementor-form .elementor-button:focus{
outline: none;
}
selector .elementor-form .elementor-button > span{
flex-direction: column;
}
selector .elementor-form .elementor-button .elementor-button-icon{
margin: 0 0 8px;
}
selector .elementor-field-type-textarea .elementor-message{
top: 10px;
}
selector .elementor-form-spinner{
display: none;
}
@media (min-width: 1025px) and (max-width: 1300px){
selector .elementor-field-group .elementor-message{
position: static;
margin: 10px 0 5px;
}
selector .elementor-field-group:not(.elementor-field-type-submit){
align-items: flex-start;
}
}
@media (min-width: 768px) and (max-width: 950px){
selector .elementor-field-group .elementor-message{
position: static;
margin: 10px 0 5px;
}
selector .elementor-field-group:not(.elementor-field-type-submit){
align-items: flex-start;
}
}
@media (max-width: 1024px){
selector{
--message-height: 300px;
}
selector .form-left{
width: 100%;
}
selector .elementor-field-type-submit{
width: 100%;
}
selector .elementor-form .elementor-button > span{
flex-direction: row;
}
selector .elementor-form .elementor-button .elementor-button-icon{
margin: 0 8px 0 0;
}
selector .elementor-form-fields-wrapper+.elementor-message{
position: static;
transform: none;
margin: 15px auto 0;
}
}
JavaScript Code Snippet:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
// Fixed text path link issue
$('.elementor-widget-text-path').each(function(){
var $this = $(this)
link = JSON.parse($this.attr('data-settings')).link.url
$this.find('.e-text-path').wrap('<a href="' + link + '"></a>')
})
// Validate email pattern
function validateEmail(email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test(email)
}
// Remove form result message
function removeFormError(form){
var formError = form.find('.elementor-form-fields-wrapper + .elementor-message')
formError.fadeOut(400)
setTimeout(function(){
formError.remove()
},410)
}
// Get error message values from CSS
function getCSSValue(el, prop, defaultValue='') {
if( ! el.css(prop) ) return defaultValue
var value = el.css(prop).trim().replace(/^\'+|\'+$/g, '').replace(/^\"+|\"+$/g, '')
if(value){
return value
}else{
return defaultValue
}
}
$('.mdw-modern-form').each(function(){
var $this = $(this),
wrapper = $this.find('.elementor-form-fields-wrapper')
form = $(this).find('form')
// Change form structure
wrapper.children().wrapAll('<div class="elementor-form-fields-wrapper form-left"></div>')
wrapper.append($this.find('.elementor-field-type-submit'))
// Show inline field errors
form.find('input, textarea').on('invalid', function(e){
e.preventDefault()
if( $(this).val() == '' ){
$(this).closest('.elementor-field-group').find('.elementor-message').remove()
$(this).after('<span class="elementor-message elementor-message-danger elementor-help-inline elementor-form-help-inline" role="alert">' + getCSSValue($this, '--empty-error', 'This field is required.') + '</span>')
}
if( $(this).attr('type') == 'email' && !validateEmail($(this).val()) ){
$(this).closest('.elementor-field-group').find('.elementor-message').remove()
$(this).after('<span class="elementor-message elementor-message-danger elementor-help-inline elementor-form-help-inline" role="alert">' + getCSSValue($this, '--email-error', 'This is not a valid email.') + '</span>')
}
removeFormError(form)
})
form.find('input, textarea').on('focus', function(){
$(this).closest('.elementor-field-group').find('.elementor-message').remove()
removeFormError(form)
})
// Show form result message
form.on('submit', function(){
submitInterval = setInterval(function(){
if( form.find('.elementor-form-fields-wrapper + .elementor-message').length ){
clearInterval(submitInterval)
if( form.find('.elementor-form-fields-wrapper + .elementor-message').hasClass('elementor-message-success') ){
setTimeout(function(){
removeFormError(form)
},2000)
}
}
},1000)
})
})
})
</script>
CSS Code Snippet for Animating Text Circle:
selector{
--direction: right;
--speed: 20s;
}
selector a:visited{
fill: var(--text-color,#000);
}
selector svg{
animation: var(--direction) var(--speed) linear infinite;
}
@-webkit-keyframes left {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes left {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
