Commit 7d78998d authored by Martin Schoeler's avatar Martin Schoeler

Add a new contact form to the pricing page

parent 5d30d32b
......@@ -7,7 +7,7 @@ paginate: 8
future: true
# bump if alterting styles
version: 138
version: 139
# read speed
wpm: 160
......
<div id="pricing-form">
<h3 class="display--small theme_type--light"><bold>Contact Us</bold></h3>
<div class="space--1"></div>
<form class="form-validate" data-validate>
<fieldset>
<label class="label--small theme_type--light" for="firstName">Full Name</label>
<input required minlength="3" maxlength="100" class="input input--light input--icon-user input--icon-user-light" type="text" id="fullName" name="fullName" placeholder="Type your full name" />
</fieldset>
<fieldset>
<label class="label--small theme_type--light" for="email">Email Address</label>
<input required minlength="3" maxlength="100" class="input input--light input--icon-email input--icon-email-light" type="email" id="email" name="email" placeholder="Type your email address" />
</fieldset>
<fieldset>
<label class="label--small theme_type--light" for="company">Company</label>
<input minlength="3" maxlength="100" class="input input--light" type="text" id="company" name="company" placeholder="Type your company" />
</fieldset>
<fieldset>
<label class="label--small theme_type--light" for="companySize">Company Size</label>
<select required id="companySize" name="companySize" class="select select--theme-light">
<option selected disabled hidden value="">Select</option>
<option value="50">Less than 50</option>
<option value="100">Up to 100</option>
<option value="up to 500">Up to 500</option>
<option value="up to 1000">Up to 1000</option>
<option value="more than 1000">More than 1000</option>
</select>
</fieldset>
<fieldset>
<label class="label--small theme_type--light" for="inquiry">What is your inquiry about?</label>
<select required id="inquiry" name="inquiry" class="select select--theme-light">
<option selected disabled hidden value="">Select</option>
<option value="learn more">Learn More</option>
<option value="service manage">Service Manager</option>
<option value="help desk">Help Desk</option>
<option value="process automation">Process Automation</option>
<option value="chatbots">Chatbots</option>
<option value="monitoring">Monitoring</option>
<option value="external communication">External Communication</option>
<option value="internal communication">Internal Communication</option>
</select>
</fieldset>
<fieldset>
<label class="label--small theme_type--light" for="message">Message</label>
<textarea required rows="7" class="input input--light" name="message" id="message" placeholder="Type your message"></textarea>
</fieldset>
<fieldset style="display: none">
<label class="label--small theme_type--light" for="recipient">Department</label>
<div class="select select--theme-light">
<select name="recipient" id="recipient">
<option value="sales">Sales</option>
</select>
</div>
</fieldset>
<fieldset style="display: none">
<label class="label--small theme_type--grey" for="company">Solution</label>
<input minlength="3" maxlength="100" class="input input--dark" value="" type="text" id="solution" name="solution" placeholder="" />
</fieldset>
<div class="space--2"></div>
<button type="submit" class="button">Send message</button>
</form>
</div>
<div id="pricing-form__after-box">
<h3>You’ll be in great company! </h3>
<p>We are trusted over thousand companies across 150 countries <br><br> We’ll contact you soon!</p>
</div>
\ No newline at end of file
......@@ -35,7 +35,7 @@
<div id="solution-form">
<h3 class="display--small theme_type--dark"><bold>Contact Us</bold></h3>
<div class="space--2"></div>
<form class="form-validate" data-validate>
<form class="form-validate" data-validate data-source="{{page.solution}}">
<fieldset>
<label class="label--small theme_type--grey" for="firstName">Full Name</label>
<input required minlength="3" maxlength="100" class="input input--dark input--icon-user" type="text" id="fullName" name="fullName" placeholder="Type your full name" />
......@@ -83,15 +83,20 @@
<textarea required rows="7" class="input input--dark" name="message" id="message" placeholder="Type your message"></textarea>
</fieldset>
<fieldset disabled style="display: none">
<fieldset style="display: none">
<label class="label--small theme_type--grey" for="recipient">Department</label>
<div class="select select--theme-dark">
<select name="recipient" id="recipient">
<option value="sales">Sales</option>
<option selected value="sales">Sales</option>
</select>
</div>
</fieldset>
<fieldset style="display: none">
<label class="label--small theme_type--grey" for="company">Solution</label>
<input minlength="3" maxlength="100" class="input input--dark" value="{{page.solution}}" type="text" id="solution" name="solution" placeholder="" />
</fieldset>
<div class="space--2"></div>
<button type="submit" class="button">Send message</button>
</form>
......
......@@ -12,7 +12,7 @@
<link rel="shortcut icon" href="/favicon.ico?v=1"/>
<link rel="stylesheet" href="/styles.css?v={{ site.version }}">
{% if page.class == "index" or page.categories contains "Webinars" or page.class == "solutions-page" %}
{% if page.class == "index" or page.categories contains "Webinars" or page.class == "solutions-page" or page.class == "pricing" %}
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />
{% endif %}
......@@ -43,7 +43,7 @@
<script src="/main.js"></script>
<script src="/redirect.js"></script>
{% if page.class == "index" or page.categories contains "Webinars" or page.class == "solutions-page" %}
{% if page.class == "index" or page.categories contains "Webinars" or page.class == "solutions-page" or page.class == "pricing" %}
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" async type="text/javascript" charset="utf-8"></script>
{% endif %}
......
......@@ -223,4 +223,75 @@
}
}
}
}
// Pricing form
.pricing .featherlight:last-of-type {
background: rgba(3,12,26,.85);
}
.pricing .featherlight-content {
width: 544px;
padding: 0 !important;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
@media screen and (max-width: $tablet) {
width: auto;
}
#pricing-form {
display: block;
margin: 48px;
margin-bottom: 32px;
@media screen and (max-width: $tablet) {
margin: 64px 32px;
}
}
h3 {
font-weight: bold;
}
#pricing-form__after-box {
display: block;
margin: 10px 30px;
color: $space;
h3 {
font-weight: bold;
font-size: 32px;
color: $space;
margin-bottom: 24px;
}
}
.featherlight-close-icon {
background: none;
color: $grey;
font-size: 1.2em;
margin-right: 32px;
margin-top: 32px;
}
}
#pricing-form__after-box {
display: none;
}
#pricing-form {
display: none;
#companySize, #inquiry {
width: 100%;
height: 44px;
padding-left: 10px;
option {
color: $space;
}
option:first-child {
color: $grey;
}
}
}
\ No newline at end of file
......@@ -18,7 +18,7 @@ fieldset {
margin-bottom: 1em;
border-radius: 2px;
border: 1.5px solid $grey-smoke;
border: 1px solid $grey-smoke;
transition: border $tranitions;
@include placeholder($grey);
......@@ -83,6 +83,10 @@ fieldset {
background-position: 1em center;
background-repeat: no-repeat;
padding-left: 3em;
&-light {
background-image: url(../images/contact/user--light.svg);
}
}
.input--icon-email {
......@@ -90,6 +94,9 @@ fieldset {
background-position: 1em center;
background-repeat: no-repeat;
padding-left: 3em;
&-light {
background-image: url(../images/contact/email--light.svg);
}
}
.input--icon-search {
......
......@@ -75,7 +75,12 @@ body.light {
// Selects
.select--theme-light {
border: 1px solid $grey-smoke;
border: 1px solid $grey;
color: $space;
&::placeholder {
color: $grey
}
&:after {
border-top: 1.5px solid $space;
......@@ -134,6 +139,34 @@ body.light {
}
}
.input--light,
.input-child--light input {
@include placeholder($grey-light);
color: $space;
border: 1.5px solid $grey;
background-color: #fff;
input {
@include placeholder($grey);
}
&[disabled],
&.disabled {
background: $grey-bg;
color: $grey-smoke-dark;
@include placeholder($grey-smoke-dark);
}
&:hover,
&:focus {
border-color: $brand;
}
&.error {
border-color: $warning;
}
}
.input-child--dark[data-prefix] {
&:before {
background: $space-grey;
......@@ -142,6 +175,14 @@ body.light {
}
}
.input-child--light[data-prefix] {
&:before {
background: $space-grey;
color: $space;
border-right: 1.5px solid $grey;
}
}
// Table
.table--dark {
td {
......
......@@ -2,6 +2,9 @@
layout: en/default
class: solutions-page
title: "DevOps"
solution: "DevOps"
description: |
devops
......
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M2 0.75C1.31 0.75 0.75 1.31 0.75 2V12C0.75 12.69 1.31 13.25 2 13.25H16C16.69 13.25 17.25 12.69 17.25 12V2C17.25 1.31 16.69 0.75 16 0.75H2Z" stroke="#6B7D99" stroke-width="1.5"/>
<path d="M15.073 4.064L9.06302 8.074L3.05402 4.064" stroke="#6B7D99" stroke-width="1.5"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="18" height="14" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M1 13.106C1 9.323 5.5 10.079 5.5 8.566C5.5 8.566 5.586 7.561 5.09 7.053C4.472 6.423 4 5.665 4 4.405C4 2.524 5.343 1 7 1C8.657 1 10 2.524 10 4.405C10 5.648 9.54 6.422 8.895 7.053C8.424 7.549 8.5 8.566 8.5 8.566C8.5 10.079 13 9.323 13 13.106C13 13.106 11.805 14 7 14C2.195 14 1 13.106 1 13.106V13.106Z" stroke="#6B7D99" stroke-width="1.5"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="14" height="15" fill="white"/>
</clipPath>
</defs>
</svg>
......@@ -2,6 +2,9 @@
layout: en/default
class: solutions-page
title: "Customer Services"
solution: "Customer Services"
description: |
customer Services
......
......@@ -467,3 +467,7 @@ function showSlides() {
// slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 4000);
}
$('.pricing .button.trial.contact').on('click', function (e) {
setTimeout(function(){ $('.pricing .featherlight #solution').attr('value', `Pricing ${e.target.dataset.label}`); }, 500);
});
\ No newline at end of file
......@@ -86,7 +86,7 @@ redirect_from:
<br />
</div>
<footer>
<a class="button trial" data-label="Cloud Gold" target="_blank" rel="noopener noreferrer" href="https://rocket.chat/contact">Contact Us</a>
<a href="#" class="button trial contact" data-featherlight="#pricing-form" data-label="Cloud Gold" rel="noopener noreferrer">Contact Us</a>
</footer>
</div>
......@@ -368,8 +368,7 @@ redirect_from:
<br />
</div>
<footer>
<a class="button trial" data-label="Self-Managed Pro" target="_blank" rel="noopener noreferrer" href="https://rocket.chat/contact">Contact Us</a>
</footer>
<a href="#" class="button trial contact" data-featherlight="#pricing-form" data-label="Self-Managed Pro" rel="noopener noreferrer">Contact Us</a>
</div>
......@@ -385,7 +384,7 @@ redirect_from:
<br />
</div>
<footer>
<a class="button trial" data-label="Self-Managed Enterprise" target="_blank" rel="noopener noreferrer" href="https://rocket.chat/contact">Contact Us</a>
<a href="#" class="button trial contact" data-featherlight="#pricing-form" data-label="Self-Managed Enterprise" rel="noopener noreferrer">Contact Us</a>
</footer>
</div>
</div>
......@@ -547,6 +546,8 @@ redirect_from:
</section>
</div>
<div class="space--8"></div>
<div class="space--8"></div>
{% include adwords/trial.html %}
{% include pricing-form.html %}
<script src="/solutionsForm.js"></script>
\ No newline at end of file
......@@ -2,6 +2,9 @@
layout: en/default
class: solutions-page
title: "Security"
solution: "Security"
description: |
Rocket.Chat Security
......
$(document).on('submit', '.featherlight .form-validate', function(event){
event.preventDefault();
event.preventDefault();
var data = $('.featherlight .form-validate').serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
data['solution'] = 'devops';
return submit(data);
});
......@@ -22,8 +19,11 @@ submit = function(data) {
var current = $.featherlight.current();
current.close();
$.featherlight($('#solution-form__after-box'), {});
if (data.solution.includes('Pricing')){
$.featherlight($('#pricing-form__after-box'), {});
} else {
$.featherlight($('#solution-form__after-box'), {});
}
}
......
......@@ -2,6 +2,9 @@
layout: en/default
class: solutions-page
title: "Team Collab"
solution: "Team Collabotation"
description: |
Team Collab
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment