How to Embed a Convertkit signup form into React / Gatsby JS & add React Bootstrap

Описание: Give Kit (formerly ConvertKit) a try:
https://partners.kit.com/qhzj7rnh4rin

Ah! There's no React / Gatsby code to embed the form with! Let's fix that and convert the code from HTML to JSX, the language used in both React JS and Gatsby JS.

This takes some surgery. I even fail the first and almost the second time. ConvertKit minifies the HTML so at first you're going to have to use a find / replace to locate the needed information. But slowly but surely you'll get it!

Focus on stripping out ALL of un-needed HTML / CSS styling and then bring in your own. I used React Boostrap to style the form as it makes it that much easier to design and move around the components. Here's a video on how to install and setup React Bootstrap in Gatsby JS:
   • How to Install and Use React Bootstrap wit...  

Link to Git Hub repo:
https://github.com/haydn5/a.designer-...

Sign up to use ConvertKit here:
https://partners.kit.com/qhzj7rnh4rin

Table of Contents:
00:00 Introduction
00:36 Getting started
02:50 Copying the HTML from ConvertKit
03:17 Removing the style tags and components
04:56 Adjusting the script tag
05:29 Adjusting HTML to JSX
12:34 A stripped down form
13:56 Testing the stripped down form
15:09 Applying React Bootstrap to the form
26:09 Does the React Bootstrap form work?
28:20 It almost works
29:19 Adjusting the JSX so the form hides on submit
30:53 Confirming the form works!
32:00 In conclusion

Thanks!
Haydn

- - - - -

📫 Join my newsletter for free!
https://pro.adesignerwhocodes.com

⤵ Download ALL of my source codes & courses
Introducing ADWC PRO
https://pro.adesignerwhocodes.com

On some video descriptions, I do provide links to referrals, whereby I do receive a commission if you do buy from them. It's just one more way of support you can give to this channel. Thanks!

- - - - -