322
SHARES
Drag and Drop Newsletter Builder using jQuery
February 1, 2015
50 comments
155,099
In this tutorial i will teach you how to create a drag and drop interface for a newsletter builder using jQuery. You will be able to create your own template and import it in the builder because i have designed the builder to work with various templates not just the one in the example. I will explain to you how you can insert your own template at the end of this tutorial. This is one of the most complex tutorials I have created so please pay close attention if you really want to understand how it works.

I also want to point out that font icons probably won't be supported by all the email clients. This builder will have both Download and Export options. When exporting or downloading with the intend of importing it into a newsletter service you should change the setting of your service provider to convert the CSS styles into inline styles.

The Downloading side of this tutorial is using a little bit of PHP which i had to use unfortunately. If you want to run this feature you will have to make sure you run the export.php file on a PHP server. If don't want this feature or you are not familiar with PHP the newsletter builder will work perfectly without this feature.

HTML

So let's start out the HTML section by talking about "newsletter-preloaded-download" element. This element is not visible when you load the page, you will see that there is a text area inside a form. I will use this form to add content so i can send it using Ajax to export.php file which will push the download.



"newsletter-preloaded-export" will also be invisible and it will be used to hold some HTML code for formatting when doing the export.



"newsletter-preloaded-rows" will be used to store the html template rows which will later be used for insertion inside the newsletter. Inside this element the actual template starts. I will not talk about the HTML of the template I created because there is so much to talk about the actual builder. The only thing I will say about the template is that it uses a row based system which will be a requirement when creating your own templates.



After the template rows the next important elements are 6 popup boxes that will be used to edit and export the template. I have created 5 popups for edit and 1 for export. These are the 5 edit popups: Image, Link, Title, Text and Icon.

The export popup only contains a text area and a cancel button. The export code will be generate inside the text area.



Edit image popup will have an input field, save button and a cancel button. The input field will be used to host the URL of the image.



Edit link popup will have a title, URL, save and cancel buttons.



Edit title field will host input field, which will be used to edit titles, save button and cancel button.



The edit text popup will be exactly like the edit title popup except instead of input field we have a text area to help us edit larger texts.



The icon edit popup it is a bit different than the rest of the edit popups. It will not contain a save button because the save will happen once someone clicks on an icon. To save time i only included 3 icons here. The final tutorial will have much more. You will find all the icons once you download the source code of this tutorial.



The main HTML element is "newsletter-builder". Inside this element we will host "newsletter-builder-sidebar" and "newsletter-builder-area".



Sidebar element will appear in the left and it will contain Download and Export buttons.



"newsletter-builder-area" has a series of child elements like "newsletter-builder-area-center" and "newsletter-builder-area-center-frame" which only purpose is to resize the building area nicely.



Inside "newsletter-builder-area-center-frame" there are two main elements the buttons part "newsletter-builder-area-center-frame-buttons" which is at the actual building area "newsletter-builder-area-center-frame-content". The top contains Add and Reset buttons. Inside Add button there is a dropdown that contains photos with all the template rows.



"newsletter-builder-area-center-frame-content" is where the real magic happens at the beginning it will store the default template but the content inside will changed using the edit buttons.



That is everything important regarding the HTML the rest of the content inside "newsletter-builder-area-center-frame-content" is the actual newsletter template which is not important for now because the purpose of this tutorial is to teach you how to create the builder not the template.

CSS

You will see that besides the Google Fonts and Font Awesome icons attached style sheets there two more attached style sheets, newsletter-builder.css is the style sheet for the builder and newsletter.css is the style sheet for the newsletter template used in this example. I will only talk about the newsletter-builder.css.

I will go ahead and set #newsletter-builder position to relative so we can position other elements inside using absolute position as well as setting the overflow to hidden.



The #newsletter-builder-sidebar will be positioned at the left of the screen using the absolute position.



I have set the overflow of #newsletter-builder-area to auto so that the proper scrolling bars will appear when the content inside #newsletter-builder-area is larger than the actual element.



All popups are using the .sim-edit class which is set to a fixed position and it is used manly as the background.



.sim-edit-box is the actual popup box. Both .sim-edit-box and .sim-edit have the display set to none because I will turn those on and off individually from each other at different time intervals.

JavaScript

Let's start out by making some elements resizable. Because i have designed the builder with the sidebar floating to the left and when you resize the window only the #newsletter-builder-area will have the scrolling bars and not the whole page. To make this possible i had to create a resize function that changes the width and the height of some elements based on the size of the window. After i have declared the function you will see that i have set it up in the case of a browser resize the widths and the heights will have to be resized once again. Once i finished with the browser resize i have summoned the resize function so that this function will take effect every time you refresh the page.



In order for the resize function to work we will have to apply the .resize-height class to #newsletter-builder and #newsletter-builder-area and .resize-width class to only #newsletter-builder-area.

Unfortunately guys i know i shouldn't include PHP in my tutorials because i only want my tutorials to be about CSS and JavaScript related stuff but i just had to do it. The download aspect could only be done using PHP and since this is a very nice aspect of the whole builder just being able to download the newly created template in a .html format was so awesome that i told myself, what the heck let's just do it. Before going over the JavaScript role in the download button i wanted to let you guys know that in order to download the files you need to run the export.php file on a PHP server. I will talk about the PHP code inside export.php in the next section but for now let's just talk about JavaScript. The add content, #newsletter-builder-area-center-frame-buttons-add contains the dropdown #newsletter-builder-area-center-frame-buttons-dropdown that will only be visible when the mouse is over the add button.



Inside the dropdown there is a list with 3 types of content and also a content area .newsletter-builder-area-center-frame-buttons-content filled up with elements which holds pictures. This content area will only be shown when someone hovers the mouse over #newsletter-builder-area-center-frame-buttons-dropdown.



Each tab element inside .newsletter-builder-area-center-frame-buttons-content has a data-type HTML5 attribute which is used to store the type of content which that image holds. There can be three types of values there: header, content and footer. We will show those elements accordingly. When they hover over #add-header we will only show the elements with the data-type equal to header and hide the rest. When they hover over #add-content we will only show the elements with the data-type equal to content and hide the rest. When they hover over #add-footer we will only show the elements with the data-type equal to footer and hide the rest.



You will notice that when you hover the mouse on the images inside content you will see a small insert button. The button is not inside the HTML but is inserted when the mouse is over the picture and removed when the mouse if off the picture. This adding and removing helps us to get rid of a lot of functions refresh. When the mouse is in a hover state we have to append the insert button to the tab in which that particular image is located. Inside this hover state function we will also run a click function which will expire in the off hover state. The click function will add the appropriate content when you click on the insert button. The whole builder works with elements called rows so when you click on a certain insert button we will pick the appropriate content which stays inside #newsletter-preloaded-rows and add it to #newsletter-builder-area-center-frame-content. How do we know which row to add ? You will see that each .newsletter-builder-area-center-frame-buttons-content-tab has it's own data-id attribute which coincides with the data-id attribute of one of the template rows .sim-row located inside #newsletter-preloaded-rows. At this point not only that we have to add the appropriate content but we also have to add the appropriate edit elements like the on hover pen icon as well as the delete icon on the newly added content inside the main building area. After doing this we will close the #newsletter-builder-area-center-frame-buttons-dropdown because i decided it makes for a better user experience if we close the add element section.



I will explain to you now how does the little pen icon appears when you hover the mouse on any element inside the building area. Before that i have to tell something i haven't previously talked about which is the newsletter template itself. You will see that every editable element inside each template row has the class .sim-row-edit attached to it as well as the data-type attribute. The data-type attribute can have 5 possible values which will indicate what kind of content are we dealing with. The values can be the following: image, link, title, text and icon. Now let's talk about the pen icon hover function. This functions similarly to the add content popup i talked previously. Every time you hover over the .sim-row-edit class this function will append the pen icon inside .sim-row-edit and disable the default link functions. The '.sim-row-edit-hover i' click function will be declared inside the hover section because we will get rid of it once the hove is over. At the time of the click we store the .sim-row-edit element inside the big_parent variable which is the second parent for the pen icon.



I have to point out that the whole .sim-row-edit hover function is inside hover_edit function because we have to refresh this function each time we add new content. There is also a click function for when you click the close button on one of the popups designed for edit.



As i stated in the title this is also a drag and drop builder so you can drag individually template rows around. We can do that with the following code:



Once we added and dragged the content we may want to remove it, for that purpose i created the following code that will add the little delete icons inside each template row. And a function for delete that template row.



When a user clicks on #newsletter-builder-sidebar-buttons-abutton the HTML inside #newsletter-builder-area-center-frame-content will be copied inside #newsletter-preloaded-export. We are doing this step so we can format the content in a container without effecting the main building area. Once we added the content inside #newsletter-preloaded-export we will perform the following formatting. We remove the .ui-draggable class, all the data-type attributes as well as all the .sim-row-edit class. After formatting the content inside #newsletter-preloaded-export we will go ahead and put the formatted HTML inside a variable. The #export-textarea which is the text area inside the #newsletter-preloaded-download will be submitted as a POST form to export.php defined in the form action target. Being done all that we will go ahead and remove the html inside #export-textarea so we are getting it ready for another download or export.



The exporting is done the same as the downloading until the point of submitting the form. We don't submit any form here but we will put the content of #newsletter-preloaded-export inside the export popup as well as attaching the newsletter.css file using Ajax.

PHP

Before talking a little about the code inside export.php i will point out one more time that this step is not necessary, you can remove it from your builder and if you still want this feature you will need a PHP server in order for this to run. First we will have to check if the POST variable 'export-textarea' is set. After doing the checking we will set the header of the document to a download related file. We will embed the newsletter.css inside this document surrounded by
322
SHARES
208
88
24
2
About the author
Popa Robert: Is the founder of Simbyone.com, freelance web developer and designer, he likes to create beautiful websites and water cooled PC's
50 Comments
Cagri
February 4, 2015
Excellent work my friend. I think, I will add some more features such ass, changing row content background, saving template to database etc. Thank you so much, you saved me wasting huge time.
Ian
February 4, 2015
Good tutorial. My only concern is you did not use tables to create your template. I could see this being way more difficult if you tried to build the template with tables to ensure compatibility with more email clients.
Louis
February 4, 2015
Great tutorial. Thanks a bundle. Only thing I noticed is that on demo page when you click on "Download Template", it just outputs php code - instead of downloading the html file.
Robert Popa
February 5, 2015
I think it only does that on ipad or iphone.
Robert Popa
February 5, 2015
Thanks, happy to hear this :)
Robert Popa
February 5, 2015
Thanks, Yes i think building it using tables would have been a lot more difficult. Maybe i will do a second version some time in the future using tables.
altp
February 9, 2015
Thanks. Good Tutorial.
Adam
February 18, 2015
Hello, this is a realy great tutorial :) big THANKS. Today I try to make my own html email template with table and inline css, but when I try to download my template all inline css that have " " show with backslash ( ). Could you help me with this problem? Thank you for this tutorial and for this site ;)
Robert Popa
February 18, 2015
Thanks, based on what you said i don't have too much information to give you a good answer. If you can send me the link to what you are working on i will probably be able to help you :)
Osyo
February 25, 2015
I just want to know if it is possible to save the template or textarea content in specific folder. For example, in your localhost folder instead of the "force download" thing. Did you get it? hahaha thanks :3
Robert Popa
February 25, 2015
Of course you can, you will have to use AJAX together with PHP or any other server side programming language because with JavaScript alone you can't manipulate files.
Dong Nguyen
March 5, 2015
Thanks so much for your effort. It seems that this builder not support responsive. I'm just wondering if we can integrate ink framework in this builder.
Robert Popa
March 6, 2015
I think you can integrate it with ink framework, i haven't tried it but i suggest building it custom with tables instead of divs.
Ramadan
March 9, 2015
This is the best Tut i was looking for Great work my Friend Robert ....
Robert Popa
March 9, 2015
Thanks, I am glad you liked it :)
ahmed
March 19, 2015
Thanks for this great tutorial. Can i use bootstrap to make the template?? How can i convert the code to contains only html and inline styles because most mail services don't support style sheets. Thanks in advance :)
Robert Popa
March 19, 2015
It will work, you will just have to add the class "sim-row-edit" and the proper data-type attribute.
ijja
March 20, 2015
Great tutorial, love it!
Robert Popa
March 20, 2015
Thanks :)
ahmed
March 21, 2015
Thanks for your reply :) I know i must use tables rather than divs for newsletters because most mails services don't support floats so can i use tables? and how can i convert stylesheets to inline styles??
Anto
March 22, 2015
Hi there, This is a fantastic tool! I've been trying to add a WYSIWYG editor to the input/text area fields - running into walls since it updates the content field through big_parent. Any recommendations or directions you would be able to give me? Thanks in advance!
Robert Popa
March 22, 2015
I haven't tried to use tables so I don't know what kind of problems you may run into. You can convert the style sheets to inline styles in two ways: 1. Manually 2. If you use a service like Mandrill to send emails, when sending the email through their API you have the option to automatically convert style sheets to inline CSS
Robert Popa
March 22, 2015
Hello, I suggest trying a very simple WYSIWYG editor like Redactor. The reason i haven't included a WYSIWYG editor is because i think if you give people too much control they will ruin the design :)
Anto
March 23, 2015
I agree! I only wanted to add change font styling functionality. Thank you for the quick reply. I gave redactor a try and it seems like it's the same issue. When I activate the WYSIWYG editor, the controls come up successfully but it doesn't let me modify the content of the input field in any way. Any thoughts?
Ringraye
March 29, 2015
I agree with Anto that a simple text editor to allow things like bolding and italics would be wonderful. Or adding in some basic links. It does look like the text field only accepts text only. I'm looking to find a replacement editor for some of the big enterprise ESPs (ExactTarget/Salesforce Marketing Cloud and Silverpop) which have completely shit editors that breaks everything. Thanks a lot! Looking into breaking apart your script to allow custom templates to be loaded.
sancoLgates
May 11, 2015
excellent works, i think all i need to do just change "export.php" from download to save the template in html Thanks,
Zan Marolt
May 13, 2015
Hey, have you managed to break it apart, I would also like to build in a custom template?
Henrique Schreiner
May 18, 2015
Great tutorial!
Dany
June 4, 2015
Hi there and thanks for this great tutorial. I have one issue: I can't seem to export the html (or download the template). It gives me an empty textarea. I even tried to copy the source code from your demo (including the .js). It gives me the same result. Where am I going wrong???? thanks in advance!
Popa Robert
June 4, 2015
Hello Dany,
You need to put the files on an Apache server in order for the export and the download to work. The download uses PHP to manipulate a file and push it in the browser, because javascript is a client side programing language and not a server side programing language, can't manipulate files on it's own. As for the export, on line 254 in newsletter-builder.js there is url: "_css/newsletter.css" if you don't run your files inside a PHP server the script won't know the location of newsletter.css I hope this answers your question.
Dany
June 7, 2015
Hi Popa Rober, Thanks for the suggestion. Now it works. I tried before on a localhost and/but that didn't work.... Best Regards, Dany
Popa Robert
June 7, 2015
Great, I'm glad it works :)
Arif
July 27, 2015
Hi Popa Robert, The exported html is not responsive. What do you suggest for responsiveness ? Should i use any framework like bootstrap or foundation for responsiveness ? Regards, Arif
Popa Robert
July 27, 2015
Hello Arif, If you want the template to be responsive you need to use html tables.
John
August 14, 2015
Hi, first of all this script is fantastic. I was looking at some features that I need and I'm wondering if it's possible to get the following: I'm trying to get any images to have the ability to edit the image src url, url link and alt text. ( via the pop up editor) I've been trying for ages but I'm no good at JS / jQuery Please help!
Mihai Smarandache
August 16, 2015
Can you update this script to create the template using a table layout?! I just tried to implement this in my site and it does not work with common email clients like Gmail and Outlook! The DIV layout breaks and CSS floats are ignored making the template look like a garbled mess.
mohamed
November 6, 2015
Hi in your opinion How i can add a butto to uplod a html email and then break it into models
Sirajul Islam
December 10, 2015
Hi Popa Robert, Thank you very much for nice work. But when I download the page, it shows only few content. At 1st I was try from my site. Then try from your site but result is same. See the below screenshot link. http://prntscr.com/9ci93i Thanks.
Sirajul Islam
December 18, 2015
Sorry for last comments. I found the problem. It was firefox browser problem. When i download chrome then it works good. I have another question. I have link with image. When i click edit image. The image not change because it has code before . How to change image with image link. Thanks.
Mark van Lit
December 23, 2015
This is a seriously user friendly and very well build email creator. Thanks a million! Youre the man. Keep up the good work!
Franco
January 13, 2016
Hello thank's for your job. I'm trying to enter have TinyMCE formatting options textarea. The more intuitive would be in-line mode: https://www.tinymce.com/docs/demo/inline/ But it is in conflict with the area draggable. To bring up the option bar formatting, you have to click with the right mouse button ... but you can not apply the options. How would you suggest the solution? (ps I can gladly pay for this support). Thank you in advance Franco
benjion
February 10, 2016
c'est une petite tuerie ! dommage que ce ne soit pas responsive :D
Blair2004
April 14, 2016
I just merged this project to my pos web application. Nexopos. Now I wonder if it's possible to add more items to header, body and footer section. http://demo-nexopos.tendoo.org/index.php/dashboard/nexo_master/email_builder/edit/1
Bob
May 27, 2016
How would loading a previously made template work with this. Eg instead of starting again, you just select the html file you had previously and it loaded that as the working template.
Leon Atkinson
July 17, 2016
Hi is it possible to change text direction to rtl some how? Thanks
Juan
August 19, 2016
man you are a genius, your article it's excellent, but i have a question, if i want add a button to edit the background of the section, how i do? because i try copy one function and don't run, thank you and i need your help, please..
Juan
August 19, 2016
man you are a genius, your article it's excellent, but i have a question, if i want add a button to edit the background of the section, how i do? because i try copy one function and don't run, thank you and i need your help, please
Juan
August 19, 2016
man you are a genius, your article it's excellent, but i have a question, if i want add a button to edit the background of the section, how i do? because i try copy one function and don't run, thank you and i need your help, please
Antonis
November 2, 2016
Hello and thank you for the great tutorial! Could you recommend a media manager for uploading images rather than having to insert the url? Or some thoughts on how it could be done?
Albert
December 27, 2016
Hello, decent work! My question is, can I use your builder in the commercial project. But to build the html template. Of course, I will refer to you in my work.
vinod
January 7, 2017
Really Very Nice. Its very helpful. Thank u keep it up...:)
Alistair
March 22, 2017
That's a really useful tutorial and demo. Is the article truncated? When I read it, the last line is... "We will embed the newsletter.css inside this document surrounded by" and nothing else...
Would you like to share your thoughts?
Name:*
Email:*
Website:
Message:*
Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
Hot Posts
1,271,873
23 comments
13,947
0 comments
114,637
0 comments