Email form in edge?

Hi there!

  This thread answered by resdesign is a little older but I believe the principle is the same and can help you make your email form! : )

http://forums.adobe.com/message/4808149#4808149#4808149

I hope this helps!

you should do some steps

1- append html input text to your symbol in edge

$("<input type='text' id='Firstname' name='first_name'  tabindex='1' maxlength='15' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("Namebox"));

$("<input type='text' id='Lastname' name='last_name'   tabindex='2' maxlength='20' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("Familybox"));

$("<input type='tel' id='Telephone' name='tel_number'  tabindex='3' maxlength='11' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("Telbox"));

$("<input type='email' id='Email' name='email_address'  tabindex='4' maxlength='35' style='background-color:white; border:1px solid black' required>").appendTo(sym..$("Emailbox"));

$("<textarea type='text' id='Detail' name='date_detail'  tabindex='5' cols='30' rows='4' maxlength='100' style='background-color:white; border:1px solid black; overflow:auto; resize:none; ' required></textarea>").appendTo(sym.$("Datebox"));

2 - Type this Code in your Send button Click Action

var emailFromVal = Email.value;

var messageVal = "<strong><p><font face='helvetica' size='5'> Name : "+Firstname.value+"<br><br> Last Name: "+Lastname.value+"<br><br> Tel : "+Telephone.value+"<br><br> Message : "+Detail.value+"</p>";

// we add this variable to make sure if anyone find out the address of our php file cant send empty message by calling php file by url

var Permission = 1;

$.post("sendEmail.php",{ flag:Permission, email:emailFromVal, message:messageVal });

3 - Make php file with name : sendEmail.php and write these codes inside of it

<?php

if ( $_POST['flag'] == 1 ){

$to = 'MailAddress@domain.com';

$subject = 'your Subject here';

$message = $_POST['message'] . "\r\n";

$headers = 'From: ' . $_POST['email'] . "\r\n" .

'MIME-Version: 1.0' . "\r\n" .

'Content-Type: text/html; charset=UTF-8' . "\r\n" .

'Reply-To: ' . $_POST['email'] . "\r\n" .

'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);

}

?>

Note : this wouldnt work offline, you should test it on your host

Zaxist

you shoud create drop down list and append it to your symbol like input method

here is how you can create Drop Down list : http://www.w3schools.com/tags/tag_select.asp

Zaxist

its easy like the others :

$("<select><option value='volvo'>Volvo</option><option value='saab'>Saab</option><option value='mercedes'>Mercedes</option><option value='audi'>Audi</option></select>").appendTo(sym.$("Your Symbol Name"));

Zaxist

Hi Zaxist,

Your form is working great, I just have two questions:

1- How to add the code so when you press the submit button, the from first gets submitted then gets reset and cleared.

2- How to add a function so when all fields are not filled, it can show a hidden object to alert the person that all fileds must be filled. ( the hidden object is a graphic)

and lastly when the form is submitted, the IP address of the sender is alo sent to your email.

Thank you very much as your help is greatly appriciated.

Cheers,

1 - add this at the end of your submit button

sym.$("#Firstname").detach();

sym.$("#Lastname").detach();

sym.$("#Telephone").detach();

sym.$("#Email").detach();

sym.$("#Detail").detach();

Permission = 0;

Note: dont forget to change elements names with yours

2- add this at the first code of your submit button:

if ((Firstname.value == "") || (Lastname.value == "") || (Telephone.value == "") || (Email.value == "") || (Detail.value == "")) {

your action for all fileds are empty would be here...

}else if ((Firstname.value == 'your place holder things here') || (Lastname.value == ' your place holder things here') || (Telephone.value == 'your place holder things here') || (Email.value == ' Mail@Domain.com') || (Detail.value == 'your place holder things here')) {

your action for all fileds are empty would be here...

}else if ( !validatePhone(Telephone.value)){

your action for telephone filed is empty would be here...

}else if ( !validateEmail(Email.value)){

your action for email filed is not currect would be here

}else {

show a nice message that form has been sent;

var emailFromVal = Email.value;

.

.

.

.

.

write these functions at the end of submit button to check email format and number of telephone number limites are correct:

function validateEmail($email) {

  var regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if( !regex.test( $email ) ) {

    return false;

  } else {

    return true;

  }

}

function validatePhone($phone) {

  var regex = /\D{1,11}/;                 

  var regexd = /\d{10,11}/;           note : 10 is minimum number of digits and 11 is maximum number of digits that user can enter

  if( (!regex.test( $phone )) && (regexd.test( $phone ) == true ) ) {

    return true;

  } else {

    return false;

  }

}

3 -  and the ip address is like thoese steps that you can fetch with jquery and make it as a message to send to you...

Zaxist

Thank you Zaxist for your quick reply!

It's working great !

Only one thing I have not been able to figure out how to fetch the IP address.

Would you mind show me the coding and where to integrate it.

I aapriciate it!

Cheers,

Hi, Im an old hand at Flash but struggling to get my head around the email form issues in Edge.

I have no idea where one would "1- append html input text to your symbol in edge"

What does it actually mean ?

The rest makes sense.

many thanks for your help

Paul

Hey one more thing, the text fileds are not functional in FireFox and IE. I can't even click on them, it's like there is no text fileds.

Is there a solution to that?

Thanks,

Hi!

I need the form to send directly to email and this code above just doesn't seem to work!?

Any help would be appreciated. What am I missing??

I have even tried the $.ajax() function and it seems to enter the function and even exe the success function but nothing else happens.

these codes works perfect without any problems..

i think you did some thing wrong in your codes..

you have to be sure that your elements names are correct with the elements names in the code and also check the php file is in the right place and you cannot check this form offline !!

Zaxist

dear ariedge13

Sorry for my late, ididnt saw your question... !!

you can fetch the IP address by using these simple codes

$.getJSON("http://jsonip.appspot.com?callback=?",

    function(data){

       alert( "Your ip: " + data.ip);

  });

you can change the alert part with a variable and save data.ip's value to it and send it to your email by import it to messageVal Value in Step 2

var messageVal = "<strong><p><font face='helvetica' size='5'> Name : "+Firstname.value+"<br><br> Last Name: "+Lastname.value+"<br><br> Tel : "+Telephone.value+"<br><br> Message : "+Detail.value+"<br><br> IP Address : "+data.ip+"</p>";

if you had Problem Let me Know

Zaxist

there shouldnt be any problem with ff and ie 9.0 and above...

i tested this form in all browsers and works fine, and the only possible way that might face you with this problem is the appendTo part, that you should be sure that you write your element name currectly..

Zaxist

thats mean you should create a div in your stage then in the code section with appendTo() function attach your codes to those divs so you can see input text filds and can change their location by moving div in your stage..

Zaxist

I created the following which worked for me.

This code goes in the stage "compositionready"

$("<input type='text' id='Email' name='Email' tabindex='1' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("emailbox"));

$("<input type='text' id='Firstname' name='first_name'  tabindex='2' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("firstnamebox"));

$("<input type='text' id='Lastname' name='last_name'  tabindex='3' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("lastnamebox"));

$("<input type='text' id='Telephone' name='tel_number'  tabindex='4' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("telephonebox"));

$("<input type='text' id='City' name='city'  tabindex='5' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("citybox"));

$("<input type='text' id='Country' name='country'  tabindex='6' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("countrybox"));

$("<textarea type='text' id='Message' name='message  tabindex='7' cols='30' rows='4' maxlength='200' style='background-color:white; border:1px solid black; overflow:auto; resize:none; ' required></textarea>").appendTo(sym.$("messagebox"));

This code goes on the buttons "click" action

var emailFromVal = Email.value;

var messageVal = "<strong><p><font face='helvetica' size='5'> Name : "+Firstname.value+"<br><br> Last Name: "+Lastname.value+"<br><br> Tel : "+Telephone.value+"<br><br>  City: "+City.value+"<br><br>  Country: "+Country.value+"<br><br>  Message : "+Message.value+"</p>";

// we add this variable to make sure if anyone find out the address of our php file cant send empty message by calling php file by url

var Permission = 1;

alert("Thank you, we will contact you shortly");

$.post("sendEmail.php",{ flag:Permission, email:emailFromVal, message:messageVal });

sym.$("#Email").detach();

sym.$("#Firstname").detach();

sym.$("#Lastname").detach();

sym.$("#Telephone").detach();

sym.$("#City").detach();

sym.$("#Country").detach();

sym.$("#Message").detach();

Permission = 0;

And finally this goes into a file you create for the server called "sendEmail.php"

<?php

if (isset($_POST['flag'])) {

printf('<pre>%s</pre>', print_r($variable, true));

$to = 'paul@avatarea.com';

$subject = 'SnS Europe';

$message = $_POST['message'] . "\r\n";

$headers = 'From: ' . $_POST['email'] . "\r\n" .

'MIME-Version: 1.0' . "\r\n" .

'Content-Type: text/html; charset=UTF-8' . "\r\n" .

'Reply-To: ' . $_POST['email'] . "\r\n" .

'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);

}

?>

Of course you will need to change the various labels to suit your own

Thanks!

We have realized that the php post fix wasn't working, so the code works 100%!!! Thanks!

Appreciate you help!

Hi Paul,

Really appreciate you providing the step by step instructions. Like you, I am transitioning from Flash into Edge and I am somewhat lost since I know nothing about JQuery or HTML. I have a couple of questions regarding the "compositionReady" code:

1. Can this be applied to a form if the elements are within a symbol?

2. If so, would it look like this?

$("<input type='text' id='Email' name='Email' tabindex='1' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.$("my_symbol").$("emailbox"));

Also, regarding the php file, does the code go in the body?

Lastly, would you happen to know the code for a reset or clear button?

Any help would be greatly appreciated.

Thanks,

Bill

Hi Bill, yes its a bit of a wrench or has been but im making headway

thanks to people in here.

Id try to avoid putting the form in a symbol because all sorts of

pathing issues will complicate your life.

the php code should be copied as is to a text editor or something like

dreamweaver and then saved as "sendEmail.php" this file goes on the

server along with everything else (upper-lower case is important).

the send button i included in the code has a clear function already

included.

Hope this helps

Paul

Hi Paul,

Thanks, again. Is it possible to determine the size of each box? I tried adding width=200px to the style section, but it had no affect on the appearance of the box.

Thanks,

Bill

set out the box on the stage and give it the name that you want that

coincides with the code

Thanks, Paul. Tried that, but it has no affect unless the box is smaller than the text area created by the code. No problem, since the character limit can be set via the code.

I was able to get the form working. I had to add the following to the php file (I know this is server specific):

ini_set("SMTP","yoursmtpserver");

ini_set("smtp_port","25");

I also was able to make it work from within a symbol by adding the underlined to each line of the compositionReady code:

$("<input type='text' id='Email' name='Email' tabindex='1' maxlength='200' style='background-color:white; border:1px solid black' required>").appendTo(sym.getSymbol("your_symbol").$("emailbox"));

I had to eliminate the reset portion (sym.$("#Email").detach();) of the button code because it just removed the form fields from view. I can live with not being able to reset the form, but is there another command that can be used to clear the fields other than "detach"?

Lastly, the form fields are not selectable in IE10 or Firefox 21.0/22.0 (not sure about other versions). Works great in Chrome and Safari. I have to hit my tab button 6 times in IE10 and 1 time in Firefox to select the first field of the form. Any idea how to fix this?

Thanks for any help.

Since my cleints site is now live i can show my effort albeit on my own url

http://www.avatarea.com/snseurope01-6/

it works in IE10  for me

to fix your tab index you should arrange your element from bottom to top

example

your first element is Name should be last one in edge elements

if your form is like this

1

2

3

4

5

then your element index on edge's element pannel shoud be

5

4

3

2

1

hope thats help

Zaxist

Thanks, Paul. Nice site.

Bill

Thanks, Zaxist. I don't actually have a tab index issue. I just can't

select the form fields via cursor, but can use tab to get to them. Once I'm

on the form I can tab the various fields in the proper sequence.

Thanks for the response.

Bill

well if you cant click on them by your mouse that means you have layer issue

check your upper layers didn't come over your bottom layers that you are using them as your form filed div

Zaxist

I thought about that, but I can click on them in Chrome and Safari. Any

reason why there would be layer issues in one browser and not the other?

Bill

can you post your project here so i can check where is your problem ?

Zaxist

I appreciate the offer, but I really want to figure this out myself for the sake of learning. Just looking for a little guidance. I'm making the assumption that this may be a somewhat common occurrence and am looking for pointers as to where to look. I know this may be a wrong assumption.

I had the form symbols inside of another symbol, but I've since moved them to the main timeline and made the necessary code changes. The form still works in Chrome and  Safari, but doesn't work in IE10 or Firefox 22. I assume by moving the elements to the main timeline and to the very top layers that I have eliminated any possible layer issues. I've done a complete clean up of my code throughout the project and have played with every setting that seems like it could even remotely be related. The end result is still the same. I've also tried going to the site from multiple systems just to make sure that the problem isn't my system.

Any guidance at this point would be greatly appreciated.

Thanks,

Bill

well

some times you will face error without reason, in these times i create new file and copy paste my elements to there and problem will gone...

try this maybe help you..

Zaxist

Thanks. Will give it a try.

Bill

Did my site work on your IE10 ?

Yes it did. Nice site.