--- title: "Tutorials: How to implement a newsletter subscription in TYPO3 – Hier ist toujou." url: "https://www.toujou.com/service/tutorials/page-content/newsletter-subscription/" description: In diesem Typo3-Tutorial erläutern wir Ihnen, wie Sie eine Newsletter-Anmeldung mittels CleverReach in einem Formular für Ihre toujou Website anhängen. date: 2020-08-28 modified: 2022-09-27 --- # Tutorials: How to implement a newsletter subscription in TYPO3 – Hier ist toujou. 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Tutorials](https://www.toujou.de/service/tutorials/) 4. [Content editing](https://www.toujou.de/service/tutorials/page-content/) 5. [Newsletter subscription](https://www.toujou.de/service/tutorials/page-content/newsletter-subscription/) Newsletter subscripton ======================= With toujou you can set up a newsletter subscription on its own or attach it to any other form. In both cases it is essential to register with an email provider. [ Manual for the newsletter subscripton ](#c1008836) [Manual for attaching the newsletter subscripton](#c1008838) [Pieces of advice](#c1008843) --- Manual for the integration of the newsletter subscription --------------------------------------------------------- Before you can use toujou to create a newsletter subscription for your website, you will need a (free) account with an email provider. We highly recommend CleverReach but Mailchimp is also a good option. [Sign up with CleverReach ↗](https://www.cleverreach.com/en/) [Sign up with Mailchimp ↗](https://mailchimp.com/) [ ![](https://www.toujou.de/_assets/processed/21IlArqFHnbXQFtmHUYpEKzMG3pMKA1rdhDc8Y4pNKE/q:85/c:1920:1078.6516853933:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0VpbmZhY2hlX05ld3NsZXR0ZXItRWluYmV0dHVuZ19lbl9jYTg5MjQ1ZGY4:t/cb:b86380ff09adc6643339e6fcce7e0d3353ac50f5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9FaW5mYWNoZV9OZXdzbGV0dGVyLUVpbmJldHR1bmdfZW4ucG5n) ](https://www.toujou.de/_assets/processed/rwcp7ayA04iOsoOzJdFCA0-EcCLJsBCGIODx0PIp9NM/q:85/w:1024/h:576/fn:Y3NtX0VpbmZhY2hlX05ld3NsZXR0ZXItRWluYmV0dHVuZ19lbl8wMjgyOTQyZTA5:t/cb:b86380ff09adc6643339e6fcce7e0d3353ac50f5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9FaW5mYWNoZV9OZXdzbGV0dGVyLUVpbmJldHR1bmdfZW4ucG5n) ### Creating a newsletter embedding - Before embedding a newsletter subscription via HTML in toujou you must first generate the necessary code via your email provider. You will find instructions for CleverReach and Mailchimp in the respective links below. - For the newsletter subscription to appear in the front end as a form, you need to create a new content element on the desired page. Click on the **+ Content** button and then on the widgets tab on the desired HTML element. For example, if you want a form to extend to text width, you can choose **HTML**. - Under the *Content* tab, you can copy and paste the HTML code generated by the newsletter provider into the *text field.* - **Save** the changes. [HTML embedding with CleverReach ↗](https://support.cleverreach.de/hc/en-us/articles/202373311-Providing-a-newsletter-registration-form) [HTML embedding with Mailchimp ↗](https://mailchimp.com/en/help/add-a-signup-form-to-your-website/) --- Attach a newsletter subscription to another form ------------------------------------------------ With toujou, you can run a query in each of your forms to determine whether an additional newsletter subscription is desired. In the following steps we will explain how to integrate this query into existing forms. **Currently**, this can only be **done** if you are using **CleverReach** as your email provider. [ ![](https://www.toujou.de/_assets/processed/THb57BT7xpqnV020vk5gSfjvvbfltEbKTqKvhQujMac/q:85/c:1920:1078.6516853933:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NsZXZlcnJlYWNodmVya251ZXBmdW5nX3ZvcmJlcmVpdGVuX2VuXzMxNmMzZTY4ZjE:t/cb:05220f13e38ec126bad08c9c0aea5f5e1d0bf768/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9DbGV2ZXJyZWFjaHZlcmtudWVwZnVuZ192b3JiZXJlaXRlbl9lbi5wbmc) ](https://www.toujou.de/_assets/processed/DuFFSsTKTLwdkM8YJQUHXZ5XKH3roz7pXevUh-2qJNw/q:85/w:1024/h:576/fn:Y3NtX0NsZXZlcnJlYWNodmVya251ZXBmdW5nX3ZvcmJlcmVpdGVuX2VuXzc3MDM2ZjViNjE:t/cb:05220f13e38ec126bad08c9c0aea5f5e1d0bf768/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9DbGV2ZXJyZWFjaHZlcmtudWVwZnVuZ192b3JiZXJlaXRlbl9lbi5wbmc) ### Preparing the CleverReach shortcut - If you want to attach the newsletter subscription to another form, you will first need the four additional CleverReach parameters: Client ID, Client Secret, Form ID and Group ID. - You will get the Client ID and Client Secret when you create the Outh app in the *REST API* section. - The form ID can be found in the *forms* section and the Group ID in the *recipient* section (see screenshot). [ ![](https://www.toujou.de/_assets/processed/ZqwJvYdrBUtYSbTFO-1wkuw-Fu5ZVOY6Lvs360Bj4vg/q:85/c:1920:1078.6516853933:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0NsZXZlclJlYWNoX0Nvbm5lY3Rpb25fUmVjb3JkX2FubGVnZW5fZW5fYWE5NWY3MjBiMA:t/cb:f94b2699d1f6368da9b9c5bfef544c71e33caa71/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9DbGV2ZXJSZWFjaF9Db25uZWN0aW9uX1JlY29yZF9hbmxlZ2VuX2VuLnBuZw) ](https://www.toujou.de/_assets/processed/-3XPvK_soRAQhX8l__2-_jDnXkmx_e4lBTkuE0BNA0E/q:85/w:1024/h:576/fn:Y3NtX0NsZXZlclJlYWNoX0Nvbm5lY3Rpb25fUmVjb3JkX2FubGVnZW5fZW5fMzhlZDRlY2YzYQ:t/cb:f94b2699d1f6368da9b9c5bfef544c71e33caa71/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9DbGV2ZXJSZWFjaF9Db25uZWN0aW9uX1JlY29yZF9hbmxlZ2VuX2VuLnBuZw) ### Creating a CleverReach Connection Record - To attach a newsletter subscription to another form, you first need to link the CleverReach account to your toujou back end. - To do so, click on the **List view** in the module list, then on **Storage Folder** in the tree view and then the **cross icon**. When you press the **CleverReach Connection** button in the *toujou* section (left box) you then open a new folder. - Enter the desired name (e.g. Newsletter) under T*itle*. Under *Client ID* and *Client Secret*, type the corresponding data of CleverReach (see above). - **Save** your settings. Afterwards, the corresponding document is available under *List > Storage Folder > CleverReach Connection.* [ ![](https://www.toujou.de/_assets/processed/qzfmKDkRSivKjIjylQB8bwKi9rY91veNGJi4f2z_-04/q:85/c:1920:1078.6516853933:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX2Zvcm11bGFyX2F1c3dhZWhsZW5fZW5fMzE1NjhkOWRjNw:t/cb:c8d4b798443f97b18f0830bfa2d3901c44509cc9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9mb3JtdWxhcl9hdXN3YWVobGVuX2VuLnBuZw) ](https://www.toujou.de/_assets/processed/azxfArPF76gFwZOVfsbnkkSFtJWpItoMeSOdaFcgqv8/q:85/w:1024/h:576/fn:Y3NtX2Zvcm11bGFyX2F1c3dhZWhsZW5fZW5fOWEyMDk3MzAzMw:t/cb:c8d4b798443f97b18f0830bfa2d3901c44509cc9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9mb3JtdWxhcl9hdXN3YWVobGVuX2VuLnBuZw) ### Select form - Click on **forms** in your module bar and select the desired form (e.g. Request for a demo). The form mask will appear with all the input fields you have set up (see next picture). - To find out how to add or remove additional input fields to a form, and how to set up a form in general, see the video »create new form« in the TYPO3 tutorial »[Create forms](https://www.toujou.com/service/tutorials/page-content/forms/#c1004996)«. [ ![](https://www.toujou.de/_assets/processed/7hkSrhtWzRE5wUdfbXb-Y3mOnzGu0Z4Dl8wyvC8QiK4/q:85/c:1920:1078.6516853933:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0ZpbmlzaGVyX2FubGVnZW5fZW5fNTljNDY4ODNjNg:t/cb:baf7ee467d9abd53b40fe10b9ea30073b41e00ce/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9GaW5pc2hlcl9hbmxlZ2VuX2VuLnBuZw) ](https://www.toujou.de/_assets/processed/EEXlKzrHZSo11Gf9rbsZ71Gpj1sXDkb5MTR5eDsf-7w/q:85/w:1024/h:576/fn:Y3NtX0ZpbmlzaGVyX2FubGVnZW5fZW5fZmJhOTEzNzlhNg:t/cb:baf7ee467d9abd53b40fe10b9ea30073b41e00ce/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvbmV3c2xldHRlci9GaW5pc2hlcl9hbmxlZ2VuX2VuLnBuZw) ### Create finisher and enter data - To finalize the link the form data and CleverReach you need to create a finisher. Click on the drop-down menu **Add Finisher** and select **CleverReach Subscribe**. A CleverReach form opens in a new window. - Press the **CleverReach Record** button under the field *CleverReach Connection*, which will cause the module tree appears then. Click on **Storage Folder** and the desired **CleverReach Connection** to generate the connection. - Locate the *Target Form ID* and enter the CleverReach Form ID. For the *Target Group ID*, enter the Group ID. - By clicking on the corresponding **selection field** on the right side (symbol with arrow down) you can fill in the input field *email*. To select one, an email address must be marked as mandatory field in the form. - Next you will need to add the Newsletter Checkbox. This is a required aspect of any newsletter because it allows users to confirm that they do in fact want to receive the newsletter. To ensure that the checkbox works properly you must select the corresponding **item**. - Finally, **save** all changes. --- Pieces of advice ---------------- toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website. Before implementing a newsletter subscription on your toujou website, a registration with an email provider is necessary. Beneficial to toujou is the HTML integration that both Mailchimp or CleverReach provide. For a successful finisher for a newsletter registration with another form, it is essential to request the email address beforehand. The newsletter checkbox should also be included to guarantee that you are compliant with the consent policy and that you only store user-approved data in the back end. Other fields such as first name and surname are optional, but useful to provide a personal touch for your customers. Please note that both the free version of CleverReach and Mailchimp put limits on the number of allowed addresses and the amount of emails that can be delivered. Once you surpass their set limit additional fees will be charged. If you have any questions regarding the application of these or any other email providers please contact our [support](https://www.toujou.com/service/support/#c1002260).