Expanding Contact Form

Developer
Joe Harry
Size
6,876 Kb
Views
10,120
  1. Expanding Contact Form Previews
  2. Expanding Contact Form HTML Codes
  3. Expanding Contact Form CSS Codes
  4. Expanding Contact Form JS Codes

How do I make an expanding contact form?

A functional (front end only) expanding contact form with jQuery validation.Based on my other pen Expanding Card | Material Design. I might end up using this, so write a comment if you find any bugs.. What is a expanding contact form? How do you make a expanding contact form? This script and codes were developed by Joe Harry on 25 October 2022, Tuesday.

Expanding Contact Form Previews
IQ Test

Expanding Contact Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Expanding Contact Form</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='form-overlay'></div>
<div class='icon fa fa-pencil' id='form-container'> <span class='icon fa fa-close' id='form-close'></span> <div id='form-content'> <div id='form-head'> <h1 class='pre'>Get in touch</h1> <p class='pre'>Good choice...</p> <h1 class='post'>Thanks!</h1> <p class='post'>I'll be in touch ASAP</p> </div> <form> <input class='input name' name='user_name' placeholder='Your name please' type='text'> <input class='input email' name='user_email' placeholder='A contact email' type='text'> <select class='input select' name='subject'> <option disabled=''>What shall we talk about?</option> <option selected=''>About a new project</option> <option>About a job opportunity</option> <option>Let's do this over a coffee</option> </select> <textarea class='input message' placeholder='How can I help?'></textarea> <input class='input submit' type='submit' value='Send Message'> </form> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://codepen.io/woodwork/pen/XXZaGQ.js'></script> <script src="js/index.js"></script>
</body>
</html>

Expanding Contact Form - Script Codes CSS Codes

body { font-family: Roboto, sans-serif; width: 100%; font-size: 16px; margin: 0; padding: 0; background: #FAFAFA;
}
h1, h2 { font-weight: 700; color: #FFF; font-weight: 700; font-size: 4em; margin: 0; padding: 0 20px;
}
.form-overlay { width: 0%; height: 100%; top: 0; left: 0; position: fixed; opacity: 0; background: #000; -webkit-transition: background 1s, opacity 0.4s, width 0s 0.4s; transition: background 1s, opacity 0.4s, width 0s 0.4s;
}
.show-form-overlay .form-overlay { width: 100%; opacity: 0.7; z-index: 999; -webkit-transition: background 1s, opacity 0.4s, width 0s; transition: background 1s, opacity 0.4s, width 0s;
}
.show-form-overlay.form-submitted .form-overlay { background: #119DA4; -webkit-transition: background 0.6s; transition: background 0.6s;
}
#form-container { cursor: pointer; color: #FFF; z-index: 1000; position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 5vh; background-color: #f72f4e; overflow: hidden; border-radius: 50%; width: 60px; max-width: 60px; height: 60px; text-align: center; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -webkit-transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s; transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}
#form-container.expand { cursor: auto; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17); border-radius: 0; width: 70%; height: 610px; max-width: 610px; padding: 0; -webkit-transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s; transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;
}
#form-close { cursor: pointer;
}
.icon::before { cursor: pointer; font-size: 30px; line-height: 60px; display: block; -webkit-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon:hover::before { -webkit-animation: wiggle 0.1s linear infinite; animation: wiggle 0.1s linear infinite;
}
.fa-pencil::before { display: block;
}
.fa-close::before { display: none;
}
.expand.fa-pencil::before { display: none;
}
.expand.fa-close::before { display: block; -webkit-animation: none; animation: none;
}
#form-content { font-family: Roboto, sans-serif; -webkit-transform: translateY(150%); transform: translateY(150%); width: 100%; opacity: 0; text-align: left; -webkit-transition: opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#form-content.expand { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; -webkit-transition: opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s; transition: opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
#form-content form { color: #FFF; width: 100%; height: 100%; padding: 0 20px 20px 20px; margin-bottom: 10px; box-sizing: border-box; text-align: left;
}
#form-head { font-size: 100%; padding: 0; margin: 0 20px; color: #FFF; text-align: center; -webkit-transition: all 0.8s 0.6s; transition: all 0.8s 0.6s;
}
#form-head h1, #form-head p { padding: 0; margin: 0;
}
#form-head .pre { display: block;
}
#form-head .post { display: none;
}
.form-submitted#form-head { -webkit-transform: translateY(250%); transform: translateY(250%);
}
.form-submitted#form-head .pre { display: none;
}
.form-submitted#form-head .post { display: block;
}
.input { background: rgba(0, 0, 0, 0.2); display: block; height: 50px; width: 100%; margin: 10px 0; padding: 0 10px; border-width: 0; box-sizing: border-box; border: none; outline: none; box-shadow: none; -webkit-transform: translateX(0); transform: translateX(0);
}
::-webkit-input-placeholder { /* Safari, Chrome and Opera */ color: rgba(255, 255, 255, 0.8); font-size: 90%;
}
/* Firefox 18- */
:-moz-placeholder { color: rgba(255, 255, 255, 0.8); font-size: 90%;
}
/* Firefox 19+ */
::-moz-placeholder { color: rgba(255, 255, 255, 0.8); font-size: 90%;
}
/* IE 10+ */
:-ms-input-placeholder { color: rgba(255, 255, 255, 0.8); font-size: 90%;
}
/* Edge */
::-ms-input-placeholder { color: rgba(255, 255, 255, 0.8); font-size: 90%;
}
/* Default */
:placeholder-shown { color: rgba(255, 255, 255, 0.8); font-size: 90%;
}
input, select, textarea { color: #FFF;
}
.input.message { resize: none; height: 150px; padding: 10px;
}
.input.submit { background-color: #FFF; color: #f72f4e; font-size: 120%; height: 80px; box-shadow: 0 5px rgba(0, 0, 0, 0.5); -webkit-transition: all 0.1s, -webkit-transform 0s 0.6s; transition: all 0.1s, -webkit-transform 0s 0.6s; transition: all 0.1s, transform 0s 0.6s; transition: all 0.1s, transform 0s 0.6s, -webkit-transform 0s 0.6s;
}
.input.submit:active { margin-top: 15px; box-shadow: 0 0 rgba(0, 0, 0, 0.5);
}
.input.form-error { -webkit-animation: error 0.8s ease; animation: error 0.8s ease; background: rgba(0, 0, 0, 0.7);
}
select option { background: #f72f4e; color: #FFF; border: none; box-shadow: none; outline: none;
}
select option:disabled { font-style: italic; color: rgba(255, 255, 255, 0.9); font-size: 90%;
}
.input { -webkit-transition: -webkit-transform 0s 1s; transition: -webkit-transform 0s 1s; transition: transform 0s 1s; transition: transform 0s 1s, -webkit-transform 0s 1s;
}
.form-submitted .input { -webkit-transform: translateX(150%); transform: translateX(150%); opacity: 0; -webkit-transition: all 0.5s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s; transition: all 0.5s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s; transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s; transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
.form-submitted .input:nth-child(1) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;
}
.form-submitted .input:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.form-submitted .input:nth-child(3) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
.form-submitted .input:nth-child(4) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s;
}
.form-submitted .input:nth-child(5) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset;
}
@media (max-width: 600px) { #form-container.expand { height: 100%; width: 100%; max-width: 100%; overflow: initial; overflow-x: hidden; bottom: 0; } h1 { font-size: 300%; } .icon:hover::before { -webkit-animation: none; animation: none; } .form-overlay { display: none; -webkit-transition: none; transition: none; }
}
@-webkit-keyframes error { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(6px); transform: translateX(6px); }
}
@keyframes error { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(6px); transform: translateX(6px); }
}
@-webkit-keyframes wiggle { 0%, 100% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
}
@keyframes wiggle { 0%, 100% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
}

Expanding Contact Form - Script Codes JS Codes

var formContainer = $('#form-container');
bindFormClick();
//Opening the form
function bindFormClick(){ $(formContainer).on('click', function(e) { e.preventDefault(); toggleForm(); //Ensure container doesn't togleForm when open $(this).off(); });
}
//Closing the form
$('#form-close, .form-overlay').click(function(e) { e.stopPropagation(); e.preventDefault(); toggleForm(); bindFormClick();
});
function toggleForm(){ $(formContainer).toggleClass('expand'); $(formContainer).children().toggleClass('expand'); $('body').toggleClass('show-form-overlay'); $('.form-submitted').removeClass('form-submitted');
}
//Form validation
$('form').submit(function() { var form = $(this); form.find('.form-error').removeClass('form-error'); var formError = false; form.find('.input').each(function() { if ($(this).val() == '') { $(this).addClass('form-error'); $(this).select(); formError = true; return false; } else if ($(this).hasClass('email') && !isValidEmail($(this).val())) { $(this).addClass('form-error'); $(this).select(); formError = true; return false; } }); if (!formError) { $('body').addClass('form-submitted'); $('#form-head').addClass('form-submitted'); setTimeout(function(){ $(form).trigger("reset"); }, 1000); } return false;
});
function isValidEmail(email) { var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i; return pattern.test(email);
};
social("twitter/joeharry__", "codepen/woodwork",
"disco");
Expanding Contact Form - Script Codes
Expanding Contact Form - Script Codes
Home Page Home
Developer Joe Harry
Username woodwork
Uploaded October 25, 2022
Rating 4.5
Size 6,876 Kb
Views 10,120
Do you need developer help for Expanding Contact Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joe Harry (woodwork) Script Codes
Name
Vanilla JS - A toggleClass function
Untranslatable
Typophile
That Morning Coffee Feeling
Fake 3D
TTMM Pebble Clock
Video Loading
Loading Christmas...
Long Live Ziggy Stardust
100
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!