34,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Joomla! is a fantastic way to create a dynamic CMS. Now you want to go to the next step and interact with your users. Forms are the way you ask questions and get replies. ChronoForms is the extension that lets you do that and this book tells you how.
From building your first form to creating rich form based applications we will cover the features that ChronoForms offers you in a clear hands-on way. Drawing on three years daily experience using ChronoForms and supporting users there is valuable help for new users and experienced developers alike.
We will take you through form development step by step: from creating your first form using ChronoForms’ built-in drag-and-drop tool; validating user input; emailing the results; saving data in the database, showing the form in your Joomla! site and much more.Each chapter addresses a topic like ‘validation’ or ‘email’ and the recipes in the chapter each address a different user question from the beginners’ question ‘How do I set up an email?’ through to more advanced questions like using some PHP to create a custom email Subject line.Over eight chapters and eighty recipes we cover all of the ‘Frequently Asked Questions’ that new users and developers have about using ChronoForms. The recipe structure allows you to pick and choose just the solution that you need.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 408
Veröffentlichungsjahr: 2010
Ähnliche
Table of Contents
ChronoForms 3.1 for Joomla! Site Cookbook
ChronoForms 3.1 for Joomla! Site Cookbook
Copyright © 2010 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: August 2010
Production Reference: 2131010
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849510-62-2
www.packtpub.com
Cover Image by Vinayak Chittar (<[email protected]>)
Credits
Author
Bob Janes
Reviewers
Laurelle Keashley
Norm Douglas
Acquisition Editor
Usha Iyer
Development Editor
Mehul Shetty
Technical Editors
Tariq Rakhange
Krutika V. Katelia
Indexer
Rekha Nair
Editorial Team Leader
Mithun Sehgal
Project Team Leader
Priya Mukherji
Project Coordinator
Zainab Bagasrawala
Proofreader
Aaron Nash
Graphics
Geetanjali Sawant
Production Coordinator
Arvindkumar Gupta
Cover Work
Arvindkumar Gupta
About the Author
Bob Janes started programming with punched cards a long time ago. As the Finance Director of a multi-national business, he kept his finger in the IT pie, much to the chagrin of those in corporate IT, and delivered innovative and successful systems projects ranging from foreign exchange to manufacturing.
More recently, he has been able to return to hands-on coding and learned the basics of CMS coding with E-Xoops before turning his hand to Joomla! and WordPress. Bob enjoys learning through answering questions and has made more than 14,000 posts in the ChronoForms forums over the last few years.
Bob divides his time between Brittany and London, and divides his work between coding and coaching — he has Bachelor's degrees in both Mathematics and Psychology and a Master's degree in Organisational Consulting.
I'd like to thank Max who developed ChronoForms, and all the ChronoForms users whose questions made this book possible; my wife, Jane, who puts up with my hours in front of my keyboard; and my father who set me off on this path many years ago.
About the Reviewer
Laurelle Keashly graduated with a B.Sc in Computer Science from the University of Calgary. After graduating, Laurelle moved to the Vancouver, BC metropolitan area where she has done software programming, user interface design, and development team management for embedded communication and PC based accounting systems. Taking some time off to raise a family in the Burnaby, BC area, Laurelle got into website design, development, and support with local non-profit organizations. As her family has grown, her interest in web technologies grew to where she started Keashly.ca Consulting which provides the full spectrum of website development, support, and services with a specialty in Joomla! CMS-based sites. Laurelle is a moderator and an active member of the Joomla! forum and has created and released several Joomla! extensions. Laurelle continues to explore and provide up-to-date web-based services by actively keeping herself aware and supporting other CMS systems besides Joomla! such as Wordpress and Drupal.
Norm Douglas loves technology. He has always built websites from as early as 1997. While researching and trying to develop his own rudimentary CMS from PHP, Norm stumbled upon Mambo, the precursor of Joomla!.
Seeing the benefits not only to him as a developer but also to his clients, Norm immediately set about learning everything he could about PHP, MYSQL, CSS, CMS, and ultimately, Joomla!.
Norm's broad range of IT experience and skills come together to make him an excellent all-round tutor. Not happy with just "showing" you how to do "x" and "y", Norm will explain concepts to you. His goal is to help as many people as he can become better developers, webmasters, content managers, or just contributors as he is, so that the open source community may grow larger.
He also runs "TeachingJoomla.com", a subscription-based site for Joomla enthusiasts and those that manage their own site. Norm is also behind RedsourceMedia.com and is the lead developer at KeyVision.com.au.
Preface
Joomla! is a fantastic way to create a dynamic CMS. Now, you want to go to the next step and interact with your users. Forms are the way you ask questions and get replies. ChronoForms is the extension that lets you do that and this book tells you how.
From building your first form to creating rich, form-based applications, we will cover the features that ChronoForms offers you in a clear hands-on way. Drawing on three years' daily experience of using ChronoForms and supporting users, there is valuable help for new users and experienced developers alike.
We will take you through form development step-by-step from creating your first form using ChronoForms' built-in drag-and-drop tool, validating user input, emailing the results, saving data in the database, showing the form in your Joomla! site, and much more. Each chapter addresses a topic like "validation" or "e-mail" and each of the recipes in the chapters address the questions of different users from the beginner's question such as "How do I set up an email?" to more advanced questions like using some PHP to create a custom e-mail Subject line. Over 12 chapters and 80 recipes we cover all of the "Frequently Asked Questions" that new users and developers have about using ChronoForms. The recipe structure allows you to pick and choose just the solution that you need.
This practical book, packed with easy-to-flow recipes, tips, and tricks, will help you add interactive forms to your sites with the ChronoForms.
What this book covers
Chapter 1, Creating a Simple Form: This chapter will teach you how to download and install ChronoForms, create your first form with the drag-and-drop Form Wizard, send the form results by e-mail, customize the e-mail, show a "thank-you" page to the user, edit your form with the Wizard Edit, re-direct the user after they submit the form, back up, and restore your forms.
Chapter 2, E-mailing Form Results: This chapter covers sending form result to an administrator, getting your e-mails delivered safely, sending a message to the form user, sending emails to different people depending on the form results, attaching uploaded files to an email, sending a file to the user, and creating an e-mail subject line from the form results.
Chapter 3, Styling your Form: The topics covered use the ChronoForms built-in styles, switching to another form template, adding your own CSS, using the Wizard Edit to put several form inputs in one line, and changing the layout by adding your own HTML.
Chapter 4, Saving Form Data in the Database: The topics covered are creating a database table and linking your form to it, updating and changing database connections, viewing the saved data, and exporting data to Excel or CSV.
Chapter 5, Form Validation and Security: This chapter covers making form fields required with ChronoForms built-in validation, specifying the type of input required, customizing validation messages, adding extra "server-side" validation, getting the user to confirm their results, adding a ChronoForms "captcha" check to your form, using a "ReCaptcha" check instead, and limiting form access to registered users.
Chapter 6, Showing your Form in your Site: This covers showing your form in an article, or on selected pages in a module, linking to your form from a menu, using a form to create an article, and redirecting users to other Joomla! pages.
Chapter 7, Adding Features to your Form: Here we take a look at some ways to use ChronoForms, such as adding a "terms and conditions" checkbox, linking an "other" box to a select drop-down, sending an SMS message when the form is submitted, signing up to an off-site newsletter service, adding a Google conversion tracking script, showing a YouTube video, adding a barcode to an e-mail, adding a character counter to a textarea input, and creating a "double drop-down" where the second changes depending on the first.
Chapter 8, Uploading Files from your Forms: This chapter covers setting up file uploads, choosing where to save files, changing file names, linking flies to emails, resizing and copying uploaded image files, showing uploaded images in articles and emails, and troubleshooting file uploads.
Chapter 9, Writing Form HTML: Moving existing forms to ChronoForms; moving a form that uses JavaScript; and CSS; creating forms in Dreamweaver.
Chapter 10, Creating Common Forms: In this chapter, we create forms for newsletter sign-ups, "Contact Us", link to a Joomla! component like Acajoom, publish an article, image or document upload, and a multi-page form.
Chapter 11, Using Form Plug-ins: This chapter covers using ChronoForms "plugins" for extra performance: manage for access by user group or date and time, create multi-lingual forms, show and edit a saved record, register Joomla! users, and create a PayPal payment form.
Chapter 12, Adding Advanced Features: This chapter covers using AJAX with a form, using PHP to create select drop-downs, getting information from the database to use in your form, showing a form in a light box, tracking the page that the form was submitted from, controlling e-mails from form data, building a complex multi-page form, and hints and tips for troubleshooting your forms.
What you need for this book
You will need administrator access to a Joomla! 1.5 installation. In order to run Joomla! 1.5, the minimum requirement is to use a server running PHP 4.3.10, MySQL 3.23, and Apache 1.3 IIS 6.
Some parts of ChronoForms use functionality only available in PHP 5 and we recommend that you use the Joomla! -recommended specifications which are currently: PHP 5.2 or higher; MySQL 4.1 or higher, and Apache 2 or IIS 7.
You will also need to download the the latest release of the ChronoForms extension for Joomla!. Instructions for this are provided in Chapter 1.
Note: ChronoForms makes extensive use of the MooTools JavaScript library. Mootools version 1.1.2 is installed with Joomla!. The latest Joomla! Rrelease includes an option to enable MooTools 1.2.4 -— ChronoForms 3.1 will not run correctly if this option is enabled,.
Who this book is for
This is a practical hands-on book for people who want to add forms to their Joomla! site. Whether you just want to add a simple newsletter sign-up form or a complex multi-page interactive form, you'll find helpful suggestions and recipes that will get your forms working.
Many recipes will work out of the box using ChronoForms built-in capabilities. Other more advanced recipes require some knowledge of Joomla!, HTML, CSS, PHP, MySQL, or JavaScript. There is a working code with each recipe that you can adapt to, to meet your specific needs.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book — what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Tip
Downloading the example code for this book
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books — maybe a mistake in the text or the code — we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Creating a Simple Form
In this chapter, we will cover:
Introduction
Let's say that we want to add a very simple form to our Joomla! site. Probably the simplest is a newsletter sign-up. We will just collect the user's e-mail address and send the result to the site administrator. Later, in the book we'll be able to extend this form to do much more, but this simple version is a great place to start.
Downloading and installing ChronoForms
ChronoForms is a Joomla! extension that has been developed by Max (also known as ChronoMan) to allow you to add forms to a Joomla! site. Getting the extension and installing it is the first step.
Getting ready
You'll need a working Joomla! installation. We recommend that you use the latest version of Joomla! and keep your installation up to date with security releases. At the time of writing, the latest release is Joomla! 1.5.20.
Note
If you have an old Joomla! 1.0.x site, then there is an old version of ChronoForms that you can use; it has much less functionality than the current version described here. Both Joomla! .1.0.x and that old version of ChronoForms are deprecated, and little or no support is available. We strongly recommend that you upgrade to Joomla! 1.5.
How to do it...
Note
Although this is an RC (Release Candidate) version, it is the latest and most stable ChronoForms release.
Tip
Caution: Before installing any new extension it is sensible to back up your site and the site database. You should also check the Joomla! Vulnerable Extensions List at http://docs.joomla.org/Vulnerable_Extensions_List to make sure that there are no adverse reports about the extension.
Note
The standard Joomla! installation process usually works perfectly with ChronoForms. ChronoForms has been designed to work with this process, however occasionally it doesn't work as expected. If this happens then usually it is for one of these reasons:
Note
Often a "manual installation" will get you past these; see the Joomla! Documentation site at http://docs.Joomla!.org/How_do_you_install_an_extension%3F or a simple video here: http://www.solarenergyhost.com/content/view/182/205/.
Note
You can install the ChronoForms Plugin/Mambot (used to show forms in Joomla! articles) , and/or the ChronoForms Module (used to show forms in Joomla! template modules) at the same time, if you know you are going to need them. The process is exactly the same. We will meet these add-ons again in Chapter 6, Showing your Form in your Site.
Tip
The Forms Manager has a "Tip of the Day" feature. If you feel this gets in the way, you can turn it off by clicking the Parameters icon at the top right.
The pink validation bar can't be turned off, but it will turn green if you pay a small subscription to validate your copy of ChronoForms. The only difference between the validated and invalidated versions is this bar and a strap line, Powered By ChronoForms - ChronoEngine.com, which appears under all forms in the invalidated version. All the other features are identical.
There's more...
Max is constantly reviewing ChronoForms, and a few times a year there is a new release. If your forms are working as you want them, there is no need to upgrade unless there is a security release. If there are new features that you want to use, you can upgrade by downloading the new release installation file and installing it as explained earlier in this recipe. You can install an upgrade over the existing version without uninstalling it.
To be safe, you should back up your database tables and all of your forms before you upgrade.
See also
Creating a simple form with the Form Wizard
ChronoForms is all about creating forms so this is where all the proper action starts.
Forms in Joomla! can do many things, from the very simple example that we will create here, to complex multi-page forms that change depending on the entries that are made, do calculations, send e-mails, and update databases. However, the basic building blocks are just the same.
In this recipe, we're going to create just about the simplest form possible. It's a newsletter signup with just one field for an e-mail address and a submit button:
Getting ready
All you need is a Joomla! site with ChronoForms installed.
How to do it...
The Form Wizard tab opens up looking like this:
There are four steps that the Wizard can help with, though we're only going to use Step 1 Design your form here. There's an empty work area with Preview and Save icons to the top left and a Toolbox to the right with a Propertiesbox below it that is currently empty. To the top right of the image is a Cancel button in case you change your mind.Note
You can also click the other blue links above the "Steps" — Forms Management, Wizard Custom Elements, and so on — but if you do so without saving first, you will lose your work.
This isn't the world's easiest screen layout but it will be fine once you get used to it.
There are a whole row of properties that you can set, but we're only going to change one right now. Click the form element so that the Properties box is open, then go to the input marked Label and delete the Click Me to Edit text; instead type Email. Then click Apply at the bottom of the Properties box.Although you can type into the input box in the workspace at the left, that has no effect. So, just leave it empty. You should only make changes in the Property box.
Note
Clicking Apply here records the properties. If you make a change then click on another element, or save the form without clicking Apply first, your changes will be lost. Note that Apply here does not save your form.
The button is automatically labelled as a Submit button. You can change this in the (much smaller) Properties box, but we'll leave it just as it is for now.
Now click the "blue screen" icon at the top left of the workspace to see a preview of our form.The preview opens in a "modal" window over the working area. While this is open you will not be able to access the administrator menus or tools. The preview is shown in the following screenshot:
Perfect, now we just need to save it. Close the Form Preview window from the close link at the top right-hand corner, and then click the "floppy disk" icon to save the form.Type a name in the box. Let's use "newsletter_signup" and click Save.Note
Warning: The text box here will accept almost anything but some choices of name will cause problems later. The rule to follow is: Only use a-z 0-9 and underscore (no capital letters, no spaces, no dashes, or any other special or accented characters). We'll see these same rules applied later to names and IDs, and it's useful to be consistent here.
Reading across the form row, the entries are :
Tip
You can also use the Publish and Unpublish icons in the Toolbar, which is useful if you want to change more than one form at a time.
You can submit it, but nothing will happen yet. We have to set up a little more code to tell ChronoForms what to do when the submit button is pressed.
How it works...
There's been quite a lot going on behind the scenes here. The ChronoForms Form Wizard builds a set of Form HTML for your form. It also applies some CSS styling and sets up the framework for a lot more features and functionality that we will come to shortly.
Here's the Form HTML that's been generated for this form, copied from inside the Form Editor, as we'll see later:
Sending the form results by e-mail
We have a newsletter sign up form that works, but doesn't do anything. The simplest action to take when the form is submitted is to send an e-mail to the site administrator to say that a new form submission has been made.
Getting ready
You need the simple form that we created in the previous recipe, and to navigate to the ChronoForms Forms Manager view in the Site Administration area.
To actually send an e-mail successfully, your site must have access to a working mail server configured in Site | Global Configuration | Server | Mail Settings (see the Joomla! documentation at http://docs.Joomla.org/Screen.config.15#Mail_Settings).
How to do it...
Note
ChronoForms saves the "source" code for the Wizard completely separately from the Form HTML that you will see in the Form Editor. And it isn't clever enough to re-interpret all the possible manual changes that could be made. One way to work is to use Wizard and Wizard edit to rough out a form, then add the finer details by manually editing the Form HTML, but then we can't use the Wizard on that form again.
Notice that the Toolbox entries all relate to e-mail headers — To, From Name, Subject, Reply to, and so on. But at the moment we can't drag them into the workspace.
First, click the envelope icon to create a new e-mail setup. An Email Setup is a set of instructions to tell ChronoForms to send an e-mail using this particular set of headers.Tip
You can have more than one e-mail set up in this space by clicking the envelope icon again. So, for example, you could send one e-mail to the site admin and another, quite different one to the person who completed the form.
Now we have an e-mail setup workspace coloured red.
Drag the following elements from the Toolbox into the red box in the workspace:Two things have happened here. The Email Setup workspace box is no longer red, it's a yellow-green, and the Email Properties box now has some content.
Tip
We've added the elements in the order To, Subject, and so on, but in practice the order doesn't matter. You can also use other elements but we'll come to them later.
If the workspace stays red, then you do not have the correct four elements in the workspace! Also notice that when the workspace is red the Enabled? option in the Email Properties box is greyed out.
We now need to add entries to each of these four boxes. Unlike the Form Design workspace where the boxes are left empty, in Email Setup they must be completed.The preceding screenshot shows a completed Email Setup. Notice that the To and From Email boxes have valid e-mail addresses in them. If they are not valid the e-mail will fail — ChronoForms does not check these, it's up to you to get them right.
Note
We will use example.com as a generic domain throughout this book. You will need to replace this with the domain of your site as appropriate.
In the Subject and From Name boxes you can add any text string that you like, provided that it's not too long (the box will accept 150 characters, but a practical limit is around 50).
While you can put any valid e-mail address that you like in the From Email box, we strongly recommend that you use an address that has the same domain as your website. Many ISPs check e-mails being sent to make sure that the domains match. If they do not then the e-mail may be flagged as spam, or just dropped.
Note
We have used admin@ in the To box and info@ in the From Email box. It should be possible to use the same e-mail address in both boxes but we have seen a few cases where e-mails with identical To and From Email addresses have not been delivered.
Set the Enabled? drop-down to Yes, and then click Apply to save the Email Setup.
Then click the "floppy disk" icon above the workspace to save the form again.
When you click the "save" icon you will be asked the name of the form that you want to save. This field defaults to the name of the form that you were currently editing, but if you wanted to save a new form, you could change the name of the form in the input box. We will just leave the form name that we are editing and update this form.
Back in the Forms Manager you can see that the Emails column has changed and now has an entry that says Enabled:0 / Disabled:1.So we have our e-mail setup but it is still disabled. To enable e-mails we need to open the form for editing not in the Wizard Editor but in the standard ChronoForms Editor. To do this click the newsletter_signup link (over to the left in the image):There are a lot of tabs here and many settings options, but we only need to change one. On the General tab find Email the Results? and change the setting to Yes.Now click the Save icon (the floppy disk) to the top right of the screen to save the Forms configuration.Tip
This option turns "all" e-mails on or off, while the setting in the Email Setup | Properties box turns just that single Email Setup on or off. Of course, if you only have one Email Setup these are the same but it's useful with more complex forms.
Back in the Forms Manager view you can see that the Emails column now reads Enabled:1 / Disabled:0. Perfect!
We just need to test our form to check that the e-mail works correctly. Click the form "link" entry to open the form in a new browser window or tab; enter an e-mail address in the Email box and click Submit.Note
If you still have the form open in your browser that's fine, but please click the Re-Load button in your browser to refresh the code before you test.
When you click Submit the form is submitted and you are left looking at an empty Joomla! page, that is unless you get an error message. We'll put a "Thank You" message on here in the next recipe.
And here's the e-mail I received after submitting. Notice that ChronoForms has built the email using the information we put into the Email Setup (I've blanked out the real e-mail address I used to send it to).
And it has taken the information submitted from the form and included that in the e-mail body. That's clever!
There's also the IP address of the submitter; you can turn this off in the Email Setup | Properties if you don't want it.
Congratulations! Now you have a working form that carries out an action when it is submitted. My guess is that around half of all web forms work just like this, though maybe with a few more fields.How it works...
ChronoForms has taken the information we input in the Email Setup and taken the form HTML to create a default body template for the e-mail, and combined all these together behind the scenes to create a rather basic but completely functional e-mail.
See also
Showing a "Thank You" page
When you submit a ChronoForms form, the default is to show you a blank page like the following screenshot:
This isn't too friendly or helpful. There are a couple of ways of dealing with this — you can redirect the user to another page (see the Redirect the user to another page section a little further on) or you can show a "Thank You" message on this page. That's what we'll do here.
Getting ready
We'll be using the same form as the previous recipes.
How to do it...
Again we have a different workspace. There's a new icon we'll come to later — a ReDirect URL box, a rich text editor and, down in the bottom left, some links to turn the editor on and off.
We are just going to enter a little thank you message in the rich text editor:
Put in what you like but here's the message I've used. You can also use the editor functions to make the message prettier if you like.
When you are done click the floppy disk icon to save the form again, then click Save on the modal window to save the form with the same name.Back in the Forms Manager, click the form link to open it and submit the form. Here's what I see:Mission accomplished!How it works...
ChronoForms saves the text you enter and shows that as the content in the page it displayed after the form is submitted.
We just added some plain text here; in practice the text can be formatted and styled, you can show images, or links, and more, much more.
There's more...
Let's look at one more really useful feature here. ChronoForms can display the information entered in the form on the "Thank You" page. Let's show the e-mail address that they entered.
Go back to Step 4 in the Wizard Edit and alter the first sentence to read Thank you very much for subscribing to our newsletter with the email. Leave your cursor right before the full-stop and click the new Add field icon (the pen and paper) to the right of the floppy disk icon.
After you click the icon a window opens showing you a Form preview, except that this time there are some blue icons over to the right, one for each element. Click the top icon to select the Email element.
When you click the icon the window closes and there is a new text snippet in the editor where your cursor is. My first sentence now reads Thank you very much for subscribing to our newsletter with the email{text_0}. The new snippet {text_0} is the name of the element I chose inside curly brackets {field_name}.
