ActiveCampaign for GatsbyJS - Reading Time: 11 Mins
📅 January 08, 2020
•⏱️15 min read
Introduction
When I was switching my mailing software which was previously Mailchimp to ActiveCampaign for my blog. I remember that it was quite a painful experience to setup.
Despite GatsbyJS contains a plugin for Mailchimp.
Which should be easily integrated with an email subscription form but nope it was lacklustre at best. This took me a few hours to implement it.
Well, the same thing happened to me again this time when I was trying to integrate ActiveCampaign for my blog.
What is ActiveCampaign?
ActiveCampaign is one of the popular emailing software that is used by bloggers, digital marketing professionals or just side hustlers.
Who uses it to build & manage their mailing list with automation to make it easy for them. To manage and sell products or services to their customers.
I believe this is valuable for those who would like to build JAM Stack websites for their clients to build an email list with email software integrations.
This provides tons of opportunities to sell targeted product or services to their raving fans who want it through their email.
Site Tracking Code
The first hurdle in adding ActiveCampaign is the site tracking code.
Which allows you to track a visitor to your website and understand their preferences. Based upon how they interact with your content which helps you in launching targeted email campaigns to them.
Unless you are using WordPress or Shopify, the integrating of the site tracking code is a pain unless you know how to do it.
For my case, I was successful in adding the site tracking code within the html.js in src folder by using the dangerouslySetInnerHTML attribute in React to put it under the head tag.
The html.js ships by default in GatsbyJS. This is a workaround that works for me at the time of this writing. If you know of another way. Please leave your advice to the comments section.
src/html.js
<script
dangerouslySetInnerHTML={{
__html: `
(function(e,t,o,n,p,r,i){e.visitorGlobalObjectAlias=n;e[e.visitorGlobalObjectAlias]=e[e.visitorGlobalObjectAlias]||function(){(e[e.visitorGlobalObjectAlias].q=e[e.visitorGlobalObjectAlias].q||[]).push(arguments)};e[e.visitorGlobalObjectAlias].l=(new Date).getTime();r=t.createElement("script");r.src=o;r.async=true;i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)})(window,document,"https://diffuser-cdn.app-us1.com/diffuser/diffuser.js","vgo");
vgo('setAccount', 'youraccountid');
vgo('setTrackByDefault', true);
vgo('process');
var foo = 'bar';
console.log(foo);
`,
}}
/>
Do remember to change the setAccount in the script above to be your account id for it to work. Once it is enabled tracking will be "enabled", when you browse to Settings -> Tracking -> Site Tracking under your ActiveCampaign account.
Email Signup Form
The final hurdle is the modification of email subscribe form to allow your website visitors to subscribe to your email list.
Saragibby provided an alternative way to embed ActiveCampaign form to React to your website.
Fortunately for you, I had a ready-made subscription form with styling, you can use my code for your Gatsby or React website.
SubscribeForm.js
import React from 'react'
import styled from 'styled-components'
import { colors } from "../utils/presets"
import hex2rgba from "hex2rgba"
import { formInput } from "../utils/form-styles"
import { buttonStyles } from "../utils/styles"
const Submit = styled.div`
${buttonStyles.default};
margin-top: 20px;
`
const SingleLineInput = styled(`input`)`
${formInput};
width: 100%;
:focus {
border-color: ${colors.gatsby};
outline: 0;
box-shadow: 0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)};
}
`
const Label = styled(`label`)`
:after {
content: ${props => (props.isRequired ? `'*'` : ``)};
color: ${colors.warning};
}
`
export default class IndexPage extends React.Component {
state = {
submit: false,
}
_handleChange = e => {
this.setState({
[`${e.target.name}`]: e.target.value,
})
}
_handleSubmit = e => {
e.preventDefault();
const data = new FormData(event.target);
fetch('https://youareawesome.activehosted.com/proc.php', {
method: 'POST',
body: data,
mode: 'no-cors',
})
.then(response => {
this.setState({ submit: true });
setTimeout(() => {
this.setState({ submit: false });
}, 2000);
if (this.state.submit !== true) {
alert('Email Subscription Was Unsuccessful!!!')
}
else{
alert('Welcome to the Tribe!!! Please Check Your Email to ' +
'Confirm Your Subscription!!!');
}
})
.catch(err => {
console.log('err', err);
alert(err);
});
}
render() {
return (
<div>
<Label>Subscribe to a weekly newsletter,
fresh from the oven at one byte at a time</Label><br/><br/>
<div>
<form onSubmit={this._handleSubmit}>
<input type="hidden" name="u" value="1" />
<input type="hidden" name="f" value="1" />
<input type="hidden" name="s" />
<input type="hidden" name="c" value="0" />
<input type="hidden" name="m" value="0" />
<input type="hidden" name="act" value="sub" />
<input type="hidden" name="v" value="2" />
<SingleLineInput type="email" onChange={this._handleChange}
placeholder="Johnwick@email.com" name="email"/>
<br/><br/>
<SingleLineInput type="fullname" onChange={this._handleChange}
placeholder="John Wick" name="fullname"/>
<Submit><input type="submit"/></Submit>
</form>
</div>
</div>
)
}
}
colors
import gray from "gray-percentage"
const colors = {
// original palette by @SachaG
// @see https://www.figma.com/file/J6IYJEtdRmwJQOrcZ2DfvxDD/Gatsby
gatsby: `#663399`, // was #744c9e
gatsbyDark: `#442266`,
gatsbyDarker: `#221133`,
lemon: `#ffdf37`,
mint: `#73fff7`,
lilac: `#8c65b3`,
lavender: `#b190d5`,
wisteria: `#ccb2e5`,
// accent color from the "bolder palette" by @ArchieHicklin
// @see https://github.com/gatsbyjs/gatsby/issues/1173#issuecomment-309415650
accent: `#ffb238`, // "Mustard",
success: `#37b635`,
warning: `#ec1818`,
accentLight: `#ffeccd`,
accentDark: `#9e6100`,
skyLight: `#dcfffd`,
skyDark: `#0a75c2`,
ui: {
border: `#ede7f3`,
bright: `#e0d6eb`,
light: `#f5f3f7`,
whisper: `#fbfafc`,
},
gray: {
dark: gray(8, 270),
copy: gray(12, 270),
lightCopy: gray(35, 270),
calm: gray(46, 270),
bright: gray(64, 270),
light: gray(80, 270),
superLight: gray(96, 270),
},
code: {
bg: `#fdfaf6`, // colors.a[0] #fcf6f0
border: `#faede5`,
text: `#866c5b`,
remove: `#e45c5c`,
add: `#4a9c59`,
selector: `#b3568b`,
tag: `#4084a1`,
keyword: `#538eb6`,
comment: `#6f8f39`,
punctuation: `#53450e`,
regex: `#d88489`,
cssString: `#a2466c`,
invisibles: `#e0d7d1`,
scrollbarThumb: `#f4d1c6`,
lineHighlightBorder: `#f1beb6`,
},
}
export default colors
presets
const colors = require(`./colors`).default
module.exports = {
colors,
mobile: `(min-width: 400px)`,
Mobile: `@media (min-width: 400px)`,
phablet: `(min-width: 550px)`,
Phablet: `@media (min-width: 550px)`,
tablet: `(min-width: 750px)`,
Tablet: `@media (min-width: 750px)`,
desktop: `(min-width: 1000px)`,
Desktop: `@media (min-width: 1000px)`,
hd: `(min-width: 1200px)`,
Hd: `@media (min-width: 1200px)`,
VHd: `@media (min-width: 1450px)`,
VVHd: `@media (min-width: 1650px)`,
maxWidth: 35,
maxWidthWithSidebar: 26,
radius: 2,
radiusLg: 4,
gutters: {
default: 1.25,
HdR: 2.5,
VHdR: 3,
VVHdR: 4.5,
},
shadowKeyUmbraOpacity: 0.1,
shadowKeyPenumbraOpacity: 0.07,
shadowAmbientShadowOpacity: 0.06,
animation: {
curveDefault: `cubic-bezier(0.4, 0, 0.2, 1)`,
speedDefault: `250ms`,
speedFast: `100ms`,
speedSlow: `350ms`,
},
logoOffset: 1.8,
headerHeight: `3.5rem`,
bannerHeight: `2.5rem`,
sidebarUtilityHeight: `2.5rem`,
pageHeadingDesktopWidth: `3.5rem`,
}
typography.js
import Typography from "typography"
import CodePlugin from "typography-plugin-code"
import presets, { colors } from "./presets"
const headerFontFamily = [
`Futura PT`,
`-apple-system`,
`BlinkMacSystemFont`,
`Segoe UI`,
`Roboto`,
`Oxygen`,
`Ubuntu`,
`Cantarell`,
`Fira Sans`,
`Droid Sans`,
`Helvetica Neue`,
`Arial`,
`sans-serif`,
]
const _options = {
headerFontFamily,
bodyFontFamily: [`Spectral`, `Georgia`, `Times New Roman`, `Times`, `serif`],
monospaceFontFamily: [
`SFMono-Regular`,
`Menlo`,
`Monaco`,
`Consolas`,
`Liberation Mono`,
`Courier New`,
`monospace`,
],
systemFontFamily: [
`-apple-system`,
`BlinkMacSystemFont`,
`Segoe UI`,
`Roboto`,
`Oxygen`,
`Ubuntu`,
`Cantarell`,
`Fira Sans`,
`Droid Sans`,
`Helvetica Neue`,
`Arial`,
`sans-serif`,
],
baseLineHeight: 1.4,
baseFontSize: `16px`,
headerLineHeight: 1.075,
headerColor: colors.gray.dark,
bodyColor: colors.gray.copy,
blockMarginBottom: 0.75,
scaleRatio: 2,
plugins: [new CodePlugin()],
overrideStyles: ({ rhythm, scale }, options) => {
return {
"h1,h2,h4,h5,h6": {
marginTop: rhythm(options.blockMarginBottom * 2),
marginBottom: rhythm(options.blockMarginBottom),
letterSpacing: `-0.0075em`,
},
"ul, ol": {
marginTop: rhythm(options.blockMarginBottom),
},
h1: {
...scale(4 / 5),
},
h3: {
...scale(2 / 5),
lineHeight: 1,
marginTop: rhythm(options.blockMarginBottom * 2),
marginBottom: rhythm(options.blockMarginBottom / 2),
},
h4: {
...scale(1 / 5),
},
h5: {
...scale(0),
},
blockquote: {
paddingLeft: rhythm(options.blockMarginBottom),
marginLeft: 0,
borderLeft: `${rhythm(options.blockMarginBottom / 4)} solid ${
colors.ui.light
}`,
},
hr: {
backgroundColor: colors.ui.light,
},
"tt, code, kbd, samp": {
// reset line-height: 1.4rem set by
// https://github.com/KyleAMathews/typography.js/blob/3c99e905414d19cda124a7baabeb7a99295fec79/packages/typography/src/utils/createStyles.js#L198
lineHeight: `inherit`,
},
"tt, code, kbd": {
background: colors.code.bg,
paddingTop: `0.2em`,
paddingBottom: `0.2em`,
},
"tt, code, kbd, .gatsby-code-title": {
fontFamily: options.monospaceFontFamily.join(`,`),
fontSize: `80%`,
// Disable ligatures as they look funny as code.
fontVariant: `none`,
WebkitFontFeatureSettings: `"clig" 0, "calt" 0`,
fontFeatureSettings: `"clig" 0, "calt" 0`,
},
".gatsby-highlight": {
background: colors.code.bg,
borderRadius: `${presets.radius}px`,
padding: rhythm(options.blockMarginBottom),
marginBottom: rhythm(options.blockMarginBottom),
overflow: `auto`,
WebkitOverflowScrolling: `touch`,
position: `relative`,
},
".gatsby-highlight pre[class*='language-']": {
padding: 0,
marginTop: 0,
marginBottom: 0,
backgroundColor: `transparent`,
border: 0,
float: `left`,
minWidth: `100%`,
overflow: `initial`,
},
".gatsby-highlight pre[class*='language-']::before": {
position: `absolute`,
top: `0px`,
right: `20px`,
padding: `3px 10px`,
fontSize: `12px`,
textAlign: `right`,
color: `#444`,
fontWeight: `700`,
letterSpacing: `0.8px`,
textTransform: `uppercase`,
borderRadius: `0 0 5px 5px`,
background: `#ddd`,
},
".gatsby-highlight pre[class='language-javascript']::before": {
content: `'js'`,
background: `#f7df1e`,
},
".gatsby-highlight pre[class='language-js']::before": {
content: `'js'`,
background: `#f7df1e`,
},
".gatsby-highlight pre[class='language-jsx']::before": {
content: `'jsx'`,
background: `#61dafb`,
},
".gatsby-highlight pre[class='language-graphql']::before": {
content: `'GraphQL'`,
background: `#E10098`,
color: `#fff`,
fontWeight: `400`,
},
".gatsby-highlight pre[class='language-html']::before": {
content: `'html'`,
background: `#005A9C`,
color: `#fff`,
fontWeight: `400`,
},
".gatsby-highlight pre[class='language-css']::before": {
content: `'css'`,
background: `#ff9800`,
color: `#fff`,
fontWeight: `400`,
},
".gatsby-highlight pre[class='language-shell']::before": {
content: `'shell'`,
},
".gatsby-highlight pre[class='language-sh']::before": {
content: `'sh'`,
},
".gatsby-highlight pre[class='language-bash']::before": {
content: `'bash'`,
},
".gatsby-highlight pre[class='language-yaml']::before": {
content: `'yaml'`,
background: `#ffa8df`,
},
".gatsby-highlight pre[class='language-markdown']::before": {
content: `'md'`,
},
".gatsby-highlight pre[class='language-json']::before, .gatsby-highlight pre[class='language-json5']::before": {
content: `'json'`,
background: `linen`,
},
".gatsby-highlight pre[class='language-diff']::before": {
content: `'diff'`,
background: `#e6ffed`,
},
".gatsby-highlight pre[class='language-text']::before": {
content: `'text'`,
background: `#fff`,
},
".gatsby-highlight pre[class='language-flow']::before": {
content: `'flow'`,
background: `#E8BD36`,
},
".gatsby-highlight pre code": {
display: `block`,
fontSize: `94%`,
lineHeight: 1.5,
// reset code vertical padding declared earlier
padding: 0,
},
".gatsby-highlight-code-line": {
background: colors.code.border,
marginRight: `${rhythm(-options.blockMarginBottom)}`,
marginLeft: `${rhythm(-options.blockMarginBottom)}`,
paddingRight: rhythm(options.blockMarginBottom),
paddingLeft: `${rhythm((options.blockMarginBottom / 5) * 4)}`,
borderLeft: `${rhythm((options.blockMarginBottom / 5) * 1)} solid ${
colors.code.lineHighlightBorder
}`,
display: `block`,
},
".gatsby-highlight::-webkit-scrollbar": {
width: `6px`,
height: `6px`,
},
".gatsby-highlight::-webkit-scrollbar-thumb": {
background: colors.code.scrollbarThumb,
},
".gatsby-highlight::-webkit-scrollbar-track": {
background: colors.code.border,
borderRadius: `0 0 ${presets.radiusLg}px ${presets.radiusLg}px`,
},
// Target image captions. This is kind of a fragile selector...
".gatsby-resp-image-link + em": {
...scale(-1 / 5),
lineHeight: 1.3,
paddingTop: rhythm(3 / 8),
marginBottom: rhythm(options.blockMarginBottom * 2),
display: `block`,
textAlign: `center`,
fontStyle: `normal`,
color: colors.gray.calm,
position: `relative`,
},
".gatsby-resp-image-link + em a": {
fontWeight: `normal`,
fontFamily: options.headerFontFamily.join(`,`),
color: colors.gatsby,
},
".main-body a": {
color: `inherit`,
textDecoration: `none`,
transition: `all ${presets.animation.speedFast} ${
presets.animation.curveDefault
}`,
borderBottom: `1px solid ${colors.ui.bright}`,
boxShadow: `inset 0 -2px 0px 0px ${colors.ui.bright}`,
fontFamily: options.headerFontFamily.join(`,`),
fontWeight: `bold`,
},
".post-body a": {
fontSize: `102%`,
color: colors.gatsby,
},
".post-body figcaption": {
color: colors.gray.calm,
fontFamily: headerFontFamily.join(`,`),
fontSize: `87.5%`,
marginTop: rhythm(1 / 2),
},
".main-body a:hover": {
background: colors.ui.bright,
},
".main-body a.anchor": {
color: `inherit`,
fill: colors.gatsby,
textDecoration: `none`,
borderBottom: `none`,
boxShadow: `none`,
},
".main-body a.anchor:hover": {
background: `none`,
},
".main-body a.gatsby-resp-image-link": {
boxShadow: `none`,
borderBottom: `transparent`,
marginTop: rhythm(options.blockMarginBottom * 2),
marginBottom: rhythm(options.blockMarginBottom * 2),
},
".main-body figure a.gatsby-resp-image-link": {
boxShadow: `none`,
borderBottom: `transparent`,
marginTop: rhythm(options.blockMarginBottom * 2),
marginBottom: 0,
},
".main-body a.gatsby-resp-image-link:hover": {
background: `none`,
boxShadow: `none`,
},
".gatsby-highlight, .post .gatsby-resp-iframe-wrapper, .post .gatsby-resp-image-link": {
marginLeft: rhythm(-options.blockMarginBottom),
marginRight: rhythm(-options.blockMarginBottom),
},
".gatsby-resp-image-link": {
borderRadius: `${presets.radius}px`,
overflow: `hidden`,
},
".gatsby-code-title": {
background: colors.code.bg,
borderBottom: `1px solid ${colors.code.border}`,
color: colors.code.text,
marginLeft: rhythm(-options.blockMarginBottom),
marginRight: rhythm(-options.blockMarginBottom),
padding: `${rhythm(options.blockMarginBottom)} ${rhythm(
options.blockMarginBottom
)} ${rhythm(options.blockMarginBottom / 2)}`,
fontSize: `74%`,
},
"@media (max-width:634px)": {
".gatsby-highlight, .gatsby-resp-image-link": {
borderRadius: 0,
borderLeft: 0,
borderRight: 0,
},
},
video: {
width: `100%`,
marginBottom: rhythm(options.blockMarginBottom),
},
".twitter-tweet-rendered": {
margin: `${rhythm(options.blockMarginBottom * 2)} auto !important`,
},
".egghead-video": {
width: `620px`,
height: `348px`,
border: `none`,
},
[presets.Mobile]: {
html: {
fontSize: `${(17 / 16) * 100}%`,
},
},
[presets.Tablet]: {
html: {
fontSize: `${(18 / 16) * 100}%`,
},
},
[presets.Desktop]: {
".gatsby-highlight, .post .gatsby-resp-iframe-wrapper, .post .gatsby-resp-image-link, .gatsby-code-title": {
marginLeft: rhythm(-options.blockMarginBottom * 1.5),
marginRight: rhythm(-options.blockMarginBottom * 1.5),
},
".gatsby-highlight": {
padding: rhythm(options.blockMarginBottom * 1.5),
marginBottom: rhythm(options.blockMarginBottom * 1.5),
},
".gatsby-highlight-code-line": {
marginRight: `${rhythm(-options.blockMarginBottom * 1.5)}`,
marginLeft: `${rhythm(-options.blockMarginBottom * 1.5)}`,
paddingRight: rhythm(options.blockMarginBottom * 1.5),
paddingLeft: `${rhythm(((options.blockMarginBottom * 1.5) / 5) * 4)}`,
borderLeftWidth: `${rhythm(
((options.blockMarginBottom * 1.5) / 5) * 1
)}`,
},
".gatsby-code-title": {
padding: `${rhythm(options.blockMarginBottom)} ${rhythm(
options.blockMarginBottom * 1.5
)} ${rhythm(options.blockMarginBottom / 2)}`,
},
},
[presets.VVHd]: {
html: {
fontSize: `${(21 / 16) * 100}%`,
},
},
// PrismJS syntax highlighting token styles
// https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/
".token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
color: colors.code.comment,
},
".token.punctuation": {
color: colors.code.punctuation,
},
".token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol": {
color: colors.code.tag,
},
".token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin": {
color: colors.code.selector,
},
".token.operator, .token.entity, .token.url, .token.variable": {},
".token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
color: colors.code.keyword,
},
".token.inserted": {
color: colors.code.add,
},
".token.deleted": {
color: colors.code.remove,
},
".token.regex, .token.important": {
color: colors.code.regex,
},
".language-css .token.string, .style .token.string": {
color: colors.code.cssString,
},
".token.important": {
fontWeight: `normal`,
},
".token.bold": {
fontWeight: `bold`,
},
".token.italic": {
fontStyle: `italic`,
},
".token.entity": {
cursor: `help`,
},
".namespace": {
opacity: 0.7,
},
// PrismJS plugin styles
".token.tab:not(:empty):before, .token.cr:before, .token.lf:before": {
color: colors.code.invisibles,
},
// Fancy external links in posts, borrowed from
// https://github.com/comfusion/after-dark/
// @see https://github.com/comfusion/after-dark/blob/8fdbe2f480ac40315cf0e01cece785d2b5c4b0c3/layouts/partials/critical-theme.css#L36-L39
".gatsby-resp-image-link + em a[href*='//']:after": {
content: `" " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23744C9E'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E")`,
},
}
},
}
const typography = new Typography(_options)
export const { scale, rhythm, options } = typography
export default typography
form-styles.js
import presets, { colors } from "../utils/presets"
import { rhythm, options } from "./typography.js"
export const formInput = {
backgroundColor: `#fff`,
border: `1px solid ${colors.ui.bright}`,
borderRadius: presets.radius,
color: colors.brand,
fontFamily: options.headerFontFamily.join(`,`),
padding: rhythm(1 / 2),
verticalAlign: `middle`,
transition: `all ${presets.animation.speedDefault} ${
presets.animation.curveDefault
}`,
"::placeholder": {
color: colors.lilac,
opacity: 1,
},
}
styles.js
import hex2rgba from "hex2rgba"
import { keyframes } from "@emotion/core"
import presets, { colors } from "./presets"
import { rhythm, scale, options } from "./typography"
const stripeAnimation = keyframes({
"0%": { backgroundPosition: `0 0` },
"100%": { backgroundPosition: `30px 60px` },
})
export const scrollbarStyles = {
WebkitOverflowScrolling: `touch`,
"&::-webkit-scrollbar": {
width: `6px`,
height: `6px`,
},
"&::-webkit-scrollbar-thumb": {
background: colors.ui.bright,
},
"&::-webkit-scrollbar-thumb:hover": {
background: colors.lilac,
},
"&::-webkit-scrollbar-track": {
background: colors.ui.light,
},
}
export const buttonStyles = {
default: {
alignItems: `center`,
backgroundColor: '#f94306',
borderRadius: presets.radius,
borderWidth: 1,
borderStyle: `solid`,
borderColor: '#cc0000',
boxShadow: `none`,
color: `#ffffff`,
cursor: `pointer`,
display: `inline-flex`,
fontFamily: options.headerFontFamily.join(`,`),
fontWeight: `bold`,
flexShrink: 0,
lineHeight: 1,
WebkitFontSmoothing: `antialiased`,
whiteSpace: `nowrap`,
padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
backgroundSize: `30px 30px`,
transition: `all ${presets.animation.speedDefault} ${
presets.animation.curveDefault
}`,
":hover, &:focus": {
backgroundSize: `30px 30px`,
backgroundColor: '#ff531a',
backgroundImage: `linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`,
color: `#fff`,
animation: `${stripeAnimation} 2.8s linear infinite`,
},
":focus": {
outline: 0,
boxShadow: `0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}`,
},
":after": { content: `''`, display: `block` },
"& svg": { marginLeft: `.2em` },
[presets.Tablet]: {
...scale(1 / 5),
padding: `${rhythm(2 / 6)} ${rhythm(3 / 5)}`,
},
[presets.VHd]: { padding: `${rhythm(1 / 2)} ${rhythm(1)}` },
},
secondary: {
backgroundColor: `transparent`,
color: colors.gatsby,
fontWeight: `normal`,
},
large: {
// borderRadius: presets.radiusLg,
fontSize: scale(1 / 5).fontSize,
padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
[presets.Tablet]: {
fontSize: scale(2 / 5).fontSize,
padding: `${rhythm(2 / 4)} ${rhythm(3 / 5)}`,
},
[presets.VHd]: { padding: `${rhythm(1 / 2)} ${rhythm(1)}` },
},
small: {
fontSize: scale(-1 / 3).fontSize,
padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
[presets.Tablet]: {
fontSize: scale(-1 / 6).fontSize,
padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
},
[presets.VHd]: {
fontSize: scale(-1 / 6).fontSize,
padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
},
},
tiny: {
fontSize: scale(-1 / 3).fontSize,
padding: `${rhythm(1 / 5)} ${rhythm(1 / 3)}`,
[presets.Tablet]: {
fontSize: scale(-1 / 4).fontSize,
padding: `${rhythm(1 / 5)} ${rhythm(1 / 3)}`,
},
[presets.VHd]: {
fontSize: scale(-1 / 5).fontSize,
padding: `${rhythm(1 / 5)} ${rhythm(1 / 3)}`,
},
},
ondark: { border: `1px solid ${colors.ui.light}` },
}
export const svgStyles = {
active: {
"& .svg-stroke": {
strokeWidth: 1.4173,
strokeMiterlimit: 10,
},
"& .svg-stroke-accent": { stroke: colors.accent },
"& .svg-stroke-lilac": { stroke: colors.lilac },
"& .svg-stroke-gatsby": { stroke: colors.gatsby },
"& .svg-stroke-gradient-purple": { stroke: `url(#purple-top)` },
"& .svg-fill-lilac": { fill: colors.lilac },
"& .svg-fill-gatsby": { fill: colors.gatsby },
"& .svg-fill-accent": { fill: colors.accent },
"& .svg-fill-wisteria": { fill: colors.wisteria },
"& .svg-fill-brightest": { fill: `#fff` },
"& .svg-fill-gradient-accent-white-45deg": {
fill: `url(#accent-white-45deg)`,
},
"& .svg-fill-gradient-purple": { fill: `url(#lilac-gatsby)` },
"& .svg-fill-gradient-accent-white-bottom": {
fill: `url(#accent-white-bottom)`,
},
"& .svg-fill-gradient-accent-white-top": {
fill: `url(#accent-white-top)`,
},
},
}Once you are done with adding of styles the email subscribe form it will look like this.
Conclusion
I hope it will be useful for you. Especially those who are integrating ActiveCampaign for their clients using React or GatsbyJS.
I understand that this not the easiest or the elegant way of doing it but it works I can't complain about it.
I believe it might be one of the best ways for you to add a site tracking and email subscribe form to either a React or GatsbyJS website.
Until the documentation for ActiveCampaign has been updated. Which cater to a developer that is using React or GatsbyJS for their clients.