Skip to content

Commit 3777c06

Browse files
achen178achen178
authored
Style contact us redesign and add success screen (#2831)
1 parent ad5afa8 commit 3777c06

7 files changed

Lines changed: 153 additions & 63 deletions

File tree

‎app/assets/stylesheets/marketing_redesign/base/_forms.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,15 @@ fieldset > *:not(:last-child) {
6969
[type="url"],
7070
[type="week"]
7171
) {
72-
background-color: var(--color--background-base);
72+
background-color: var(--color--background-light);
7373
border-radius: var(--border-radius--base);
7474
color: var(--color--text);
75-
padding: var(--space--base);
75+
padding: var(--space--medium);
76+
width: 100%;
7677
}
7778

78-
:is(input, select):not(:placeholder-shown) {
79-
padding: var(--space--medium) var(--space--base) var(--space--x-small);
79+
:is(input:not([type="submit"]), select):not(:placeholder-shown) {
80+
padding: var(--space--large) var(--space--medium) var(--space--base);
8081
}
8182

8283
label:has(
@@ -115,7 +116,7 @@ label:has([type="radio"], [type="checkbox"]) {
115116
label:has(input, select) > span {
116117
color: var(--color--text);
117118
font-size: var(--font-size--x-small);
118-
left: var(--space--base);
119+
left: var(--space--medium);
119120
opacity: 1;
120121
pointer-events: none;
121122
position: absolute;

‎app/assets/stylesheets/marketing_redesign/components/_section.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,49 @@
7979
}
8080
}
8181
}
82+
83+
.contact-us {
84+
gap: var(--space--x-large) var(--space--large);
85+
grid-template-columns: 1fr;
86+
87+
form {
88+
width: 100%;
89+
gap: var(--space--base);
90+
}
91+
92+
.input-group {
93+
display: flex;
94+
gap: var(--space--small);
95+
96+
label {
97+
width: 100%;
98+
}
99+
}
100+
}
101+
102+
.contact-header {
103+
text-align: center;
104+
105+
h1 {
106+
line-height: 1.2;
107+
}
108+
}
109+
110+
.form-header :is(h4, p) {
111+
margin: 0;
112+
}
113+
114+
.success-info {
115+
.button {
116+
margin-block: var(--space--medium);
117+
}
118+
}
119+
120+
@media screen and (min-width: 998px) {
121+
.contact-header {
122+
text-align: left;
123+
}
124+
.contact-us {
125+
grid-template-columns: repeat(2, minmax(0, 1fr));
126+
}
127+
}

‎app/controllers/marketing_redesign/opportunities_controller.rb‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,14 @@ def create
1212
conversion_point: HUB_CONVERSION_POINT,
1313
project_type: HUB_PROJECT_TYPE
1414
})
15-
redirect_back(
16-
fallback_location: {action: :new}
15+
redirect_to(
16+
{action: :show}
1717
)
1818
end
1919

20+
def show
21+
end
22+
2023
private
2124

2225
def opportunity_params

‎app/views/marketing_redesign/opportunities/new.html.erb‎

Lines changed: 59 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,66 @@
11
<%= content_for(:page_title, t(".page_title")) %>
2+
<section class="section contact-us">
3+
<div class="contact-header">
4+
<h1><%= t(".section_title") %></h1>
5+
<p class="text-lg"><%= t(".section_subtitle") %></p>
6+
</div>
7+
<%= form_with(
8+
scope: :opportunity,
9+
url: {action: :create},
10+
method: :post
11+
) do |f| %>
12+
<div class="form-header">
13+
<h4>Please fill out your contact info</h4>
14+
<p>We'll be in touch as soon as possible</p>
15+
</div>
216

3-
<%= form_with(
4-
scope: :opportunity,
5-
url: {action: :create},
6-
method: :post
7-
) do |f| %>
8-
<%= f.label :contact_first_name do %>
9-
<span><%= t(".attributes.contact_first_name") %></span>
10-
<%= f.text_field(
11-
:contact_first_name,
12-
autocomplete: "given-name",
13-
placeholder: t(".attributes.contact_first_name")
14-
) %>
15-
<% end %>
17+
<div class="input-group">
18+
<%= f.label :contact_first_name do %>
19+
<span><%= t(".attributes.contact_first_name") %></span>
20+
<%= f.text_field(
21+
:contact_first_name,
22+
autocomplete: "given-name",
23+
placeholder: t(".attributes.contact_first_name")
24+
) %>
25+
<% end %>
1626

17-
<%= f.label :contact_last_name do %>
18-
<span><%= t(".attributes.contact_last_name") %></span>
19-
<%= f.text_field(
20-
:contact_last_name,
21-
autocomplete: "family-name",
22-
placeholder: t(".attributes.contact_last_name")
23-
) %>
24-
<% end %>
27+
<%= f.label :contact_last_name do %>
28+
<span><%= t(".attributes.contact_last_name") %></span>
29+
<%= f.text_field(
30+
:contact_last_name,
31+
autocomplete: "family-name",
32+
placeholder: t(".attributes.contact_last_name")
33+
) %>
34+
<% end %>
35+
</div>
2536

26-
<%= f.label :email do %>
27-
<span><%= t(".attributes.email") %></span>
28-
<%= f.email_field(
29-
:email,
30-
autocomplete: "email",
31-
placeholder: t(".attributes.email")
32-
) %>
33-
<% end %>
37+
<%= f.label :email do %>
38+
<span><%= t(".attributes.email") %></span>
39+
<%= f.email_field(
40+
:email,
41+
autocomplete: "email",
42+
placeholder: t(".attributes.email")
43+
) %>
44+
<% end %>
3445

35-
<%= f.label :company_name do %>
36-
<span><%= t(".attributes.company_name") %></span>
37-
<%= f.text_field(
38-
:company_name,
39-
autocomplete: "organization",
40-
placeholder: t(".attributes.company_name")
41-
) %>
42-
<% end %>
46+
<%= f.label :company_name do %>
47+
<span><%= t(".attributes.company_name") %></span>
48+
<%= f.text_field(
49+
:company_name,
50+
autocomplete: "organization",
51+
placeholder: t(".attributes.company_name")
52+
) %>
53+
<% end %>
4354

44-
<%= f.label :contact_job_title do %>
45-
<span><%= t(".attributes.contact_job_title") %></span>
46-
<%= f.text_field(
47-
:contact_job_title,
48-
autocomplete: "organization-title",
49-
placeholder: t(".attributes.contact_job_title")
50-
) %>
51-
<% end %>
55+
<%= f.label :contact_job_title do %>
56+
<span><%= t(".attributes.contact_job_title") %></span>
57+
<%= f.text_field(
58+
:contact_job_title,
59+
autocomplete: "organization-title",
60+
placeholder: t(".attributes.contact_job_title")
61+
) %>
62+
<% end %>
5263

53-
<%= f.submit t(".submit") %>
54-
<% end %>
64+
<%= f.submit t(".submit"), class: "button button--primary"%>
65+
<% end %>
66+
</section>

‎app/views/marketing_redesign/opportunities/show.html.erb‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<%= content_for(:page_title, t(".page_title")) %>
2+
<section class="section contact-us">
3+
<div class="contact-header">
4+
<h1><%= t(".section_title") %></h1>
5+
<p class="text-lg"><%= t(".section_subtitle") %></p>
6+
</div>
7+
<div class="success-info">
8+
<h4><%= t(".form_success_title") %></h4>
9+
<p><%= t(".form_success_subtitle") %></p>
10+
<%= link_to(
11+
t(".cta"),
12+
{controller: "/marketing_redesign/home", action: :show},
13+
class: "button button--primary"
14+
) %>
15+
</div>
16+
</section>

‎config/locales/en.yml‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -296,14 +296,23 @@ en:
296296
content_3: 2025 marks the archival of the outdated content. We’re calling this Upcase Classic. Moving forward, Upcase for Teams will focus on providing customized upskilling; our talented developers work directly with your team to provide the best learning experience.
297297
opportunities:
298298
new:
299-
page_title: Contact Us
300299
attributes:
301-
contact_first_name: First name
302-
contact_last_name: Last name
300+
contact_first_name: First Name
301+
contact_last_name: Last Name
303302
email: Email
304-
company_name: Company name
305-
contact_job_title: Your role
303+
company_name: Company Name
304+
contact_job_title: Your Role
305+
page_title: Contact Us
306+
section_title: Let’s get to know you and your needs
307+
section_subtitle: Help us tailor your learning experience.
306308
submit: Send
309+
show:
310+
page_title: Contact Us
311+
section_title: Let’s get to know you and your needs
312+
section_subtitle: Help us tailor your learning experience.
313+
form_success_title: Thank you for reaching out!
314+
form_success_subtitle: We’ll be in touch as soon as possible with the email you provided
315+
cta: Return to Home
307316
library:
308317
show:
309318
page_title: Library

‎config/routes.rb‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,17 @@
88
scope module: :marketing_redesign do
99
root controller: :home, action: :show
1010
get "about-us", controller: :about, action: :show
11-
resources(
12-
:opportunities,
11+
resource(
12+
:opportunity,
1313
only: %i[new create],
1414
path: "contact-us",
1515
path_names: {
16-
new: ""
16+
new: "",
17+
show: "success"
1718
}
18-
)
19+
) do
20+
get "success", action: :show
21+
end
1922
if Rails.env.development?
2023
get "library", controller: :library, action: :show
2124
end

0 commit comments

Comments
 (0)