Learn How to Easily Customize Your Ninja Forms Email!

Are your emails boring? Lack style? Need some flair, some pizazz? Maybe just a section break or two and a little bit of organization? We can help! If your Ninja Forms email is shooting off to Jane in marketing to let her know a promising new lead has submitted, you might not need that email to look pretty. With a form packed full of user info though, some organizational structure sure would make Jane’s life easier. If it’s the lead you’re sending to, you want that email to look sharp and professional. Let’s look at the easy customization tools at your disposal for your Ninja Forms email!

Meet Summernote, Our Rich Text WYSIWYG Editor for WordPress Email

The Summernote WYSIWYG (what you see is what you get) editor is integrated into Ninja Forms to provide you with a diverse set of text editing options for every email you send. Summernote is a really neat, really customizable open-source rich text editor designed to flex into a great variety of uses.

We’ve taken the best parts for customizing email and laid them out for you in your Ninja Forms email actions. Summernote appears as the Email Message in each email action:

summernote in ninja forms email

Below we’ll break down your options and show you a few tricks you might not know you could do!

A Tour of the Editor

Let’s break down the editor before we dive into an example of actually using the features. If you’ve posted much of anything online, you’re probably familiar with a good bit of it already. Let’s section it out and introduce familiar and new alike!

1. This gives you a handy dandy dropdown to auto-add different HTML like paragraph text, block quotes, and headers. Just highlight a segment of text and select the option of your choice. Easily create headings and subheadings for different section of the email here.

2. These are your standard rich text editor options: bold, italic, underline, numbered lists, bullet point lists, and left/center/right alignment.

3. Want to link out from your email to other places on the web? Insert hyperlinks (and delete them) here!

4. Want to insert a table into the email but don’t know the HTML or don’t want to spend the time writing it? Just click this little icon and choose how many rows and columns you need 🙂

5. Undo/redo

6. Add images, video, gifs etc from your Media Library directly into the email message.

7. This is our own Merge Tag Selector. Merge tags allow you to map field data directly from the form into the email. For example, the merge tag {field:firstname} will replace itself with whatever text the user entered into the First Name field of your form. Merge tags are split into 4 categories:

  • Fields. Use this option to show a merge tag for every individual field on your form.
  • WordPress. Merge tags for system data like Post ID, URL, Author, User ID, and others.
  • Form. Form-wide merge tags to either include all fields, only fields with submitted data, and submisison sequence number.
  • Other. Like it says, other 🙂

8. HTML editor. Use this to directly format with HTML and inline CSS (to the extent that Summernote supports)

Now that we’ve covered what’s there, let’s put together an example!

Customizing Ninja Forms Email

We’ll use the Event Registration template that comes default with Ninja Forms as brief example:

It’s set up in three sections:

  • event intro
  • guest info
  • guest preferences

Let’s format the email so that it’s organized in a similar fashion. Users don’t need to see the event intro repeated in a confirmation email, so we can change that text to something unique. We can then present the rest of the info in sections with a line break, just like the form.

Making a Header

It’s simple as pie. As you can see below, creating a header and styling some text below it is just a few clicks in the making.

Including Field Data in the Form

The merge tag feature (icon #7 in the picture above) scans your form and presents you with available fields to add. Let’s add the fields that have user info in them for them to review. Just click the merge tag icon and select the fields from the list one by one!

Now we have our fields in place in the email message. Now let’s add section breaks.

Adding a Section Break

Icon #8 in our reference picture opens up a text editor that we can write HTML into directly. We’ll place the HTML rule for a line break beneath our header message, and in between our guest info and our guest preferences. Like so:

And now we have section breaks!

What Do You Want to Do?

The sky is the limit with the Summernote rich text editor for styling your Ninja Forms email. The above example is a simple case to demonstrate what’s available. Many of you will want more, and the capability is there. Now that you know the basics, hopefully styling will be painless and friendly for you. If not, what are you trying to do? Let us know your pain points and we’ll see what we can do to improve on this in the future!