Jump to content
Stef's Coding Community
Sign in to follow this  
dgow13

eCard on clients website

Recommended Posts

I have a client who I designed a website for. They have ecards that they designed and now want to sell them on their site. They want the visitor to be able to type a few line on an area of the ecard and then email it to the recipient. Can someone point me in the right direction?

Share this post


Link to post
Share on other sites

This concept fall in the line of business like printing sites such as business cards, t-shirts, etc. A fully automated program will not come cheap and coding it yourself will require a chunk of time.

 

I could ask my programmer what it would require in time and cost to accomplish this.

 

If cost is an issue and you don't have a whole lot of time then you can use a simple method where the eCard is set as a background and the input field is layed on top of that. Your client would then receive the submission from the customer that has the text they wish to include on the eCard...apply it to the cards and send to customer.

Share this post


Link to post
Share on other sites

This concept fall in the line of business like printing sites such as business cards, t-shirts, etc. A fully automated program will not come cheap and coding it yourself will require a chunk of time.

 

I could ask my programmer what it would require in time and cost to accomplish this.

 

If cost is an issue and you don't have a whole lot of time then you can use a simple method where the eCard is set as a background and the input field is layed on top of that. Your client would then receive the submission from the customer that has the text they wish to include on the eCard...apply it to the cards and send to customer.

 

I Googled this last night for about 2 hrs and looked at different samples. Most of the ecards I saw had the card separate from the text. The text was included in the email at the bottom of the ecard. To me this is just fine. I'm still not sure how to do that.

Share this post


Link to post
Share on other sites

I Googled this last night for about 2 hrs and looked at different samples. Most of the ecards I saw had the card separate from the text. The text was included in the email at the bottom of the ecard. To me this is just fine. I'm still not sure how to do that.

 

I would hope that it wouldn't be that hard then... You'd just need to create a system where a user would select the card image that they like and enter some text that would appear along with it. At the end of that process, you'd use PHP to create a HTML email. The top part of the email would be the image, the bottom part would include the text.

 

A couple links:

http://articles.sitepoint.com/article/code-html-email-newsletters

http://www.mailchimp.com/resources/html_email_templates/

http://php.net/manual/en/function.mail.php (take a look at example #4)

 

The only thing I'm concerned about is the use of the PHP mail() function. I would be worried that if you start using that function too much, the web host might wonder if you are sending out spam. I'm not sure what the alternatives are on that, and I could be completely wrong on this, but it's worth doing some research.

Share this post


Link to post
Share on other sites

I would hope that it wouldn't be that hard then... You'd just need to create a system where a user would select the card image that they like and enter some text that would appear along with it. At the end of that process, you'd use PHP to create a HTML email. The top part of the email would be the image, the bottom part would include the text.

 

A couple links:

http://articles.sitepoint.com/article/code-html-email-newsletters

http://www.mailchimp.com/resources/html_email_templates/

http://php.net/manual/en/function.mail.php (take a look at example #4)

 

The only thing I'm concerned about is the use of the PHP mail() function. I would be worried that if you start using that function too much, the web host might wonder if you are sending out spam. I'm not sure what the alternatives are on that, and I could be completely wrong on this, but it's worth doing some research.

 

Thanks for the articles. Not really what I'm looking for. Your idea at the top of your response is more inline with what I want to accomplish. What about using a CMS?

Share this post


Link to post
Share on other sites

Thanks for the articles. Not really what I'm looking for. Your idea at the top of your response is more inline with what I want to accomplish. What about using a CMS?

 

I provided the links because they explain how to do the coding/sending of the HTML emails, which you'll need if you want to send out ecards with stylized text and graphics. Coding HTML emails can be a bit tricky since you have to go back to the "old" style of web design for the sake of compatibility with as many email clients as possible, which means using tables (no floats), inline styles, etc.

 

You can look around for a CMS that might do this... I don't know of any off the top of my head. There may be plugins for Drupal of another larger CMS that might give you the ability, but you may end up having to hand code it.

Share this post


Link to post
Share on other sites

I provided the links because they explain how to do the coding/sending of the HTML emails, which you'll need if you want to send out ecards with stylized text and graphics. Coding HTML emails can be a bit tricky since you have to go back to the "old" style of web design for the sake of compatibility with as many email clients as possible, which means using tables (no floats), inline styles, etc.

 

You can look around for a CMS that might do this... I don't know of any off the top of my head. There may be plugins for Drupal of another larger CMS that might give you the ability, but you may end up having to hand code it.

 

I'm just not good with coding. I know a little php. I used the video tutorials on php to design a contact form to email for myself and my clients. Works great but, that's about it. I just started learning css to use on the websites I design... don't laugh, I'm slow but, willing to learn as much as I can.

Share this post


Link to post
Share on other sites

I'm just not good with coding. I know a little php. I used the video tutorials on php to design a contact form to email for myself and my clients. Works great but, that's about it. I just started learning css to use on the websites I design... don't laugh, I'm slow but, willing to learn as much as I can.

 

You have a couple options:

-- try to find a pre-existing solution

-- code it yourself, learning as you go

-- find another developer who takes care of the coding, and you pass any costs along to the client

-- or tell your client that the specific functionality they are asking for isn't something you can do unfortunately

Share this post


Link to post
Share on other sites

You have a couple options:

-- try to find a pre-existing solution

-- code it yourself, learning as you go

-- find another developer who takes care of the coding, and you pass any costs along to the client

-- or tell your client that the specific functionality they are asking for isn't something you can do unfortunately

 

The code for emailing the message is working just fine. I need to find a way to include the image or graphic a long with the message. I have tried finding the code for it but, without any luck. Any other suggestions?

Share this post


Link to post
Share on other sites

You'll need to send the email as an HTML email (instead of plain text)

 

http://php.net/manual/en/function.mail.php (take a look at example #4)

 

To include an image, it's the same as a regular HTML image (<img src="" alt="" />). Just make sure you use a absolute URL to the image (http://www.yoursite.com/path/to/image.jpg).

Share this post


Link to post
Share on other sites

Example #4 doesn't make sense. Here is the code from both pages.

 

The e-card page:

 

 

<div class="ecard_form" style="left: 500px; top: 350px">

<form method="post" action="ecard_thankyou.php" id="ecard_form">

<span class="text_smOlive">To:<br />

</span>

<input name="toName" style="width: 250px" type="text" class="text_smOlive" class="required" />

<span class="text_smOlive"><br />

<br />

Recipients Email:<br />

</span>

<input name="toEmail" style="width: 250px" type="text" class="text_smOlive" class="required email" />

<span class="text_smOlive"><br />

<br />

From:<br />

</span>

<input name="fromName" style="width: 250px" type="text" class="text_smOlive" class="required" />

<span class="text_smOlive"><br />

<br />

Sender's Email<br />

</span>

<input name="fromEmail" style="width: 250px" type="text" class="text_smOlive" class="required email" />

<span class="text_smOlive"><br />

<br />

Occasion: <br />

<select name="occation" style="width: 255px" class="required">

<option></option>

<option>Happy Birthday</option>

<option>Happy Anniversary</option>

<option>Just Missing You</option>

<option>Happy Mother's Day</option>

<option>Happy Father's Day</option>

<option>Congratulations</option>

</select><br />

<br />

Your Message:<br />

</span>

<textarea name="message" rows="2" style="width: 250px" class="text_smOlive"></textarea><span class="text_smOlive"><br />

</span>

<br />

<br />

<input name="Submit" style="width: 100px; height: 20px" type="submit" value="Send Email" class="text_smOlive" /><br />

<br />

</form>

</div>

 

The thank you page:

 

 

<?php

//php form data to email code//

 

$toName = $_REQUEST['toName'];

$toEmail = $_REQUEST['toEmail'];

$fromName = $_REQUEST['fromName'];

$fromEmail = $_REQUEST['fromEmail'];

$occation = $_REQUEST['occation'];

$message = $_REQUEST['message'];

$headers = "From: $fromEmail";

 

$email_message = "To: {$toName}\n\rEmail: {$toEmail}\n\rFrom: {$fromName}\n\rSenders Email: {$fromEmail}\n\rOccation: {$occation}\n\rMessage: {$message}";

mail('$toEmail,$occation,$email_message,$headers);

 

?>

Share this post


Link to post
Share on other sites

Here's the example:

 

<?php
// multiple recipients
$to  = 'aidan@example.com' . ', '; // note the comma
$to .= 'wez@example.com';

// subject
$subject = 'Birthday Reminders for August';

// message
$message = '
<html>
<head>
 <title>Birthday Reminders for August</title>
</head>
<body>
 <p>Here are the birthdays upcoming in August!</p>
 <table>
   <tr>
     <th>Person</th><th>Day</th><th>Month</th><th>Year</th>
   </tr>
   <tr>
     <td>Joe</td><td>3rd</td><td>August</td><td>1970</td>
   </tr>
   <tr>
     <td>Sally</td><td>17th</td><td>August</td><td>1973</td>
   </tr>
 </table>
</body>
</html>
';

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers
$headers .= 'To: Mary <mary@example.com>, Kelly <kelly@example.com>' . "\r\n";
$headers .= 'From: Birthday Reminder <birthday@example.com>' . "\r\n";
$headers .= 'Cc: birthdayarchive@example.com' . "\r\n";
$headers .= 'Bcc: birthdaycheck@example.com' . "\r\n";

// Mail it
mail($to, $subject, $message, $headers);
?>

 

In this example you'll notice that there are two main differences: first of all, they created a variable, $message, that includes HTML tags. You'd place your images within that string, within the <body></body> tags like you would a normal HTML page. Secondly, they included two headers within a $headers variable that indicates that the message is HTML rather than plain text.

 

In order to insert images into your email message, you'll need to modify the code that processes your form. Your $email_message variable will need to change to add HTML code and add the image, and your $header variable will need to include the MIME version and content type like the above example shows.

Share this post


Link to post
Share on other sites

that reminds me about mailchimp email templates:

http://www.mailchimp.com/resources/html_email_templates/

then again why not to use mailchimp for the ecards?

Also, could be an idea to use Flash based website(if you'll find it attractive for the commercial use):the scrapblog.Using Flash has it own advantages ( like choice of fonts for the ecard and so on).

In general, look for shopping cart solution with an ecard as an option.

Share this post


Link to post
Share on other sites

that reminds me about mailchimp email templates:

http://www.mailchimp.com/resources/html_email_templates/

then again why not to use mailchimp for the ecards?

Also, could be an idea to use Flash based website(if you'll find it attractive for the commercial use):the scrapblog.Using Flash has it own advantages ( like choice of fonts for the ecard and so on).

In general, look for shopping cart solution with an ecard as an option.

 

Here is the page I am working on... click here >. The Mailchimp program is not close to what I need.

Share this post


Link to post
Share on other sites

Here's the example:

 

<?php
// multiple recipients
$to  = 'aidan@example.com' . ', '; // note the comma
$to .= 'wez@example.com';

// subject
$subject = 'Birthday Reminders for August';

// message
$message = '
<html>
<head>
 <title>Birthday Reminders for August</title>
</head>
<body>
 <p>Here are the birthdays upcoming in August!</p>
 <table>
   <tr>
     <th>Person</th><th>Day</th><th>Month</th><th>Year</th>
   </tr>
   <tr>
     <td>Joe</td><td>3rd</td><td>August</td><td>1970</td>
   </tr>
   <tr>
     <td>Sally</td><td>17th</td><td>August</td><td>1973</td>
   </tr>
 </table>
</body>
</html>
';

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers
$headers .= 'To: Mary <mary@example.com>, Kelly <kelly@example.com>' . "\r\n";
$headers .= 'From: Birthday Reminder <birthday@example.com>' . "\r\n";
$headers .= 'Cc: birthdayarchive@example.com' . "\r\n";
$headers .= 'Bcc: birthdaycheck@example.com' . "\r\n";

// Mail it
mail($to, $subject, $message, $headers);
?>

 

In this example you'll notice that there are two main differences: first of all, they created a variable, $message, that includes HTML tags. You'd place your images within that string, within the <body></body> tags like you would a normal HTML page. Secondly, they included two headers within a $headers variable that indicates that the message is HTML rather than plain text.

 

In order to insert images into your email message, you'll need to modify the code that processes your form. Your $email_message variable will need to change to add HTML code and add the image, and your $header variable will need to include the MIME version and content type like the above example shows.

 

Here is the page I am working on... Click here>.

Share this post


Link to post
Share on other sites

So... is this working? (as far as I can tell, it is) Is there something that you need help with, or are you just posting the link to demonstrate the final result?

 

No, it is not working. Everything sends except the image. Can't figure out the code and where everything goes.

Share this post


Link to post
Share on other sites

So what is the current PHP code you are working with? Providing the link shows me how the final rendered HTML looks, but PHP is processed on the server and I can't see it.

 

Ecard page:

<div class="ecard_form" style="left: 500px; top: 350px">
			<form method="post" action="ecard_thankyou.php" id="ecard_form">
				<span class="text_smOlive">To:<br />
				</span>
				<input name="toName" style="width: 250px" type="text" class="text_smOlive" class="required" />
				<span class="text_smOlive"><br />
				<br />
				Recipients Email:<br />
				</span>
				<input name="toEmail" style="width: 250px" type="text" class="text_smOlive" class="required email" />
				<span class="text_smOlive"><br />
				<br />
				From:<br />
				</span>
				<input name="fromName" style="width: 250px" type="text" class="text_smOlive" class="required" />
				<span class="text_smOlive"><br />
				<br />
				Sender's Email<br />
				</span>
				<input name="fromEmail" style="width: 250px" type="text" class="text_smOlive" class="required email" />
				<span class="text_smOlive"><br />
				<br />
				Occasion: <br />
				<select name="occasion" style="width: 255px" class="required" >
				<option></option>
				<option>Happy Birthday</option>
				<option>Happy Anniversary</option>
				<option>Just Missing You</option>
				<option>Happy Mother's Day</option>
				<option>Happy Father's Day</option>
				<option>Congratulations</option>
				</select><br />
				<br />
				Your Message:<br />
				</span>
				<textarea name="message" rows="2" style="width: 250px" class="text_smOlive"></textarea><span class="text_smOlive"><br />
				</span>
				<br />
				<br />
				<input name="Submit" style="width: 100px; height: 20px" type="submit" value="Send Email" class="text_smOlive" /><br />
				<br />
			</form>
		</div>

Thank you page:

<?php
		//php form data to email code//

		$toName = $_REQUEST['toName'];
		$toEmail = $_REQUEST['toEmail'];
		$fromName = $_REQUEST['fromName'];
		$fromEmail = $_REQUEST['fromEmail'];
		$occasion = $_REQUEST['occasion'];
		$message = $_REQUEST['message'];
		$headers = "From: $fromEmail\n\rContent-type: text/html";

		$email_message = "To:   {$toName}\n\rEmail:   {$toEmail}\n\rFrom:   {$fromName}\n\rSenders Email:   {$fromEmail}\n\rOccasion:   {$occasion}\n\rYour Message:   {$message}\n\r<img src="http://www.happynewmonthstore.com/images/eCards/sept2010/hnm_ecard_sept2_img375.png" alt="ecard_image" />";
		mail($toEmail,$occasion,$email_message,$headers);

		?>		

Share this post


Link to post
Share on other sites

I figured out how to do the coding. This is how it ended up working.

 

<?php
		//php form data to email code//

		$toName = $_REQUEST['toName'];
		$toEmail = $_REQUEST['toEmail'];
		$fromName = $_REQUEST['fromName'];
		$fromEmail = $_REQUEST['fromEmail'];
		$occasion = $_REQUEST['occasion'];
		$message = $_REQUEST['message'];
		$headers = "From: $fromEmail\r\nContent-type: text/html";

		$email_message = "To:   {$toName}<br /><br />From:   {$fromName}<br />Senders Email:   {$fromEmail}<br /><br />Occasion:   {$occasion}<br /><br />{$message}<br /><br /><img src=\"http://www.happynewmonthstore.com/images/eCards/sept2010/hnm_ecard_sept2_img375.png\" alt=\"ecard_image\" />";
		mail($toEmail,$occasion,$email_message,$headers);

		?>

 

Thank for your help.

Share this post


Link to post
Share on other sites
Guest Doug89

I am creating something similar. I am creating an application for a vodka website that allows visitors to send a toast to a friend. The toast consists of the text, drink recipe and picture. Rather than sending it as an html email, the information is stored in the database using a random id. Then a text email is sent, and it contains a link back to the site to automatically retrieve the toast using the id. This is the way they elected to do it.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...