Hello!
How to make similar form to the Hero section www.webflow.com?
How to make the Text Field or any element changed after text input on the text field form?
On Webflow site example is the Field Label above the field of form and red line under field.
Thank you!
Looks like it’s custom coded
<style>
.float-label {
position: absolute;
z-index: 1;
pointer-events: none;
left: 0px;
top: 6px;
opacity: 0;
font-size: 11px;
text-transform: uppercase;
color: #a8c0cc;
}
</style>
JS:
var WebflowMarketing = function() {
"use strict";
var api = {};
var REF_COOKIE_NAME = "wf_ref_code";
var ACTIVE_CLASS = "active";
var INVALID_CLASS = "invalid";
var DISABLED_CLASS = "disabled";
var SEGMENT_CARD_CLASS = "segment-card";
var OPACITY = "opacity";
var TRANSITION_OPACITY_IN = OPACITY + " 250ms ease-out-quad";
var TRANSITION_OPACITY_OUT = OPACITY + " 150ms ease-in-quad";
var TRANSFORM = "transform";
var TRANSITION_TRANSFORM_IN = TRANSFORM + " 250ms ease-out-quint";
var TRANSITION_TRANSFORM_OUT = TRANSFORM + " 250ms ease-in-quad";
var INPUT_FIEDS_SELECTOR = "input[type=text], input[type=email], input[type=password]";
var doc = document;
var $doc = $(document);
var win = window;
var $win = $(win);
var loc = win.location;
var body;
var pageName;
var mobileBrowser = false;
var desktopBrowser = false;
var userAgent = navigator.userAgent;
var isSafari = /safari/i.test(userAgent) && !/chrome/i.test(userAgent);
api.init = function() {
var referralCode = _qstring("r");
var html = $("html");
body = $("body");
pageName = body.data("page");
mobileBrowser = html.hasClass("w-mobile");
desktopBrowser = html.hasClass("w-desktop");
if (referralCode) {
monster.set(REF_COOKIE_NAME, referralCode, 365);
}
_initSignupForm();
};
function _initSignupForm() {
$.each($("form.sign-up-form").find(INPUT_FIEDS_SELECTOR), function() {
var input = $(this);
var inputType = input.attr("type");
var isEmail = inputType === "email";
var isPassword = inputType === "password";
var placeholder = input.attr("placeholder");
var floatLabel = $('<div class="float-label">' + placeholder + "</div>");
var emailSuggestion = isEmail ? input.next("div.email-suggestion") : null;
var correctEmailLink = isEmail ? emailSuggestion.find("> a.suggestion") : null;
var passwordValidator = isPassword ? input.next("div.validator") : null;
var lastSuggestion = null;
input.before(floatLabel);
input.on("keyup blur", function(e) {
var blurEvent = e.type === "blur";
var keyEvent = !blurEvent;
var empty = _trim(input.val()) === "";
if (!empty) {
input.removeClass(INVALID_CLASS);
tram(floatLabel).add(TRANSITION_OPACITY_IN).add(TRANSITION_TRANSFORM_IN).start({
y: -30,
opacity: blurEvent ? .5 : 1
});
} else {
tram(floatLabel).add(TRANSITION_OPACITY_OUT).add(TRANSITION_TRANSFORM_OUT).start({
y: 1,
opacity: 0
});
}
if (blurEvent && emailSuggestion) {
input.mailcheck({
topLevelDomains: [ "co.jp", "co.uk", "com", "net", "org", "info", "edu", "gov", "mil", "biz", "pro", "io", "name", "ru", "de", "cn", "co.br", "br", "pl", "fr", "it", "in", "nl", "au", "ir", "es", "eu", "cz", "ca", "ua", "za", "ro", "se", "mx", "us", "tv", "ch", "dk" ],
suggested: function(element, suggestion) {
if (!_validEmail(suggestion.full)) {
_hideValidator(emailSuggestion);
return;
}
if (/.cn$/.test(suggestion.domain)) {
suggestion.domain = suggestion.domain.replace(/.cn$/, ".com");
suggestion.full = suggestion.full.replace(/.cn$/, ".com");
}
lastSuggestion = suggestion;
var emailLink = emailSuggestion.find("> a.suggestion");
emailLink.html(suggestion.full.replace(suggestion.domain, '<span class="correct">' + suggestion.domain + "</span>"));
_showValidator(emailSuggestion);
},
empty: function(element) {
_hideValidator(emailSuggestion);
}
});
} else if (blurEvent && isPassword && passwordValidator) {
var password = _trim(input.val());
if (password !== "" && !_validPassword(password)) {
_showValidator(passwordValidator);
} else {
_hideValidator(passwordValidator);
}
}
if (blurEvent) {
_validate(input);
}
if (keyEvent && emailSuggestion && lastSuggestion && input.val() === lastSuggestion.full) {
_hideValidator(emailSuggestion);
}
if (keyEvent && passwordValidator && _validPassword(_trim(input.val()))) {
_hideValidator(passwordValidator);
}
});
if (correctEmailLink) {
correctEmailLink.on("click", function(e) {
e.preventDefault();
if (lastSuggestion) {
var emailInput = emailSuggestion.prev();
var oldEmail = emailInput.val();
var newEmail = lastSuggestion.full;
emailInput.val(newEmail);
_hideValidator(emailSuggestion);
lastSuggestion = null;
analytics.track("Corrected Email", {
page: pageName,
from: oldEmail,
to: newEmail
});
}
});
}
});
$("form.sign-up-form input[type=submit]").on("click", function(e) {
e.preventDefault();
var button = $(this);
if (button.hasClass(DISABLED_CLASS)) {
return;
}
var form = button.closest("form");
var inputs = form.find(INPUT_FIEDS_SELECTOR);
var valid = true;
var invalidFields = [];
$.each(inputs, function() {
var input = $(this);
if (!_validate(input)) {
valid = false;
invalidFields.push(input);
}
});
if (valid) {
button.addClass(DISABLED_CLASS);
button.attr(DISABLED_CLASS, DISABLED_CLASS);
button.attr("value", button.data("wait-text"));
var name = form.find("input[data-field=name], input.name");
var email = form.find("input[data-field=email], input.email");
var pass = form.find("input[data-field=password], input.password");
_createAccount(name.val(), email.val(), pass.val(), button, {
afterFinish: function(hasError) {
if (hasError) {
button.removeClass(DISABLED_CLASS);
button.removeAttr(DISABLED_CLASS);
button.attr("value", button.data("text"));
}
},
emailExists: function() {
email.focus();
email.addClass("invalid").select();
alert("Oops! It looks like you have already registered with that email address. Click on Log In to sign in to your dashboard.");
_bugsnag("EmailExistsError", "Email already taken", {
page: pageName,
email: email.val()
});
}
});
} else {
tram(invalidFields).add("transform 200ms ease-in-out-quad").start({
x: 4
}).then({
x: -2
}).then({
x: 0
});
}
});
}
function _validate(input) {
var trimmed = _trim(input.val());
var isEmpty = trimmed === "";
var inputType = input.attr("type");
var isEmail = inputType === "email";
var isPassword = inputType === "password";
var valid = !isEmpty;
if (valid && isEmail && !_validEmail(trimmed)) {
valid = false;
}
if (valid && isPassword && !_validPassword(trimmed)) {
valid = false;
analytics.track("Weak Password on Signup", {
page: pageName
});
}
input.toggleClass(INVALID_CLASS, !valid);
return valid;
}
function _validEmail(email) {
if (!/((([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?/.test(email)) {
return false;
}
if (/@(\w*mailinat[o|e]r\w*|binkmail|devnullmail|norih|vps30|letthemeatspam|\w*spamdatabase\w*|safetymail|\d+minutemail|\w+realemail|spamhere\w*|guerillamail\w*|dispostable|yopmail|spamgourmet|sharklasers)./.test(email)) {
analytics.track("Temp Email", {
email: email
});
return false;
}
if (/@sharklasers./.test(email)) {
analytics.track("Shark Lasers", {
email: email
});
console.info("Pew Pew!");
return false;
}
return true;
}
function _validPassword(pass) {
if (pass.length < 6) {
return false;
}
if (/^(1234567?8?9?0?|0?9?8?7?654321|(password|monkey|iloveyou|letmein|dragon|(base|foot|basket)ball|trustno|sunshine|master|ninja|ashley|welcome|jesus|asdf|asdfasdf|pass|abc)\d{0,4}|[q|a][w|z]erty\d{0,10}|0{6,20}|1{6,20}|2{6,20}|3{6,20}|[0|1|2|3]{6,20}|[8|9|0]{6,20}|[a|b|c]{6,20})$/i.test(pass)) {
return false;
}
return true;
}
function _showValidator(element) {
element.addClass(ACTIVE_CLASS);
tram(element).add(TRANSITION_OPACITY_IN).add(TRANSITION_TRANSFORM_IN).start({
y: 0,
opacity: 1
});
}
function _hideValidator(element) {
element.removeClass(ACTIVE_CLASS);
tram(element).add(TRANSITION_OPACITY_OUT).add(TRANSITION_TRANSFORM_OUT).start({
y: -25,
opacity: 0
});
}
function _createAccount(name, email, password, submitButton, options) {
options = options || {};
var referralCode = _qstring("r") || monster.get(REF_COOKIE_NAME);
var hasError = false;
$.ajax({
url: "https://webflow.com/api/user",
type: "POST",
dataType: "json",
data: {
user: {
firstName: name,
email: email,
password: password
},
refId: referralCode
}
}).done(function(data) {
analytics.track("Sign Up", {
type: "marketing"
});
setTimeout(function() {
window.location = "/dashboard/sites/new?a=1";
}, 800);
}).fail(function(xhr, status, err) {
hasError = true;
var json = xhr ? xhr.responseJSON : null;
if (json && json.msg) {
if (json.msg === "email already exists!") {
if (options.emailExists) {
options.emailExists();
return;
}
} else {
alert(json.msg);
}
}
_bugsnag("UserSignupError", "A user signup failed!", {
page: pageName,
response: json,
status: status,
error: err
});
}).always(function() {
if (options.afterFinish) {
options.afterFinish(hasError);
}
});
}
function _qstring(key) {
var vars = [];
var hash;
var hashes = loc.href.slice(loc.href.indexOf("?") + 1).split("&");
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split("=");
if (hash.length < 2) {
continue;
}
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
if (key) {
return vars[key] || null;
}
return vars;
}
function _trim(str) {
return (str || "").replace().replace(/^\s+|\s+$/g, "");
}
function _bugsnag(error, message, meta) {
if (typeof Bugsnag === "undefined" || !Bugsnag) {
return;
}
try {
Bugsnag.notify(error, message, {
metaData: meta
});
} catch (e) {}
}
function _smoothScroll(el, offset) {
var start = $win.scrollTop();
var end = el.offset().top - offset;
var clock = Date.now();
var animate = win.requestAnimationFrame || win.mozRequestAnimationFrame || win.webkitRequestAnimationFrame || function(fn) {
win.setTimeout(fn, 15);
};
var duration = 472.143 * Math.log(Math.abs(start - end) + 125) - 2e3;
var step = function() {
var elapsed = Date.now() - clock;
win.scroll(0, _getY(start, end, elapsed, duration));
if (elapsed <= duration) {
animate(step);
}
};
step();
}
function _getY(start, end, elapsed, duration) {
if (elapsed > duration) {
return end;
}
return start + (end - start) * _ease(elapsed / duration);
}
function _ease(t) {
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}
function _throttle(func) {
var wait, args, context;
return function() {
if (wait) return;
wait = true;
args = arguments;
context = this;
window.tram.frame(function() {
wait = false;
func.apply(context, args);
});
};
}
return api;
}();
$(document).ready(function() {
"use strict";
WebflowMarketing.init();
});
I have something similar that was custom coded here too:
http://nvoi.webflow.io/hmstack
http://nvoi.webflow.io/cwstack
http://nvoi.webflow.io/settings
Thank you!
It looks like that the main page is made not on Webflow, how about this declared.
Perhaps you have more detailed instructions on how to implement a floating label in Webflow? To my regret I am not strong in the code 
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.