Page last modified 11:32, 10 Oct 2011 by MentalNomad

MindTouch Community Portal > MindTouch Community Portal > Knowledge Base > Make an Email Form

Page Notifications Off

1 of 1 found this page helpful

Make an Email Form

1. Introduction
2. History
3. Requirements
4. How do I install it?
1. 4.1. Preparing your system
2. 4.2. Installing the PHP
3. 4.3. Installing the Template
5. A quick note about the examples on this page
6. How do I use it?
7. Arguments
8. Examples
9. Reference(s)
10. Credits/Special Thanks
11. Template/Extension Source Code
1. 11.1. Template:ContactForm Source Code
2. 11.2. sendmail.php Source Code
12. Disclaimers

Table of Contents

1. Introduction
2. History
3. Requirements
4. How do I install it?
1. 4.1. Preparing your system
2. 4.2. Installing the PHP
3. 4.3. Installing the Template
5. A quick note about the examples on this page
6. How do I use it?
7. Arguments
8. Examples
9. Reference(s)
10. Credits/Special Thanks
11. Template/Extension Source Code
1. 11.1. Template:ContactForm Source Code
2. 11.2. sendmail.php Source Code
12. Disclaimers

This Page was viewed: 5795 Times

Introduction

In this example I will show you how to send emails from MindTouch (yes even core) utilizing a combination of DekiScript, jQuery, and PHP. Although this example will be a simple contact form you will easily be able to change it to serve other needs as well. I have only setup and tested this on an Ubuntu system but, hopefully this tutorial should lay the foundation for any operating system capable of PHP. Well Lets get started.

All discussion should be directed to this forum thread.

History

Version	Date	Author	Description
1.0	10/25/2009	rberinger	Initial Release

Requirements

This template requires MindTouch version: Lyons or greater.
jQuery extension must be installed.
PHP-Mail package (On Ubuntu run: apt-get install php-mail).

How do I install it?

Preparing your system

NOTE: The below instructions are for Ubuntu but may work on other systems as well.

Open the terminal to your linux operating system.
Type sudo apt-get update then hit the [ENTER] key.
Type sudo apt-get install php-mail then hit the [ENTER] key.
Done.

Installing the PHP

Create a folder somewhere in your Apache RE-WRITE RULES.
1. I created mine in /var/www/dekiwiki/deki/sendemail
Copy the attached php file (rename from .txt to .php) into the folder you created.
Update your smtp information as well as your to address information.
Allow the file to be executable (chmod +x sendmail.php)
Done.

Installing the Template

Copy the validyes.png and validno.png icons attached to this page. And save in an accessible area on your wiki.
Create a template, call it "Template:ContactForm" (or rename as you desire). You must have UNSAFECONTENT permission for this to work.
Create a "DekiScript" block on the template page (use the "Style" menu in the editor")
Copy the code from the end of this page and paste it into the DekiScript block. To copy, click "expand source", then mouse over the top right corner of the source code, and click the "view source" button. This will pop up a window with the source code. Select all, then copy to clipboard.
Make sure there isn't an extra blank paragraph after the DekiScript block! Do this every time you edit!!!
Change this line to match the path and name of where you saved the PHP file.
1. $.post(theSiteURI + '/deki/sendemail/sendmail.php',{sendername:fromwho, senderemail:fromemail, subj:theSubject, message:theMessage});
Change the icon location lines to match where you save the icon files.
1. var validyes = 'http://deki.YouSite.com/@api/deki/files/582/=validyes.png';
2. var validno = 'http://deki.YourSite.com/@api/deki/files/581/=validno.png';
Save.

A quick note about the examples on this page

For all the examples on this page, the code is shown before the working example. The code is shown with the syntax extension, and looks like this:

ContactForm()

This means that the actual code on the page should be enclosed in a DekiScript block. If you want to copy the code from this page, then use the same procedure as described in steps 2-4 above.

How do I use it?

Just make a call to the template on the page you wish to create a contact form.

{{ ContactForm(); }}

Arguments

Name	Type	Default	Description
None.

Examples

Below is a snapshot of what the form looks like. It has been done using id's, containers, and classes so customizing the look should be easy enough.

Reference(s)

All discussion should be directed to this fourm thread.

Credits/Special Thanks

Special thanks to the MindTouch crew not only for creating this great product and releasing it as open source but also giving us a place to share our results.

Template/Extension Source Code

Template:ContactForm Source Code

// Validation Icons
var validyes = 'http://deki.YouSite.com/@api/deki/files/582/=validyes.png';
var validno = 'http://deki.YourSite.com/@api/deki/files/581/=validno.png';

// Site non-Specific
var mySiteURI = site.uri;

<div id="emailcontainer">
<form id="emailform">
    <table width="500px">
        <tr>
            <td class="label reqtext">
                <label>'Your Name:'</label>
            </td>
            <td class="txtbox">
                <div><input type="textbox" id="sendername" /><span class="validation" id="sendernamevalid"></span></div>
            </td>
        </tr>
        <tr>
            <td  class="label reqtext">
                <label>'Your Email:'</label>
            </td>
            <td class="txtbox">
                <div><input type="textbox" id="senderemail" /><span class="validation" id="senderemailvalid"></span></div>
            </td>
        </tr>
        <tr>
            <td  class="label reqtext">
                <label>'Subject:'</label>
            </td>
            <td class="txtbox">
                <div><input type="textbox" id="emailsubj" /><span class="validation" id="emailsubjvalid"></span></div>
            </td>
        </tr>
        <tr>
            <td  class="label reqtext">
                <label>'Message:'</label>
            </td>
            <td class="txtbox">
                <div><textarea id="emailmessage" rows="10" cols="50" /><span class="validation" id="emailmessagevalid"></span></div>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center; ">
                <input type="button" value="Submit" ctor="when($this.click) { SendNotice(); }" />
            </td>
        </tr>
    </table>
</form>
</div>

<html><head>

    <script type="text/javascript">"
       
var SendNotice = function() {
                    if(!ValidateText('#sendername', '#sendernamevalid')) {
		        return false;
		    } else {
                        var fromwho = $('#sendername').val();
                    }

                    if(!ValidateEmail('#senderemail', '#senderemailvalid')) {
		        return false;
		    } else {
                        var fromemail = $('#senderemail').val();
                    }

                    if(!ValidateText('#emailsubj', '#emailsubjvalid')) {
		        return false;
		    } else {
                        var theSubject = $('#emailsubj').val();
                    }

                    if(!ValidateText('#emailmessage', '#emailmessagevalid')) {
		        return false;

		    } else {
                        var theMessage = $('#emailmessage').val();
                    }

                    var theSiteURI = "..json.emit(mySiteURI)..";
                    $.post(theSiteURI + '/deki/sendemail/sendmail.php',{sendername:fromwho, senderemail:fromemail, subj:theSubject, message:theMessage});
                    alert('Thank you for Contacting us!');
                    return true;
                }

var ValidateEmail = function isValidEmailAddress(fieldid, checkid) {

                    //  Not the best email validation pattern but works for the most part.
                     var pattern = new RegExp(/^([a-zA-Z0-9_.\-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/);

                     var emailAddress = $(fieldid).val();
    
                     if(pattern.test(emailAddress) != 0) {
                        $(checkid).css({ 'background-image':'url("..json.emit(validyes)..")' });
                     } else {
                        $(checkid).css({ 'background-image':'url("..json.emit(validno)..")' });
                     }

                     return pattern.test(emailAddress);
                 }

var ValidateText = function(fieldid, checkid) {
	// Here we are just checking that there is some text 
	// but you could change to whatever is needed

            var thetext = $(fieldid).val();
    
            if(thetext != 0) {
                $(checkid).css({ 'background-image':'url("..json.emit(validyes)..")' });
                return true;
            } else {
                $(checkid).css({ 'background-image':'url("..json.emit(validno)..")' });
                return false;
            }

	}
        
    "</script>

    <style type="text/css">"

        div td.reqtext { color:red; }
        div td.label { font-weight:bold; text-align:right; }

        div span.validation {
                margin-top: 4px;
                margin-left: 9px;
                position: absolute;
                width: 16px;
                height: 16px;
            }
        
    "</style>


</head></html>

sendmail.php Source Code

This form is setup to send an email to a particular address. If you need other addresses I would create a copy of the file make your changes and then update the SendNotice function in the template. This will make it harder for spammers to gather the email address.

If you want to send an email to various people then switch the logic between the $from and $to lines in the php file.

<?php
require_once "Mail.php";

$from = $_POST['sendername'] . " <" . $_POST['senderemail'] . ">";
$to = "Your Name <YourEmail@YourDomain.com>";
$subject = $_POST['subj'];
$body = $_POST['message'];

$host = "smtp.YourDomain.com";
$username = "";
$password = "";

$headers = array ('From' => $from,
  'To' => $to,
  'Subject' => $subject);
$smtp = Mail::factory('smtp',
  array ('host' => $host,
    'auth' => false,
    'username' => $username,
    'password' => $password));

$mail = $smtp->send($to, $headers, $body);

if (PEAR::isError($mail)) {
  echo("<p>" . $mail->getMessage() . "</p>");
 } else {
  echo("<p>Message successfully sent!</p>");
 }
?>

Disclaimers

Although this works great on my setup your mileage may vary.

Was this page helpful?: Yes No
Tag page
What links here

Files 4

Attach file or image

File	Version	Size	Modified
ContactForm.png v3v3 10.72 kB 23:41, 25 Oct 2010
sendmail.txt v3v3 695 bytes 23:58, 25 Oct 2010
validno.png v3v3 796 bytes 23:59, 25 Oct 2010
validyes.png v3v3 840 bytes 23:59, 25 Oct 2010

Images 3
ContactForm.png	validno.png	validyes.png

You must login to post a comment.

MindTouch Social Knowledge Base

Make an Email Form

Table of contents

Introduction

History

Requirements

How do I install it?

Preparing your system

Installing the PHP

Installing the Template

A quick note about the examples on this page

How do I use it?

Arguments

Examples

Reference(s)

Credits/Special Thanks

Template/Extension Source Code

Template:ContactForm Source Code

sendmail.php Source Code

Disclaimers

Files 4

Table of contents

Login or Join Community

Make an Email Form

Table of contents

Introduction

History

Requirements

How do I install it?

Preparing your system

Installing the PHP

Installing the Template

A quick note about the examples on this page

How do I use it?

Arguments

Examples

Reference(s)

Credits/Special Thanks

Template/Extension Source Code

Template:ContactForm Source Code

sendmail.php Source Code

Disclaimers

Files 4

Table of contents