added initial mailchimp form e2efc549
Steve · 2023-03-01 13:23 3 file(s) · +70 −2
src/components/blog/MailForm.astro (added) +66 −0
1 +
---
2 +
---
3 +
4 +
<div>
5 +
	<form
6 +
		action="https://dev.us21.list-manage.com/subscribe/post?u=44315754403b366841b7a36dc&id=176fca89f7&f_id=0098fee1f0"
7 +
		method="post"
8 +
		id="mc-embedded-subscribe-form"
9 +
		name="mc-embedded-subscribe-form"
10 +
		class="validate"
11 +
		target="_blank"
12 +
		novalidate
13 +
	>
14 +
		<div class="flex flex-col gap-4 items-center">
15 +
			<h2>Subscribe for Future Blog Posts</h2>
16 +
			<div class="flex items-center border border-accent">
17 +
				<input
18 +
					class="appearance-none bg-bgColor pl-3 py-1 w-72 required:outline-none"
19 +
					type="email"
20 +
					value=""
21 +
					name="EMAIL"
22 +
					id="mce-EMAIL"
23 +
          placeholder="email"
24 +
					required
25 +
				/>
26 +
        <span id="mce-EMAIL-HELPERTEXT"></span>
27 +
				<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
28 +
				<div style="position: absolute; left: -5000px;" aria-hidden="true">
29 +
					<input type="text" name="b_44315754403b366841b7a36dc_176fca89f7" tabindex="-1" value="" />
30 +
				</div>
31 +
        <input
32 +
          type="submit"
33 +
          value="Subscribe"
34 +
          name="subscribe"
35 +
          id="mc-embedded-subscribe"
36 +
          class="cursor-pointer bg-accent py-1.5 px-4 hover:bg-accent-2"
37 +
        />
38 +
			</div>
39 +
      <div id="mce-responses">
40 +
        <div class="response" id="mce-error-response" style="display:none"></div>
41 +
        <div class="response" id="mce-success-response" style="display:none"></div>
42 +
      </div>
43 +
		</div>
44 +
	</form>
45 +
</div>
46 +
47 +
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"
48 +
></script><script type="text/javascript">
49 +
	(function ($) {
50 +
		window.fnames = new Array();
51 +
		window.ftypes = new Array();
52 +
		fnames[0] = "EMAIL";
53 +
		ftypes[0] = "email";
54 +
		fnames[1] = "FNAME";
55 +
		ftypes[1] = "text";
56 +
		fnames[2] = "LNAME";
57 +
		ftypes[2] = "text";
58 +
		fnames[3] = "ADDRESS";
59 +
		ftypes[3] = "address";
60 +
		fnames[4] = "PHONE";
61 +
		ftypes[4] = "phone";
62 +
		fnames[5] = "BIRTHDAY";
63 +
		ftypes[5] = "birthday";
64 +
	})(jQuery);
65 +
	var $mcj = jQuery.noConflict(true);
66 +
</script>
src/pages/posts/[post].astro +2 −0
3 3
import type { CollectionEntry } from "astro:content";
4 4
import { getCollection } from "astro:content";
5 5
import PostLayout from "@/layouts/BlogPost";
6 +
import MailForm from "@/components/blog/MailForm";
6 7
7 8
export async function getStaticPaths(): Promise<GetStaticPathsResult> {
8 9
	const posts: CollectionEntry<"post">[] = await getCollection("post");
23 24
24 25
<PostLayout post={post}>
25 26
	<Content />
27 +
  <MailForm />
26 28
</PostLayout>
src/styles/global.css +2 −2
3 3
	:root {
4 4
		color-scheme: light;
5 5
		--theme-bg: #e5e9f0;
6 -
		--theme-link: #81a1c1;
6 +
		--theme-link: #88c0d0;
7 7
		--theme-text: #2e3440;
8 -
		--theme-accent: #88C0D0;
8 +
		--theme-accent: #5e81ac;
9 9
		--theme-accent-2: #5e81ac;
10 10
		--theme-quote: #5e81ac;
11 11
		--theme-menu-bg: rgb(250 250 250 / 0.85);