Skip to content

Commit 70f4271

Browse files
giliomeejgroansong
andauthored
Move embedded forms over from mautic/acquia to hubspot (#10747)
* Added logging for calls to mautic_proxy In the process of moving from Mautic/Acquia to Hubspot. Starting by adding a log to develop a deeper understanding of requests, in order to prepare for writing the Hubspot part, which would see requests temporarily be sent to both Acquia and Hubspot before turning the Acquia requests off. * Added MauticLog table * Added entry for every call to mautic_proxy * Wrapped DB call in try-except * func(Hubspot): Replace homepage form from Acquia / Mautic to Hubspot. Add CSS to style Hubspot forms in a similar way to bootstrap. * fix(Hubspot): Homepage newsletter signup form styling. * func(Newsletters): Come up with more generaic class * func(Newsletters): Change Bounty funder & Hunter newsletters over to use Hubspot instead of Acquia. * func(Newsletter): Change Acquia forms to Hubspot for about & mission. * chore(Hubspot): Small comment change * fix(Hubspot): SASS extend was throwing an error in the linter. @extend is valid SASS -> https://sass-lang.com/documentation/at-rules/extend Co-authored-by: Roan Song <[email protected]>
1 parent 97a227a commit 70f4271

File tree

7 files changed

+131
-132
lines changed

7 files changed

+131
-132
lines changed

.stylelintrc

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
"rules": {
44
"no-descending-specificity": null,
55
"at-rule-no-unknown": [
6-
true, {
6+
true,
7+
{
78
"ignoreAtRules": [
9+
"extend",
810
"extends",
911
"ignores",
1012
"mixin",
@@ -36,7 +38,5 @@
3638
"turn"
3739
]
3840
},
39-
"plugins": [
40-
"stylelint-scss"
41-
],
41+
"plugins": ["stylelint-scss"]
4242
}
+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/** Forms embedded by hubspot do not have classes that match up with the bootstrap classes, so let's cater for the Hubspot classes and extend them to be the same as the bootstrap classes */
2+
3+
.hs-form-iframe {
4+
width: 100% !important;
5+
}
6+
.hs-input {
7+
@extend .form-control;
8+
}
9+
.hs-form-field {
10+
@extend .form-group;
11+
@extend .mb-3;
12+
}
13+
.hs-button {
14+
@extend .btn;
15+
}
16+
.hs-button.primary {
17+
@extend .btn-primary;
18+
}
19+
.hs-form-field label {
20+
margin-bottom: 0.5rem;
21+
}
22+
.hs-error-msgs {
23+
@extend .list-unstyled;
24+
}
25+
.hs-error-msgs li {
26+
@extend .invalid-feedback;
27+
display: block !important;
28+
}
29+
.hs-input.invalid.error {
30+
@extend .is-invalid;
31+
}
32+
.hs-error-msgs li .hs-error-msg {
33+
@extend .invalid-feedback;
34+
display: block !important;
35+
}
36+
.hs_error_rollup .hs-error-msgs li {
37+
font-size: inherit !important;
38+
}
39+
40+
// Some styling to get the email and submit button to sit side by side
41+
.hubspot_form_wrap.simple, .hubspot_form_wrap .hbspt-form { width : 100%; }
42+
.hubspot_form_wrap.simple .hs-form {
43+
display: flex;
44+
flex-direction: row;
45+
padding: 16px 0;
46+
}
47+
.hubspot_form_wrap.simple .hs-form .hs_email { margin-right: 5px; width: 100%; }
48+
.hubspot_form_wrap.simple .hs-form input.hs-button { height: 37px; }
49+
.hubspot_form_wrap.simple .hs-form .hs_email label, .hubspot_form_wrap.simple .hs-form ul.hs-error-msgs
50+
{ display: none !important; }

app/assets/v2/scss/lib/bootstrap.scss

+2
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,5 @@
3535
@import "./bootstrap/spinners";
3636
@import "./bootstrap/utilities";
3737
@import "./bootstrap/print";
38+
39+
@import "../forms/hubspot-form.scss";

app/dashboard/templates/shared/newsletter.html

+29-56
Original file line numberDiff line numberDiff line change
@@ -31,69 +31,42 @@ <h4 class="col-12 font-title font-weight-bold py-1" id="newsletter-title">
3131
I want to
3232
</span>
3333
<nav class="nav nav-pills nav-fill d-inline-flex btn-group btn-group-sm my-3 bg-light rounded" id="myTab" role="tablist">
34-
<a class="nav-link active btn py-2 px-3 hover-underline" id="mauticform_wrapper_fundernewsletter-tab" data-toggle="tab" href="#mauticform_wrapper_fundernewsletter" role="tab" aria-controls="mauticform_wrapper_fundernewsletter" aria-selected="true">fund bounties</a>
35-
<a class="nav-link btn py-2 px-3 hover-underline" id="mauticform_wrapper_hunternewsletter-tab" data-toggle="tab" href="#mauticform_wrapper_hunternewsletter" role="tab" aria-controls="mauticform_wrapper_hunternewsletter" aria-selected="false">work on bounties</a>
34+
<a class="nav-link active btn py-2 px-3 hover-underline" id="fundernewsletter-tab" data-toggle="tab" href="#fundernewsletter" role="tab" aria-controls="fundernewsletter" aria-selected="true">fund bounties</a>
35+
<a class="nav-link btn py-2 px-3 hover-underline" id="hunternewsletter-tab" data-toggle="tab" href="#hunternewsletter" role="tab" aria-controls="hunternewsletter" aria-selected="false">work on bounties</a>
3636
</nav>
3737
<div class="tab-content" id="myTabContent">
3838
<!-- funders newsletter -->
39-
<div id="mauticform_wrapper_fundernewsletter" class="mauticform_wrapper col-12 validate tab-pane fade show active" role="tabpanel" aria-labelledby="mauticform_wrapper_fundernewsletter-tab">
40-
<form autocomplete="false" role="form" method="post" action="https://engage.gitcoin.co/form/submit?formId=6" id="mauticform_fundernewsletter" data-mautic-form="fundernewsletter" enctype="multipart/form-data">
41-
<div class="mauticform-innerform col-12">
42-
<div class="mauticform-page-wrapper mauticform-page-1 col-6 pt-3 input-group m-auto d-flex flex-nowrap" data-mautic-form-page="1">
43-
<div id="mauticform_fundernewsletter_email" data-validate="email" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-1 mauticform-required input-group-prepend flex-fill input-group">
44-
{% if not hide_newsletter_caption %}
45-
<label id="mauticform_label_fundernewsletter_email" for="mauticform_input_fundernewsletter_email" class="mauticform-label">({% trans "Emails once a week max, & we never sell your data" %})</label>
46-
{% endif %}
47-
<input id="mauticform_input_fundernewsletter_email" name="mauticform[email]" value="" placeholder="Enter your email" class="mauticform-input form-control" type="email">
48-
<span class="mauticform-errormsg mt-5 position-absolute" style="display: none;">Please fill the email input.</span>
49-
</div>
50-
<div id="mauticform_fundernewsletter_submit" class="mauticform-row mauticform-button-wrapper mauticform-field-2 input-group-append flex-shrink-0">
51-
<button type="submit" name="mauticform[submit]" id="mauticform_input_fundernewsletter_submit" value="" class="mauticform-button btn btn-primary"><i class="far fa-envelope mr-2"></i> Subscribe</button>
52-
</div>
53-
</div>
54-
</div>
55-
<div class="mauticform-error" id="mauticform_fundernewsletter_error"></div>
56-
<div class="mauticform-message" id="mauticform_fundernewsletter_message"></div>
57-
<input type="hidden" name="mauticform[formId]" id="mauticform_fundernewsletter_id" value="6">
58-
<input type="hidden" name="mauticform[return]" id="mauticform_fundernewsletter_return" value="">
59-
<input type="hidden" name="mauticform[formName]" id="mauticform_fundernewsletter_name" value="fundernewsletter">
60-
{% if not hide_newsletter_consent %}
61-
<span style="display: block; margin-top: 3px; font-size: 10px;">
62-
{% trans "You may withdraw email consent at any time" %} | <a href="{% url 'email_settings' email_key %}">{% trans "Manage preferences" %}</a> | <a href="{% url 'email_settings' email_key %}">{% trans "Opt out" %}</a> | <a href="mailto:[email protected]">{% trans "Email us" %}</a>
63-
</span>
64-
{% endif %}
65-
</form>
39+
<div id="fundernewsletter" class="col-12 validate tab-pane fade show active" role="tabpanel" aria-labelledby="fundernewsletter-tab">
40+
41+
<div class="hubspot_form_wrap simple col-12">
42+
<div class="col-6 m-auto d-flex flex-nowrap">
43+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
44+
<script>
45+
hbspt.forms.create({
46+
region: "na1",
47+
portalId: "21870089",
48+
formId: "6b9bb4c1-82f6-4150-b653-97aa52c0dd60"
49+
});
50+
</script>
51+
</div>
6652
</div>
53+
</div>
6754

6855
<!-- hunters newsletter -->
69-
<div id="mauticform_wrapper_hunternewsletter" class="mauticform_wrapper col-12 validate tab-pane fade" role="tabpanel" aria-labelledby="mauticform_wrapper_hunternewsletter-tab">
70-
<form autocomplete="false" role="form" method="post" action="https://engage.gitcoin.co/form/submit?formId=5" id="mauticform_hunternewsletter" data-mautic-form="hunternewsletter" enctype="multipart/form-data">
71-
<div class="mauticform-innerform col-12">
72-
<div class="mauticform-page-wrapper mauticform-page-1 col-6 pt-3 input-group m-auto d-flex flex-nowrap" data-mautic-form-page="1">
73-
<div id="mauticform_hunternewsletter_email" data-validate="email" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-1 mauticform-required input-group-prepend flex-fill input-group">
74-
{% if not hide_newsletter_caption %}
75-
<label id="mauticform_label_hunternewsletter_email" for="mauticform_input_hunternewsletter_email" class="mauticform-label">({% trans "Emails once a week max, & we never sell your data" %})</label>
76-
{% endif %}
77-
<input id="mauticform_input_hunternewsletter_email" name="mauticform[email]" value="" placeholder="Enter your email" class="mauticform-input form-control" type="email">
78-
<span class="mauticform-errormsg mt-5 position-absolute" style="display: none;">Please fill the email input.</span>
79-
</div>
80-
<div id="mauticform_hunternewsletter_submit" class="mauticform-row mauticform-button-wrapper mauticform-field-2 input-group-append flex-shrink-0">
81-
<button type="submit" name="mauticform[submit]" id="mauticform_input_hunternewsletter_submit" value="" class="mauticform-button btn btn-primary"><i class="far fa-envelope mr-2"></i> Subscribe</button>
82-
</div>
83-
</div>
84-
</div>
85-
<div class="mauticform-error" id="mauticform_hunternewsletter_error"></div>
86-
<div class="mauticform-message" id="mauticform_hunternewsletter_message"></div>
87-
<input type="hidden" name="mauticform[formId]" id="mauticform_hunternewsletter_id" value="5">
88-
<input type="hidden" name="mauticform[return]" id="mauticform_hunternewsletter_return" value="">
89-
<input type="hidden" name="mauticform[formName]" id="mauticform_hunternewsletter_name" value="hunternewsletter">
90-
{% if not hide_newsletter_consent %}
91-
<span style="display: block; margin-top: 3px; font-size: 10px;">
92-
{% trans "You may withdraw email consent at any time" %} | <a href="{% url 'email_settings' email_key %}">{% trans "Manage preferences" %}</a> | <a href="{% url 'email_settings' email_key %}">{% trans "Opt out" %}</a> | <a href="mailto:[email protected]">{% trans "Email us" %}</a>
93-
</span>
94-
{% endif %}
95-
</form>
56+
<div id="hunternewsletter" class="col-12 validate tab-pane fade" role="tabpanel" aria-labelledby="hunternewsletter-tab">
57+
<div class="hubspot_form_wrap simple col-12">
58+
<div class="col-6 m-auto d-flex flex-nowrap">
59+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
60+
<script>
61+
hbspt.forms.create({
62+
region: "na1",
63+
portalId: "21870089",
64+
formId: "b11f8e17-95e0-4900-884a-d53868805085"
65+
});
66+
</script>
67+
</div>
9668
</div>
69+
</div>
9770

9871
</div>
9972
</div>

app/retail/templates/about.html

+17-26
Original file line numberDiff line numberDiff line change
@@ -251,37 +251,28 @@ <h2>Join a world class community of open source builders</h2>
251251
</section>
252252
<section id="newsletter" class="bg-lightpurple py-5 mt-5">
253253
<div class="container">
254-
255254
<div class="row">
256-
<div class="col-12">
257-
<h2>Get the latest from Gitcoin</h2>
258-
<div class="row">
259-
<div class="col-12 col-md-4">
260-
<p class="font-bigger-1 mt-3">Share your email to receive guides and industry news.</p>
255+
<div class="col-12">
256+
<h2>Get the latest from Gitcoin</h2>
257+
<div class="row">
258+
<div class="col-12 col-md-4">
259+
<p class="font-bigger-1 mt-3">Share your email to receive guides and industry news.</p>
260+
</div>
261+
<div class="col-12 col-md-6 offset-md-1 d-flex justify-content-end">
262+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
263+
<div class="hubspot_form_wrap simple">
264+
<script>
265+
hbspt.forms.create({
266+
region: "na1",
267+
portalId: "21870089",
268+
formId: "24af31f5-d93f-4be3-a1ed-f0377ff86aec"
269+
});
270+
</script>
261271
</div>
262-
<div id="mauticform_wrapper_generalnewsletter" class="mauticform_wrapper col-12 col-md-6 offset-md-1 d-flex justify-content-end">
263-
<form autocomplete="false" role="form" method="post" action="https://engage.gitcoin.co/form/submit?formId=8" id="mauticform_generalnewsletter" data-mautic-form="generalnewsletter" enctype="multipart/form-data" class="py-3 form-inline w-100">
264-
<div class="mauticform-innerform w-100">
265-
<div class="mauticform-page-wrapper mauticform-page-1 d-flex align-items-center position-relative justify-content-end" data-mautic-form-page="1">
266-
<div id="mauticform_generalnewsletter_email" data-validate="email" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-1 mauticform-required flex-fill pr-2">
267-
<input id="mauticform_input_generalnewsletter_email" name="mauticform[email]" value="" placeholder="Enter your email" class="mauticform-input form-control w-100 font-smaller-1" type="email">
268-
<span class="mauticform-errormsg mt-2" style="display: none;">Please fill the email input.</span>
269-
</div>
270-
<div id="mauticform_generalnewsletter_submit" class="mauticform-row mauticform-button-wrapper mauticform-field-2 align-self-baseline">
271-
<button type="submit" name="mauticform[submit]" id="mauticform_input_generalnewsletter_submit" value="" class="mauticform-button btn btn-primary font-smaller-3 py-2 px-4">Subscribe</button>
272-
</div>
273-
</div>
274-
</div>
275-
<div class="mauticform-error mt-2" id="mauticform_generalnewsletter_error"></div>
276-
<div class="mauticform-message mt-2" id="mauticform_generalnewsletter_message"></div>
277-
<input type="hidden" name="mauticform[formId]" id="mauticform_generalnewsletter_id" value="8">
278-
<input type="hidden" name="mauticform[return]" id="mauticform_generalnewsletter_return" value="">
279-
<input type="hidden" name="mauticform[formName]" id="mauticform_generalnewsletter_name" value="generalnewsletter">
280-
</form>
281272
</div>
282-
</div>
283273
</div>
284274
</div>
275+
</div>
285276
</div>
286277

287278
</section>

app/retail/templates/home/index2021.html

+12-20
Original file line numberDiff line numberDiff line change
@@ -493,26 +493,18 @@ <h2>Get the latest from Gitcoin</h2>
493493
<div class="col-12 col-md-4">
494494
<p class="font-bigger-1 mt-3">Share your email to receive guides and industry news.</p>
495495
</div>
496-
<div id="mauticform_wrapper_generalnewsletter" class="mauticform_wrapper col-12 col-md-6 offset-md-1 d-flex justify-content-end">
497-
<form autocomplete="false" role="form" method="post" action="https://engage.gitcoin.co/form/submit?formId=8" id="mauticform_generalnewsletter" data-mautic-form="generalnewsletter" enctype="multipart/form-data" class="py-3 form-inline w-100">
498-
<div class="mauticform-innerform w-100">
499-
<div class="mauticform-page-wrapper mauticform-page-1 d-flex align-items-center position-relative justify-content-end" data-mautic-form-page="1">
500-
<div id="mauticform_generalnewsletter_email" data-validate="email" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-1 mauticform-required flex-fill pr-2">
501-
<input id="mauticform_input_generalnewsletter_email" name="mauticform[email]" value="" placeholder="Enter your email" class="mauticform-input form-control w-100 font-smaller-1" type="email">
502-
<span class="mauticform-errormsg mt-2" style="display: none;">Please fill the email input.</span>
503-
</div>
504-
<div id="mauticform_generalnewsletter_submit" class="mauticform-row mauticform-button-wrapper mauticform-field-2 align-self-baseline">
505-
<button type="submit" name="mauticform[submit]" id="mauticform_input_generalnewsletter_submit" value="" class="mauticform-button btn btn-primary font-smaller-3 py-2 px-4">Subscribe</button>
506-
</div>
507-
</div>
508-
</div>
509-
<div class="mauticform-error mt-2" id="mauticform_generalnewsletter_error"></div>
510-
<div class="mauticform-message mt-2" id="mauticform_generalnewsletter_message"></div>
511-
<input type="hidden" name="mauticform[formId]" id="mauticform_generalnewsletter_id" value="8">
512-
<input type="hidden" name="mauticform[return]" id="mauticform_generalnewsletter_return" value="">
513-
<input type="hidden" name="mauticform[formName]" id="mauticform_generalnewsletter_name" value="generalnewsletter">
514-
</form>
515-
</div>
496+
<div class="col-12 col-md-6 offset-md-1 d-flex justify-content-end">
497+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
498+
<div class="hubspot_form_wrap simple">
499+
<script>
500+
hbspt.forms.create({
501+
region: "na1",
502+
portalId: "21870089",
503+
formId: "24af31f5-d93f-4be3-a1ed-f0377ff86aec"
504+
});
505+
</script>
506+
</div>
507+
</div>
516508
</div>
517509
</div>
518510
</div>

0 commit comments

Comments
 (0)