Flash Contact Form with Checkboxes

February 12, 2010

Get the Source Code

During a recent microsite project I was tasked with creating a contact form in Flash – which is simple enough as there are plenty out there, unless you want to include elements such as checkboxes that is.
In this tutorial I will show you how to use the Flash checkbox components in conjunction with a little ASP script that does just what we are looking for.

Step 1: The Flash Form

First we need to create the flash form, you can either download the FLA file provided or create your own similar to the following, remember to set your text-areas as ‘input text’ if you do the latter.

Flash Contact Form With Checkboxes

Step 2: The Actionscript

In your timeline create 2 keyframes. The first keyframe will contain the contact form along with the code for generating the e-mail. The second keyframe will have the confirmation / thank you text.

Keyframe 1:

stop();

//Sets ‘txtName’ as the default text box. Specifies the elements tab-order
selection.setFocus(“txtName”);
txtName.tabIndex = 0;
txtCompany.tabIndex = 1;
txtEmail.tabIndex = 2;
ckone.tabIndex = 3;
cktwo.tabIndex = 4;
ckthree.tabIndex = 5;
btnSubmit.tabIndex = 6;
btnComment.tabIndex = 7;

var myCheckboxListener:Object = new Object();

// When the element ‘btnSubmit’ is pressed, execute the code
btnSubmit.onRelease = function (){

   // Declares the variables
    var msgRec = new LoadVars();
    var formContact = new LoadVars();
    formContact.varName = txtName.text;
    formContact.varCompany = txtCompany.text;
    formContact.varEmail = txtEmail.text;

    if (ckone.selected)
        {formContact.varone = “Option 1 - Checked”;}
    else
         {formContact.varone = “Option 1- Unchecked”;}

    if (cktwo.selected)
         {formContact.vartwo = “Option 2 - Checked”;}
    else
         {formContact.vartwo = “Option 2 - Unchecked”;}

    if (ckthree.selected)
         {formContact.varthree = “Option 3 - Checked”;}
    else
         {formContact.varthree = “Option 3 - Unchecked”;}

    formContact.varComment = txtComment.text;

   // Passes info to ‘contact-form.asp’
    formContact.sendAndLoad(“contact-form.asp”, msgRec, “POST”);

   // Jumps to the confirmation keyframe
    gotoAndStop(2);
}

Step 3: The ASP

The ASP script is what we will use to generate and send an e-mail comprised of the variables passed across from Flash.

<%

  ’If the Name field is not empty then process the form.
  ’ You can customise your own validation here.
  if request(“varName”) <> “” then

    ’Creates the e-mail
    BodyText = BodyText&“Completed contact form:”&vbcrlf&vbcrlf
    BodyText = BodyText&“Name: “&vbcrlf &request(“varName”)&vbcrlf&vbcrlf
    BodyText = BodyText&“Company: “
        &vbcrlf&request(“varCompany”)&vbcrlf&vbcrlf
    BodyText = BodyText&“Interested In:”
        &vbcrlf&request(“varone”)&vbcrlf&vbcrlf
        &vbcrlf&request(“vartwo”)&vbcrlf&vbcrlf
        &vbcrlf&request(“varthree”)&vbcrlf&vbcrlf
    BodyText = BodyText&“Comments / Questions:”
        &vbcrlf&request(”varComment”)&vbcrlf

    ’Declare the email settings and sends the message
    Dim MyMail
    Set MyMail = Server.CreateObject(“CDONTS.NewMail”)
    MyMail.From = “from@example.com”
    MyMail.To = “to@example.com”
    MyMail.Subject = “Contact Form Response”
    MyMail.Body = BodyText
    MyMail.Send
    Set MyMail = Nothing

  end if
%>

Note: If you are copying & pasting avoid having whitespace in your ASP code - if you are using the source files you dont need to worry about it :o).

Get the Source Code

For the source code download the FLA

The attached zip archive contains FLA, SWF, ASP and HTML files.

7 Responses

  1. February 12, 2010 at 10:56

    As always, any comments, queries or requests - just let me know!

  2. Erich
    February 17, 2010 at 16:51

    Are the source code files correct?

  3. February 22, 2010 at 11:22

    @Erich - apologies I attached the wrong hyperlink. It has been updated now

  4. Anonymous
    March 1, 2010 at 13:36

    Thanks for sharing. I have been searching for this for a long time.

Leave A Comment

Your Opinion...

Feedback, thoughts and comments are welcome and appreciated :o).

Keep it snappy though, you have 100 words to use!





HomeJournal
Follow Me Site Map  |  Contact  |  Journal  |  Twitter