Skip to content

Commit 25c018c

Browse files
Santhosh-testsigmaSanthosh-testsigma
authored
Moved product subscription form to HubSpot form on tutorials (#46)
1 parent f15504d commit 25c018c

2 files changed

Lines changed: 127 additions & 125 deletions

File tree

‎src/components/Footer.scss‎

Lines changed: 92 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
}
7676

7777
.footer_greenbox{
78-
margin-top: 30px;
78+
margin-top: 3.5rem;
7979
background-color: #CDF0EA;
8080
margin-bottom: 20px;
8181
display: -webkit-box;
@@ -85,44 +85,27 @@
8585
display: flex;
8686
padding: 18px 18px 18px 28px;
8787
border-radius: 6px;
88+
flex-direction: column;
8889
@media (max-width: 576px) {
8990
display: block;
9091
padding: 18px;
9192
}
9293
.green_text{
93-
font-size: 16px;
94+
font-size: 18px;
9495
line-height: 26px;
9596
font-weight: bold;
96-
text-align: initial;
97-
padding-left: 15px;
97+
text-align: center;
9898
padding-right: 20px;
9999
margin-top: 3px;
100100
margin-bottom: 0px;
101101
}
102-
form{
103-
margin-top: -15px;
104-
input{
105-
height: 40px;
106-
margin-top: 11px;
102+
.flex_item {
103+
width: 60%;
104+
max-width: 60%;
105+
margin: auto;
106+
@media only screen and (max-width: 767px) {
107107
width: 100%;
108-
padding-left: 40px;
109-
padding-right: 15px;
110-
border-radius: 4px;
111-
&:focus{
112-
outline: none;
113-
}
114-
&::placeholder{
115-
position: relative;
116-
left: 0px;
117-
color: #cacaca;
118-
font-size: 15px;
119-
}
120-
}
121-
svg{
122-
display: block;
123-
position: relative;
124-
top: 39px;
125-
left: 15px;
108+
max-width: 100%;
126109
}
127110
}
128111
.btn_width{
@@ -183,6 +166,88 @@
183166
}
184167
}
185168
}
169+
#hubspot-form-wrapper{
170+
padding: 1rem 0;
171+
padding-left: 1rem;
172+
@media only screen and (max-width: 767px) {
173+
padding-left: 0;
174+
}
175+
fieldset{
176+
.hs-form-field{
177+
padding: 0.7rem 0;
178+
label{
179+
span{
180+
height: 18px;
181+
color: #666779;
182+
font-size: 16px;
183+
font-weight: 500;
184+
letter-spacing: 0px;
185+
margin-left: 1px;
186+
margin-bottom: 12px;
187+
line-height: 18px;
188+
text-align: center;
189+
}
190+
.hs-form-required{
191+
color: #FE6B6B;
192+
}
193+
}
194+
.input{
195+
@media only screen and (max-width: 767px) {
196+
margin: 0;
197+
}
198+
input{
199+
box-sizing: border-box;
200+
height: 44px;
201+
border: 1px solid #EEEEEE;
202+
border-radius: 3px;
203+
background-color: #FFF;
204+
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03);
205+
@media only screen and (max-width: 767px) {
206+
max-width: 100%;
207+
width: 100%;
208+
}
209+
}
210+
}
211+
}
212+
}
213+
.hs_recaptcha{
214+
display: none;
215+
}
216+
.hs_submit{
217+
.actions{
218+
input[type="submit"]{
219+
color: #FFF;
220+
margin-top: 11px;
221+
margin-left: 0px;
222+
background: #03A973 !important;
223+
border: 1px solid #03A973 !important;
224+
max-width: 100%;
225+
width: 92%;
226+
height: 40px;
227+
border-radius: 4px;
228+
-webkit-border-radius: 2px;
229+
-moz-border-radius: 2px;
230+
line-height: 39px;
231+
text-align: center;
232+
justify-content: center;
233+
align-items: center;
234+
font-size: 1.3rem;
235+
-webkit-transition: 0.5s;
236+
-moz-transition: 0.5s;
237+
-ms-transition: 0.5s;
238+
-o-transition: 0.5s;
239+
transition: 0.5s;
240+
cursor: pointer;
241+
padding-left: 20px;
242+
padding-right: 20px;
243+
@media (max-width: 576px) {
244+
right: 0;
245+
min-width: 100%;
246+
}
247+
}
248+
}
249+
}
250+
}
186251

187252
.footer_greyBox{
188253
margin-top: 30px;

‎src/components/SubscribeButton.jsx‎

Lines changed: 35 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,42 @@
1-
import React, { Component } from 'react';
2-
import ReCAPTCHA from "react-google-recaptcha";
3-
import axios from 'axios';
4-
5-
class SubscribeButton extends Component {
6-
constructor(props) {
7-
super(props);
8-
9-
this.state = {
10-
subscribed: false,
11-
};
12-
this._reCaptchaRef = React.createRef();
13-
}
1+
import React, { useEffect, useRef } from 'react';
142

3+
const SubscribeButton = () => {
4+
const formRef = useRef(null);
155

16-
subscribeNewsletters = async (e) => {
17-
e.preventDefault();
18-
const CONTACT_LIST_API = 'https://staging.testsigma.com/api/website/contacts';
19-
const email = document.getElementById('email').value;
20-
const emailError = document.getElementById('email_error');
21-
let trimmedURL = window.location.href;
6+
useEffect(() => {
7+
const script = document.createElement('script');
8+
script.src = '//js.hsforms.net/forms/embed/v2.js';
9+
script.charset = 'utf-8';
10+
script.type = 'text/javascript';
11+
script.async = true;
12+
document.body.appendChild(script);
2213

23-
if (trimmedURL.length > 250)
24-
trimmedURL = window.location.href.substr(0, 240)+"...";
14+
script.addEventListener('load', () => {
15+
if (window.hbspt && window.hbspt.forms) {
16+
window.hbspt.forms.create({
17+
region: "na1",
18+
portalId: "23341221",
19+
formId: "87576ba1-bb40-433e-9257-4af82e747a6e",
20+
target: "#hubspot-form-wrapper",
21+
});
22+
}
23+
});
2524

26-
const regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
27-
28-
emailError.style.display = "none";
29-
if (!regex.test(email)) {
30-
emailError.style.display = "block";
31-
return false;
32-
} else {
33-
this._reCaptchaRef.current.executeAsync().then(value => {
34-
if (value) {
35-
const formData = {
36-
'CATEGORY': 'Product Updates',
37-
'LSOURCE': 'Tutorials',
38-
'UPDATES': '',
39-
'URL': trimmedURL,
40-
'add_tags_immediately': false,
41-
'email': email,
42-
'g-recaptcha-response': value,
43-
'list_id' : 'bec00ef235',
44-
'tags': ['Product Updates']
45-
};
46-
47-
axios({
48-
method: 'POST',
49-
url: CONTACT_LIST_API,
50-
data: formData,
51-
headers: { "Content-Type": "application/json; charset=UTF-8" },
52-
})
53-
.then(function (response) {
54-
// handle success
55-
this.setState({ subscribed: true });
56-
}.bind(this))
57-
.catch(function (response) {
58-
// handle error
59-
console.error("Failed: ", response);
60-
});
61-
}
62-
});
63-
}
64-
}
25+
return () => {
26+
document.body.removeChild(script);
27+
};
28+
}, []);
6529

66-
render() {
67-
return (
68-
<>
69-
<div className="footer_greenbox">
70-
<div className="flex_item">
71-
<h4 className="green_text">
72-
Stay up to date with product updates & news
73-
</h4>
74-
</div>
75-
<div className={this.state.subscribed ? "hide" : "flex_item"}>
76-
<form>
77-
<svg width="20" height="15" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
78-
<path
79-
d="M12.75 10.4829H1.41667C1.04094 10.4829 0.680609 10.3449 0.414933 10.0991C0.149256 9.85337 0 9.52008 0 9.17255V1.25336C0.0158898 0.915807 0.172132 0.596975 0.436106 0.36343C0.70008 0.129885 1.05138 -0.00031923 1.41667 5.87777e-07H12.75C13.1257 5.87777e-07 13.4861 0.138056 13.7518 0.383797C14.0174 0.629538 14.1667 0.962834 14.1667 1.31036V9.17255C14.1667 9.52008 14.0174 9.85337 13.7518 10.0991C13.4861 10.3449 13.1257 10.4829 12.75 10.4829ZM1.41667 2.53424V9.17255H12.75V2.53424L7.08334 6.02767L1.41667 2.53424ZM1.98334 1.31036L7.08334 4.45524L12.1834 1.31036H1.98334Z"
80-
fill="#CACACA"/>
81-
</svg>
82-
<input type="text" id="email" name="email" placeholder="Your Email Id"/>
83-
</form>
84-
<p id="email_error" className="email-error">Please fill out this field.</p>
85-
</div>
86-
<div className={this.state.subscribed ? "hide" : "flex_item btn_width"}>
87-
<ReCAPTCHA
88-
size="invisible"
89-
ref={this._reCaptchaRef}
90-
sitekey='6LcL08cZAAAAAAn21PBn75R1qLquLlbx1ZB0ZIFd'
91-
/>
92-
<button className="btn" onClick={this.subscribeNewsletters}>Subscribe</button>
93-
</div>
94-
<div className={this.state.subscribed ? "flex_item subscribe-success" : "hide"}>
95-
<h4 className="green_text">
96-
You're now subscribed to our monthly product updates.
97-
</h4>
98-
</div>
99-
</div>
100-
</>
101-
);
102-
}
103-
}
30+
return (
31+
<div className="footer_greenbox">
32+
<div className="flex_item">
33+
<h4 className="green_text">
34+
Stay up to date with product updates & news
35+
</h4>
36+
</div>
37+
<div className="flex_item" id="hubspot-form-wrapper" />
38+
</div>
39+
);
40+
};
10441

10542
export default SubscribeButton;

0 commit comments

Comments
 (0)