5 Replies Latest reply on Aug 20, 2016 10:45 AM by SanchezMusics

    contact form does not work in edge animate cc 2015

    hamzas59758368

      Hi,

       

      question is for edge animate cc 2015,

       

      i downloaded the contact form in the forums and paste it to my project within a symbol "iletisim-arka" and altered the following code for my project's compositionready(just changed the sizes of the text boxes and added getSymbol to the lines), when previewed in the browser, page loads with animation, text boxes, 3 buttons and placeholders appear as they should be but it is not possible to input text and click the buttons, even hand icon does not appear when mouse moved on the buttons.

       

      Is there a way to fix this? I added the jquery-2.0.3.min.js, jquery-1.11.2.min.js to the script pane but this does not fix it.

       

      sym.getSymbol("iletisim-arka").$("Message").html("")

       

       

      // Making input text box for each field

      sym.getSymbol("iletisim-arka").$("nameBox").html("<input type='text' id='Name' placeholder='isim / soyisim'"+

                                   " maxlength='30' dir='ltr' tabindex='1' "+

                                   " style='background-color:white; opacity:0.6; border:1px solid white; width:195px; height:20px; padding-left:5px;'>"

                                    )

       

      sym.getSymbol("iletisim-arka").$("emailBox").html("<input type='email' id='EmailAddress' placeholder='eposta'"+

                                    " maxlength='50' dir='ltr' tabindex='2' "+

                                    " style='background-color:white; opacity:0.6; border:1px solid white; width:195px; height:20px; padding-left:5px;'>"

                                    )

       

      sym.getSymbol("iletisim-arka").$("phoneBox").html("<input type='tel' id='phone' placeholder='telefon'"+

                                    " maxlength='11' dir='ltr' tabindex='3' "+

                                    " style='background-color:white; opacity:0.6; border:1px solid white; width:195px; height:20px; padding-left:5px;'>"

                                    )

       

      sym.getSymbol("iletisim-arka").$("messageBox").html("<textarea type='text' id='message' placeholder='Mesaj'"+

                                      " maxlength='640' dir='ltr' tabindex='4' "+

                                      " style='background-color:white; opacity:0.6; border:1px solid white; width:646px; height:295px; padding-left:5px; overflow:auto; resize:none; '>"

                                    )

       

      sym.getSymbol("iletisim-arka").$("submit1").html("<input type='submit' class="button" id='SendMessage' value='Submit' style='cursor:pointer; tabindex='5''>")

       

       

       

       

      // Submit1 CSS Style

      $("<style>.button {font-size:14px;color:#ffffff;padding:0px 25px; width:100px; height:20px; background:#272727;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; }</style>").appendTo(sym.$("#Stage"))

        • 1. Re: contact form does not work in edge animate cc 2015
          joel_pau Level 5

          Hi,

           

          Your code has syntax errors.

          I repaired and simplified your code here: contactForm.zip - Box

          1) This code:

          //Creating form tags:

          sym.$("name").html("<input type='text' id='Name' placeholder='isim / soyisim' maxlength='30' dir='ltr' tabindex='1'>");

          sym.$("email").html("<input type='email' id='EmailAddress' placeholder='eposta' maxlength='50' dir='ltr' tabindex='2'>");

          sym.$("phone").html("<input type='tel' id='phone' placeholder='telefon' maxlength='11' dir='ltr' tabindex='3'>");

          sym.$("message").html("<textarea type='text' id='message' placeholder='Mesaj' maxlength='640' dir='ltr' tabindex='4'>");

          sym.$("submit").html("<input type='submit' class='button' id='SendMessage' value='Submit' tabindex='5'>");

           

          //Applying styles:

          sym.$("input").css({ "background-color":"white", "opacity":"0.6", "border":"1px solid white", "width":"195px", "height":"20px", "padding-left":"5px" });

          sym.$("textarea").css({ "background-color":"white", "opacity":"0.6", "border":"1px solid white", "width":"646px", "height":"295px", "padding-left":"5px", "overflow":"auto", "resize":"none" });

          sym.$(".button").css({ "cursor":"pointer", "font-size":"14px", "color":"#ffffff", "padding":"0px 25px", "width":"100px", "height":"20px", "background":"#272727", "-moz-border-radius":"10px", "-webkit-border-radius":"10px", "border-radius":"10px" });

           

          2) returns:

          Sans titre.jpg

          • 2. Re: contact form does not work in edge animate cc 2015
            hamzas59758368 Level 1

            Hi Joel,

             

            First, thank you for your time and reply.

             

            I made that code work and now i am confused when i read that you say it has syntax errors

            The problem was not the code, when i put other elements in that symbol they did not respond to any clicks either so at first i thought the problem is the grouping the symbol so i took that symbol out of the group and put it up above the other elements in the element panel, it started to react to the clicks and i was able to enter text in the boxes, then i put the symbol back in the group- it did not work again, then i moved the group up in the element panel above most of the elements and it worked again. So problem was not the code, it was the place in the element panel.

             

            I use photoshop for many years and as you know there are layers in photoshop, when you select the layer you work with that layer so i thought in edge animate element panel is same with layer panel in photoshop, this is where i am wrong i think. When you call the symbol from composition ready whatever its order in element panel, the program should reach that symbol and work with it, according to my logic at least, because when i prepare that symbol on screen in workspace that form is up above everything else and when the animation played it is still above everything else on the screen which is active on that time, so in edge animate, order in the element panel should not effect the accessibility i think.

             

            By the way i am a graphic/industrial designer and i started to use edge animate a week ago when we decide to make an animated webpage for a website to display when it is under construction, it basically includes couple transition animations which shows some information and a contact form. As in the pilot/engineer example i am just using the programs, their user interfaces for my work and i really hate codes but after solving this problem i moved to a step further and put a graphic after the form in the same symbol timeline and add a play action in the submit button so when you click the submit button timeline moves forward for 4 seconds and display this graphic which says "we received your email, we will contact you as soon as possible." and at the end of 4 seconds there is a code in the timeline which says to play reverse the timeline from a label back to its first frame. And in the first frame there is a single line code "var showing = 0;" i use this for checking the state of the animations(got it from a guy in youtube).

             

            Basically there are 4 symbols which has animations in them and this variable showing = 0 at first frames. I use " if else" in the 3 buttons on stage to call appropriate symbol according to their states. everything works fine codes get the states and triggers the animations back and forth but the symbol which has the contact form again not responding as it should be. When i command to the program to reverse the timeline after 4 seconds within the symbol, it reverses it from the label to the first frame, i see the animation on screen rewind but when i click the other buttons on stage to change the animations(other symbols), the contact form symbol plays again from that label, this should not happen because at first frame there is variable showing = 0, so in short it does not get that variable and it messes up the animations little bit. The codes in the buttons gets the variable as 1 not 0 so all of them plays that symbol back to first frame again.

             

            I know it is hard to understand without seeing it but i did my best i hope you understand it, if you have any solution for this i will be very glad, thanks.

             

            Regards,

            • 3. Re: contact form does not work in edge animate cc 2015
              SanchezMusics Level 1

              joel_pau but in which part of the code, insert my email? Thank you

              • 4. Re: contact form does not work in edge animate cc 2015
                joel_pau Level 5

                Hi,

                 

                I just show your answer but can you give me more details? Why do you insert your email?

                You can also send me your files.

                • 5. Re: contact form does not work in edge animate cc 2015
                  SanchezMusics Level 1

                  Hello,

                  I could use your example as a module to send emails from my website done in edge animated 2015? If the answer is yes, where do I enter the email address where you receive messages that users send?