Sunday Skill Booster: Fancy Email Templates

:tada::mega: Hey there, you awesome people! You asked, and we listened! Whoop Whoop :grin:

This Sunday’s Skill Booster is all about crafting snazzy :love_letter: email templates for Blocs :art:. Perfect for those ‘Advanced beginners’ and beyond! But hey, Novices, don’t worry :wink:! Just follow the steps closely, and you’ll be on your way too! :rocket:

Could we be lucky enough to see this feature in the next Blocs beta, @Norm? :grin::crossed_fingers::pray: You’ve proven you can do it in 5 days :stopwatch::calendar::star_struck:

Enough chit-chat, let’s dive into the fun stuff! :dart: Allez on y va:

When receiving an email we don’t want to see this anymore😠:

But instead, we want this :rainbow: :star_struck::

1. Let’s start with creating a form in Blocs. Make sure you will be using the new fancy SMTP mailer for this. (5.1 Beta only for now!)
You might want to write down the form name in case you have multiple forms on your website! In this example, the form is called: form_1.

Important: Make sure each input element has its name set as a custom attribute:

2. When ready, export the website and navigate to its location. Inside the folder, there’s another folder called: includes. This folder contains your form. Open the form with Apple’s text editor or use a code editor.

3. You will find something like below just above the “Server Credentials”
Write down the field names you have created (name, date, time etc) we will need this when creating the email template.

4. Now we’re going to create the email template. I’ve used for this template the open-source email template builder Mosaico as it features a handy drag-and-drop builder. However, using Bootstrap Email would make more sense but requires an understanding of the Bootstrap framework.

https://bootstrapemail.com

5. Create your fancy email template. Add the field names in between double braces {{name}} where you want to populate them.

Test your template and when done download it. Rename your template to: email-template.html as this is the name we will be using.

6. Add the email template you just created to the "includes’ folder:
Small Potato Ltd 2023-04-23 at 10.38.10

7. Let’s begin with the challenging part :smile::student:!
Open the form_1.php again. We’re going to modify this now so it will call the email template and populates all fields correctly.
Before the ‘if’ statement we will need to tell the form to use our template. and;
We will need to remove the original message and replace it with the name fields which it has to populate in the template.

7a. Add the following before the ‘if’ statement:

function loadTemplate($templateFile) {
		$templatePath = $_SERVER['DOCUMENT_ROOT'] . '/includes/' . $templateFile;
		return file_exists($templatePath) ? file_get_contents($templatePath) : false;
	}

7b. Replace:

$to = 'jerry@fancydomain.com';
	$email_subject = "My Restaurant Booking";
	$email_body = "You have received a new booking \n\n Name: $name \nDate: $date \nTime: $time \nMessage: $message \nOptin: $optin \n";

With:

$to = 'jerry@fancydomain.com';
	$email_subject = "My Restaurant Booking";
	$email_template = loadTemplate('email-template.html');
	if (!$email_template) {
		
	}
	
	$email_body = str_replace(
		['{{name}}', '{{date}}', '{{time}}', '{{message}}', '{{optin}}'],
		[$name, $date, $time, $message, $optin],
		$email_template
	);

8. Save your amended form_1.php file and upload it all to your server. Tip of the day: You might want to keep a copy just in case you mess up uploading later. :smiley:

If all is done correctly the outcome should be something like this:
Small Potato Ltd 2023-04-23 at 10.57.35

:tada::balloon: Woo-hoo! We’ve reached the end of this fantastic tutorial, folks! :star_struck:

We hope you had a blast :rocket: creating those fabulous :love_letter: email templates for Blocs! As ‘Advanced beginners’ and up, you’ve now got a shiny new skill in your toolbox :toolbox:. And Novices, kudos for keeping up! :clap::+1:

Feel free to share your marvellous creations with anyone.:hugs::star2:

Until the next thrilling Sunday Skill Booster Tutorial, happy designing, and keep the creativity flowing! :art::rainbow:

UPDATE:
There’s no need to set the custom attribute. My original post used the name field to pull the data. As @Norm is much smarter than I :innocent: he uses the ID field​:grin:.

7 Likes

What an awesome job Jerry!!!

Great work Jerry,

I cant wait for next weeks update too :slight_smile: - here’s hoping its about an auto responder to the email (pretty please) :slight_smile:

Ray

It’s not an auto responder but sending a copy of the form to the sender as well is pretty straightforward. just add: $mail->addCC($email); to your form.php (Assuming your id of the email form field is ‘email’)
@Norm. We really need a tickbox for this!

1 Like

@Jerry

I like the workaround option.

I have been trying to get the autoreponder to work within the PHPMailer after following varying guides, but not succeeding. I’d used FormLoom and FormSnap form Yabdab when using Rapidweaver, so if an add on that had that functionality was created, that would be awesome.

Saying that, this developing SMTP option looks very promising.

Ray

addCC with SMTP works sweetly for me.

1 Like