website/newsletter.html at main · Codesai/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
---
title: pages.newsletter.title
permalink: /newsletter/
---

{% include head.html %}

<body>
{% include header.html %}


<main class="newsletter">
    <section class="about">
        <div class="description">
            <div class="text">
                <h2 class="section-title">{% translate pages.newsletter.about.title %}</h2>
                <p>
                    {% translate pages.newsletter.about.first_paragraph %}
                </p>
                <p>
                    {% translate pages.newsletter.about.second_paragraph %}
                </p>
            </div>
            <div class="image">
                <img src="/assets/newsletter/newsletter_picture.png" alt="">
            </div>
        </div>

    </section>

    <section id="call-to-action" class="call-to-action-wrapper">
        <div class="call-to-action">
            <div class="message">
                <div class="highlight">{% translate pages.newsletter.call_to_action.title %}</div>
                <p>
                    {% translate pages.newsletter.call_to_action.description %}
                </p>
            </div>
            <div class="contact">
                <div class="field">
                    <label for="name">{% translate components.call_to_action.name %}</label>
                    <input id="name" name="entry.1588628238" type="text" required/>
                </div>

                <div class="field">
                    <label for="email">* {% translate components.call_to_action.mail %}</label>
                    <input type="email" id="email" name="entry.579934409" required/>
                </div>

                <div class="field">
                    <label class="checkbox">
                        <input type="checkbox" id="privacy-agreement" checked="checked">
                        <div class="box">
                            <i class="ion-checkmark"></i>
                        </div>
                        <div>{% translate components.call_to_action.privacy_agreement %}</div>
                    </label>
                </div>

                <div id="submit-newsletter-form" class="codesai-button" class="codesai-button">
                    <div class="content">{% translate pages.newsletter.call_to_action.submit %}</div>
                    <img class="arrow" src="/assets/icons/arrow.svg" alt="">
                </div>
            </div>
        </div>
    </section>

    <script>

        const submitNewsletterFormButton = document.getElementById("submit-newsletter-form");
        if (submitNewsletterFormButton) {
            submitNewsletterFormButton.addEventListener('keyup', (event) => {
                if (event.key === "Enter") {
                    event.preventDefault();
                    submitNewsletterForm(event);
                }
            });
            submitNewsletterFormButton.addEventListener('click', submitNewsletterForm);
        }


        let isSubmitting = false;
        function submitNewsletterForm(event) {
            if (isSubmitting) return;
            event.preventDefault();

            const email = document.getElementById('email').value.trim();
            const name = document.getElementById('name').value || 'noname';
            const privacyAgreement = document.getElementById('privacy-agreement').checked;

            if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                alert("{% translate components.call_to_action.alerts.no_email %}");
                return;
            }

            if (!privacyAgreement) {
                alert("{% translate components.call_to_action.alerts.no_privacy_agreement %}");
                return;
            }

            const button = event.currentTarget;
            isSubmitting = true;
            disableButton(button);
            fetch(`https://docs.google.com/forms/u/0/d/e/1FAIpQLSfI2evJpZ8DX00f15GpaOhSE5BEkUfNb5NPgwQ_Dktcn88KFQ/formResponse?entry.1181307446=${email}&entry.1441763208=${name}`, {
                method: 'POST',
                mode: 'no-cors'
            }).then(_ => {
               alert("{% translate components.call_to_action.alerts.received %}")
            }).catch(errorMessage => {
                alert("{% translate components.call_to_action.alerts.error %}" + errorMessage)
            }).finally(() => {
                enableButton(button);
                isSubmitting = false;
            });
        }

        function enableButton(button) {
            button.style.opacity = '1';
            button.style.pointerEvents = 'auto';
        }

        function disableButton(button) {
            button.style.opacity = '0.5';
            button.style.pointerEvents = 'none';
        }
    </script>
</main>
{% include footer.html %}
</body>