Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contact Forms #195

Merged
merged 48 commits into from
Jun 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
79d5947
base form load
rrusher Jan 25, 2024
fd3035c
form styling
rrusher Jan 27, 2024
096b81a
update form-header style
rrusher Jan 30, 2024
3b4fdfe
Merge remote-tracking branch 'origin/main' into 81-form-contact
rrusher Jan 30, 2024
0f17040
add validation
rrusher Feb 3, 2024
c63b0eb
test submission
rrusher Feb 5, 2024
938993e
linting
rrusher Feb 5, 2024
d699d69
Merge branch 'main' into 81-form-contact
rrusher Feb 6, 2024
eae9440
added validation, form data, and listeners
rrusher Feb 14, 2024
d5dcb8b
adjust data payload
rrusher Feb 15, 2024
0b283a7
remove the disclaimer
rrusher Feb 15, 2024
9189470
json update
rrusher Feb 16, 2024
c221ae2
update payload
rrusher Feb 21, 2024
1ebbc3a
add team inquiry form
rrusher Feb 27, 2024
dfc38db
update form payload
rrusher Feb 28, 2024
6428a4f
build recaptcha server calls
rrusher Apr 1, 2024
ec90a7e
contact complete
rrusher Apr 18, 2024
74b78e9
added consumerID cookie and finished up reCaptcha verification
rrusher Apr 19, 2024
b0fad8c
reset recaptcha token
rrusher Apr 19, 2024
86bf471
Merge branch 'main' into 81-form-contact
rrusher Apr 19, 2024
be268a5
disable some lint errors
rrusher Apr 19, 2024
1bc239d
disable some lint errors
rrusher Apr 19, 2024
9484409
adjust for CLS
rrusher Apr 19, 2024
3d4ac17
add fragment block
rrusher Apr 19, 2024
0dd9b6d
adjust disclaimer css
rrusher Apr 19, 2024
8cdc935
Merge branch 'main' into 81-form-contact
rrusher May 13, 2024
eb5c07d
use placeholder and limit script load
rrusher May 13, 2024
f3e4c0a
recatpcha update
rrusher May 15, 2024
3548c33
clean up form html, correct url to luxury listing
rrusher May 15, 2024
4061119
reduced script loading and added rerenderer for recaptcha
rrusher May 17, 2024
370528e
Merge remote-tracking branch 'origin/main' into 81-form-contact
bstopp May 20, 2024
9903e6a
Fix bad merge.
bstopp May 20, 2024
686c115
Fix bad merge.
bstopp May 20, 2024
afa294e
Fix lint.
bstopp May 20, 2024
74ac9ba
Merge branch 'main' into 81-form-contact
bstopp May 21, 2024
85a5634
Merge branch 'main' into 81-form-contact
bstopp May 23, 2024
6114c22
Merge branch 'main' into 81-form-contact
rrusher May 23, 2024
09a6237
update styles
rrusher May 23, 2024
f6bfb69
Merge branch '81-form-contact' of https://github.com/hlxsites/hsf-com…
rrusher May 23, 2024
cdda86c
move selector for linting
rrusher May 23, 2024
8ce2bcb
Merge branch 'main' into 81-form-contact
rrusher May 29, 2024
8d7d84e
Update fragment.js
rrusher May 29, 2024
67de2f0
Merge branch 'main' into 81-form-contact
bstopp May 31, 2024
5a9d40f
Merge branch 'main' into 81-form-contact
rrusher May 31, 2024
bdfabb7
remove fragment css
rrusher May 31, 2024
0dde511
Merge branch '81-form-contact' of https://github.com/hlxsites/hsf-com…
rrusher May 31, 2024
0aa9ffa
move disclaimer css to column
rrusher May 31, 2024
394482f
Merge branch 'main' into 81-form-contact
rrusher Jun 4, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion blocks/columns/columns.css
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,12 @@
order: 1;
}

.columns.block.disclaimer div {
font-size: var(--body-font-size-xxs);
line-height: var(--line-height-s);
color: var(--dark-grey);
}

.columns.columns-2-cols > div > div:first-of-type {
margin-bottom: 24px;
}
Expand All @@ -66,7 +72,6 @@

.columns.block h3 {
margin-bottom: 24px;

}

@media (min-width: 600px) {
Expand Down
215 changes: 215 additions & 0 deletions blocks/contact-form/contact-form.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
.contact-form.block,
.contact-form.block form {
font-family: var(--font-family-primary);
}

.contact-form.block .form-title {
font-size: var(--heading-font-size-l);
line-height: var(--line-height-xs);
font-weight: 700;
margin-top: 30px;
margin-left: 40px;
margin-bottom: 3em;
}

.contact-form.block .company-name {
font-size: var(--heading-font-size-m);
line-height: var(--line-height-xs);
font-weight: 800;
margin-bottom: .5em;
}

.contact-form.block .company-email,
.contact-form.block .company-phone {
padding-bottom: .5em;
}

.contact-form.block a {
color: var(--body-color);
}

.contact-form.block form#property-contact {
margin-top: 3rem;
}

.contact-form.block form.contact-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 form.contact-form .message.error {
display: flex;
color: var(--error);
border-color: var(--error);
}

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

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

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

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

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

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

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

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

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

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

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

.contact-form.block form.contact-form .agent .agent-check {
display: inline-flex;
gap: 10px;
}

.contact-form.block form.contact-form .agent input[type="radio"] {
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 form.contact-form .agent .checkbox {
cursor: pointer;
height: 24px;
width: 24px;
border: 1px solid #aaa;
margin-right: 8px;
position: relative;
}

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

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

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

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

.contact-form.block form.contact-form .cta .button-container button.primary {
background-color: var(--primary-color);
color: var(--white);
text-transform: uppercase;
margin-right: 12px;
}

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

@media (min-width: 600px) {
.contact-form.block form.contact-form .inputs div {
display: flex !important;
gap: 10px;
}

.contact-form.block form.contact-form .inputs input[type="text"],
.contact-form.block form.contact-form .inputs input[type="email"] {
width: 50%;
}

.contact-form.block form.contact-form .inputs input[name="title"] {
width: calc(50% - 6px);
}

.contact-form.block form.contact-form .inputs input[name="city"] {
flex: 0 0 41.667%;
}

.contact-form.block form.contact-form .inputs input[name="state"] {
flex: 0 0 33.333%;
}

.contact-form.block form.contact-form .inputs input[name="postalCode"] {
flex: 0 0 25%;
flex-shrink: 1;
}
}
Loading
Loading