Skip to content

Commit

Permalink
form styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@rrusher
rrusher committed Jan 27, 2024
1 parent 79d5947 commit fd3035c
Show file tree
Hide file tree
Showing 5 changed files with 252 additions and 66 deletions.
167 changes: 167 additions & 0 deletions blocks/contact-form/contact-form.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
.contact-form.block .contact-form form .message {
display: none;
padding: 10px 4px;
margin-bottom: 1em;
flex-direction: row;
align-items: center;
border: 1px solid;
column-gap: 4px;
}

.contact-form.block .contact-form form .message.error {
display: flex;
color: var(--error);
border-color: var(--error);
}

.contact-form.block .contact-form form .message.success {
display: flex;
color: var(--success);
border-color: var(--success);
}

.contact-form.block .contact-form form .message .icon {
display: none;
align-self: flex-start;
width: 20px;
height: 20px;
}

.contact-form.block .contact-form form .message.error .icon.error {
display: block;
}

.contact-form.block .contact-form form .message.success .icon.success {
display: block;
}

.contact-form.block .contact-form form .message .details {
display: flex;
flex-direction: column;
}

.contact-form.block .contact-form form .message span {
font-family: var(--font-family-proxima);
font-size: var(--body-font-size-xs);
line-height: var(--line-height-s);
}

.contact-form.block .contact-form form .inputs .name,
.contact-form.block .contact-form form .inputs .contact-info {
display: block;
}

.contact-form.block .contact-form form .inputs input[type="text"],
.contact-form.block .contact-form form .inputs input[type="email"],
.contact-form.block .contact-form form .inputs textarea {
height: 50px;
width: 100%;
padding-left: 15px;
margin-bottom: 1em;
font-family: var(--font-family-proxima);
font-size: var(--body-font-size-s);
line-height: 50px;
color: var(--body-color);
border: 1px solid var(--dark-grey);
}

.contact-form.block .contact-form form .inputs textarea {
width: 100%;
height: 110px;
}

.contact-form.block .contact-form form .agent > div:first-child {
margin-bottom: .5rem;
}

.contact-form.block .contact-form form .agent .label-check {
display: inline-flex;
gap: 10px;
}
.contact-form.block .contact-form form .agent label {
font-weight: 400;
font-size: 14px;
color: var(--body-color);
letter-spacing: .5px;
line-height: 1;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 15px;
cursor: pointer;
}

.contact-form.block .contact-form form .agent input[type="checkbox"] {
height: 24px;
min-width: 24px;
width: 24px;
border-radius: 50%;
border: 1px solid var(--body-color);
opacity: 0;
position: absolute;
z-index: 1;
cursor: pointer;
}

.contact-form.block .contact-form form .agent .checkbox {
cursor: pointer;
height: 24px;
width: 24px;
border: 1px solid #aaa;
margin-right: 8px;
position: relative;
}

.contact-form.block .contact-form form .agent .checkbox svg {
display: none;
height: 10px;
width: 12px;
top: -webkit-calc(50% - 5px);
top: calc(50% - 5px);
position: absolute;
left: 5px;
}

.contact-form.block .contact-form form .agent input[type="checkbox"]:checked+.checkbox svg {
display: block;
}

.contact-form.block .contact-form form .inputs input[type="text"].error,
.contact-form.block .contact-form form .inputs input[type="email"].error {
color: var(--error);
background-color: var(--error-highlight);
border: 2px solid var(--error);
}

.contact-form.block .contact-form .g-recaptcha {
padding: 3rem 0;
}

.contact-form.block .contact-form form .cta {
padding-bottom: 2rem;
}

.contact-form.block .contact-form form .cta .button-container a.button.primary {
background-color: var(--primary-color);
color: var(--white);
}

.contact-form.block .contact-form form .cta .button-container a.button.primary:hover {
background-color: var(--white);
color: var(--body-color);
border-color: var(--grey);
}

@media (min-width: 600px) {
.contact-form.block .contact-form form .inputs .name,
.contact-form.block .contact-form form .inputs .contact-info {
display: flex;
gap: 10px;

}

.contact-form.block .contact-form form .inputs input[type="text"],
.contact-form.block .contact-form form .inputs input[type="email"] {
width: 50%;
}
}
18 changes: 16 additions & 2 deletions blocks/contact-form/contact-form.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export default async function decorate(block) {
// eslint-disable no-console
const addForm = async (block) => {
const displayValue = block.style.display;
block.style.display = 'none';

Expand All @@ -13,4 +14,17 @@ export default async function decorate(block) {
}

block.innerHTML = await data.text();
}
block.style.display = displayValue;
};

export default async function decorate(block) {
const observer = new IntersectionObserver((entries) => {
if (entries.some((e) => e.isIntersecting)) {
observer.disconnect();
addForm(block);
}
}, {
rootMargin: '300px',
});
observer.observe(block);
}
131 changes: 69 additions & 62 deletions blocks/contact-form/forms/contact-us.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,72 @@
<form autocomplete="unset">
<div
class="error text-md-center pt-3 pb-3 pl-3 pt-md-2 pb-md-2 align-items-center justify-content-left flex-wrap d-none">
<svg class="icon-msg error-icon mr-2">
<use xlink:href="/icons/error.svg"></use>
</svg> <span class="text-left"></span></div>
<div
class="success text-left pl-3 pt-3 pb-3 pt-md-2 pb-md-2 align-items-center justify-content-left d-none">
<svg class="icon-msg error-icon mr-2">
<use xlink:href="/icons/success.svg"></use>
</svg> <span></span></div>
<div class="mt-2">
<div class="d-none"><input type="text" name="firstname" autocomplete="off"
data-ddg-inputtype="identities.firstName"></div>
<div class="d-block d-md-flex"><input name="first_name" type="text" placeholder="first name*"
class="mb-3 mr-md-3 col-12 col-md-6 " autocomplete="off"
data-ddg-inputtype="identities.firstName"> <input name="last_name" type="text"
placeholder="last name*" class="mb-3 col-12 col-md-6 flex-shrink-1" autocomplete="off"
data-ddg-inputtype="identities.lastName"></div>
<div class="d-block d-md-flex"><input name="email" type="email" placeholder="email address*"
class="mb-3 mr-md-3 col-12 col-md-6 " autocomplete="off"
data-ddg-inputtype="identities.emailAddress" data-ddg-autofill="true"
style="background-size: auto 24px !important; background-position: right center !important; background-repeat: no-repeat !important; background-origin: content-box !important; background-image: url(&quot;chrome-extension://bkdgflcldnnnapblkhphbgpggdiikppg/img/logo-small.svg&quot;) !important; transition: background 0s ease 0s !important;">
<input name="phone" type="text" placeholder="phone number*"
class="mb-3 col-12 col-md-4 col-lg-3" autocomplete="off"
data-ddg-inputtype="identities.phone"></div>
</div> <textarea name="message"
placeholder="Leave a comment or question and we'll get back to you shortly."
autocomplete="off"></textarea>
<div>
<div class="mt-2 mb-2 label-check">are you currently working with an agent?</div>
<div class="d-inline-flex label-check">
<div class="cmp-checkbox mr-3"><label><input type="checkbox" aria-label="checkbox"
tabindex="-1" value="" autocomplete="off">
<div class="checkbox"><svg class="empty">
<use xlink:href="/icons/checkmark.svg"></use>
</svg></div> <span class="label">yes</span>
</label></div>
<div class="cmp-checkbox"><label><input type="checkbox" aria-label="checkbox" tabindex="-1"
value="" autocomplete="off">
<div class="checkbox"><svg class="empty">
<use xlink:href="/icons/checkmark.svg"></use>
</svg></div> <span class="label">no</span>
</label></div>
<div class="contact-form">
<form>
<div class="message">
<svg class="icon error" role="presentation">
<use xlink:href="/icons/icons.svg#error"></use>
</svg>
<svg class="icon success" role="presentation">
<use xlink:href="/icons/icons.svg#success"></use>
</svg>
<div class="details">
<span></span>
</div>
</div>
</div>
<div id="captcha-20285" class="g-recaptcha mt-5 mb-2 contact-form-franchisee-captcha"
captcha-render="1">
<div style="width: 304px; height: 78px;">
<div><iframe title="reCAPTCHA" width="304" height="78" role="presentation"
name="a-duze5gwmci0x" frameborder="0" scrolling="no"
<div class="inputs">
<div class="name">
<input name="first_name" type="text" placeholder="First Name*" aria-label="first name"
aria-required="true" autocomplete="given-name">
<input name="last_name" type="text" placeholder="Last Name*" aria-label="last name"
aria-required="true" autocomplete="family-name">
</div>
<div class="contact-info">
<input name="email" type="email" placeholder="Email Address*" aria-label="email address"
aria-required="true" autocomplete="email">
<input name="phone" type="text" placeholder="Phone Number*" aria-label="phone number"
aria-required="true" autocomplete="tel-national">
</div>
<textarea name="comments"
placeholder="Leave a comment or question and we'll get back to you shortly."
autocomplete="off"></textarea>
</div>
<div class="agent">
<div>Are you currently working with an agent?</div>
<div class="label-check">
<label>
<input type="checkbox" aria-label="checkbox" tabindex="-1" value="" autocomplete="off" checked>
<div class="checkbox">
<svg class="empty">
<use xlink:href="/icons/icons.svg#checkmark"></use>
</svg>
</div>
<span class="label">yes</span>
</label>
<label>
<input type="checkbox" aria-label="checkbox" tabindex="-1" value="" autocomplete="off">
<div class="checkbox">
<svg class="empty">
<use xlink:href="/icons/icons.svg#checkmark"></use>
</svg>
</div>
<span class="label">no</span>
</label>
</div>
</div>
<div id="captcha-20285" class="g-recaptcha contact-form-captcha" captcha-render="1">
<div style="width: 304px; height: 78px;">
<iframe title="reCAPTCHA" width="304" height="78" role="presentation" name="a-duze5gwmci0x"
frameborder="0" scrolling="no"
sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"
src="https://www.google.com/recaptcha/api2/anchor?ar=2&amp;k=6LebYaYUAAAAAC9SqASljwaF57MpKSvEkwDOzk6l&amp;co=aHR0cHM6Ly93d3cuY29tbW9ubW92ZXMuY29tOjQ0Mw..&amp;hl=en&amp;v=Ya-Cd6PbRI5ktAHEhm9JuKEu&amp;size=normal&amp;cb=sa2502jzdt91"></iframe>
</div><textarea id="g-recaptcha-response-3" name="g-recaptcha-response"
class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
</div><iframe style="display: none;"></iframe>
</div>
<div class="d-flex pt-4 align-items-center mt-4 mb-3">
<section class="cmp-cta"><a rel="noopener noreferrer" href="" target="_blank" tabindex=""
class="btn btn-primary"><span class="cmp-cta__btn-text">
submit
</span></a></section>
</div>
</form>
<textarea id="g-recaptcha-response-3" name="g-recaptcha-response"
class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
</div>
<iframe style="display: none;"></iframe>
</div>
<div class="cta">
<div class="button-container">
<a href="" class="button primary submit" role="button">Submit</a>
</div>
</div>
</form>
</div>
1 change: 0 additions & 1 deletion icons/error.svg
View file

This file was deleted.

1 change: 0 additions & 1 deletion icons/success.svg
View file

This file was deleted.

0 comments on commit fd3035c

Please sign in to comment.