Forms not functioning in Xara Web Designer 7

  • Profile Image
    Folkmann
    Asked on April 02, 2011 at 10:05 AM

    Hi SF

    Just bougth the upgrade of Xara Web Designer - from 6 to 7.

    In XWD6 it still works just fine

    In XWD7 you can import to code (copy/paste from the widget list and import as HTML as usual)

    The form sits perfect, but it's not functioning, a.i. you can't write in it.

    Full HTML code below. Can you help, please?

    Best regards

    John  Folkmann

     

    <script src="http://cdn.jotfor.ms/jotform.jgz?3.1.109" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init();
    </script>
    <link target="_blank" href="http://cdn.jotfor.ms/jotform.cssgz?3.1.109" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .form-label{
            width:150px !important;
        }
        .form-label-left{
            width:150px !important;
        }
        .form-line{
            padding:5px;
        }
        .form-label-right{
            width:150px !important;
        }
        .form-all{
            width:432px;
            background:white;
            color:black !important;
            font-family:Verdana;
            font-size:12px;
        }
    </style>

    <form class="jotform-form" action="http://www.jotform.com/submit.php" method="post" name="form_10605928622" id="10605928622" accept-charset="utf-8">
        <input type="hidden" name="formID" value="10605928622" />
        <div class="form-all">
            <ul class="form-section">
                <li class="form-line" id="id_9">
                    <label class="form-label-right" id="label_9" for="input_9"> Name </label>
                    <div id="cid_9" class="form-input">
                        <input type="text" class="form-textbox" id="input_9" name="q9_name" size="38" maxlength="50" />
                    </div>
                </li>
                <li class="form-line" id="id_10">
                    <label class="form-label-right" id="label_10" for="input_10"> Adress </label>
                    <div id="cid_10" class="form-input">
                        <input type="text" class="form-textbox" id="input_10" name="q10_adress" size="38" maxlength="100" />
                    </div>
                </li>
                <li class="form-line" id="id_12">
                    <label class="form-label-right" id="label_12" for="input_12"> Company </label>
                    <div id="cid_12" class="form-input">
                        <input type="text" class="form-textbox" id="input_12" name="q12_company" size="38" maxlength="100" />
                    </div>
                </li>
                <li class="form-line" id="id_11">
                    <label class="form-label-right" id="label_11" for="input_11"> e-mail </label>
                    <div id="cid_11" class="form-input">
                        <input type="text" class="form-textbox" id="input_11" name="q11_email" size="38" maxlength="100" />
                    </div>
                </li>
                <li class="form-line" id="id_22">
                    <label class="form-label-right" id="label_22" for="input_22"> Mobile number </label>
                    <div id="cid_22" class="form-input">
                        <input type="text" class="form-textbox" id="input_22" name="q22_mobileNumber" size="38" maxlength="100" />
                    </div>
                </li>
                <li class="form-line" id="id_24">
                    <label class="form-label-right" id="label_24" for="input_24"> Telephone </label>
                    <div id="cid_24" class="form-input">
                        <input type="text" class="form-textbox" id="input_24" name="q24_telephone" size="38" maxlength="100" />
                    </div>
                </li>
                <li class="form-line" id="id_18">
                    <label class="form-label-right" id="label_18" for="input_18"> .... </label>
                    <div id="cid_18" class="form-input">
                        <div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_18_0" name="q18_18[]" value="Send me Inside Magazine" />
                                <label for="input_18_0"> Send me Inside Magazine </label></span><span class="clearfix"></span>
                        </div>
                    </div>
                </li>
                <li class="form-line" id="id_13">
                    <label class="form-label-right" id="label_13" for="input_13"> Message </label>
                    <div id="cid_13" class="form-input">
                        <textarea id="input_13" class="form-textarea" name="q13_message" cols="30" rows="4"></textarea>
                    </div>
                </li>
                <li class="form-line" id="id_1">
                    <div id="cid_1" class="form-input-wide">
                        <div style="margin-left:156px" class="form-buttons-wrapper">
                            <button id="input_1" type="submit" class="form-submit-button">
                                Send
                            </button>
                            &nbsp;
                            <button id="input_reset_1" type="reset" class="form-submit-reset">
                                Clear Form
                            </button>
                        </div>
                    </div>
                </li>
                <li style="display:none">
                    Should be Empty:
                    <input type="text" name="website" value="" />
                </li>
            </ul>
        </div>
        <input type="hidden" id="simple_spc" name="simple_spc" value="10605928622" />
        <script type="text/javascript">
            document.getElementById("si" + "mple" + "_spc").value = "10605928622-10605928622";
        </script>
    </form>

  • Profile Image
    allanftd
    Answered on April 02, 2011 at 11:26 AM

    Hi John,

    Thank you for posting your concern. I tested your form by copying the whole code and saved it locally as a web page. I was able to write into the form fields and submit my answers successfully. I got the following message "Din meddelelse er sendt. Vi vender hurtigst muligt tilbage. Venlig hilsen Crysberg"

    This means that the form itself is working when being used by itself. The problem only surfaces when you introduce the form code into your web design application.

    As a posible remedy, I would suggest that instead of using the form's source code, use the form's iframe embed code instead:

    <iframe allowtransparency="true" src="//form.jotform.com/form/10605928622" frameborder="0" style="width:100%; height:616px; border:none;" scrolling="no">

    </iframe>

    In that way, any CSS or javascripting that your web design software doesn't like will not be placed directly into the web page in Xara. All scripting codes are in the webpage inside the iframe (in this case, http://form.jotform.com/form/10605928622)

    We hope you find this information useful. Please let us know if you need further assistance. Thank you for using JotForm!

    JOTFORM SUPPORT

  • Profile Image
    shmuelg
    Answered on August 17, 2011 at 03:15 PM

    Hi Alan,

     

    I have the same issue.  Can you please elaborate on this?  I tried this and the form is showing up partly transparent.

  • Profile Image
    NeilVicente
    Answered on August 18, 2011 at 12:34 PM

    @shmuelg

    For better communication, responses to your query will be posted in this thread that you have opened.

    Regards,
    Neil

  • Profile Image
    shmuelg
    Answered on August 18, 2011 at 12:54 PM

    (as a suggestion, you may want to have the header on this section listed as Your Reply/Comment since I was confused with the "Your Answer" as I did not have an answer but additional questions. I therefore didn't continue to use this thread, but started a new one with the same subject line)

    I have now used the iframe as you suggested above yet the form appears with portions that are transparent.

    See  URL.

    http://soferonsite.com/favicon.htm

  • Profile Image
    shmuelg
    Answered on August 26, 2011 at 10:05 AM

    (our site was down)  Need answer.

    I have now used the iframe as suggested above yet the form appears with portions that are transparent.

    See  URL.

    http://soferonsite.com/favicon.htm

  • Profile Image
    allanftd
    Answered on August 26, 2011 at 11:20 AM

    Hi shmuelg,

    May we ask for the title of the form that is embedded on your web page? I tried accessing the page but did not find the form in there (still down I think?). 

    If you say that some portions appear transparent, could it be that you have assigned the background to be transparent? The link below will guide you on how to check if the background is set to transparent: http://www.jotform.com/answers/235-How-can-I-create-a-transparent-background-with-my-form

    Please update us wit the results. Thank you for using JotForm!

    JOTFORM SUPPORT

  • Profile Image
    shmuelg
    Answered on August 26, 2011 at 01:03 PM

    Thanks Alan,

    It is now up at this URL.  You may need to clear your cache.  BTW, I haven't set the background to be transparent, it is set that way automatically within the iFrame.

    http://soferonsite.com/favicon.htm

    <iframe allowtransparency="true" src="//form.jotform.com/form/12215122353" frameborder="0" style="width:100%; height:753px; border:none;" scrolling="no">

    </iframe>


  • Profile Image
    NeilVicente
    Answered on August 26, 2011 at 11:18 PM

    Hi,

    By default, a form does not have a background set to it, so yes, it is transparent. To give your form a background color, click Setup & Embed > Preferences > Form Styles then click the Background area to choose a color

     

    Hope this helps!

     

    Neil

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 09:44 AM

    Incorrect.  My form does have a background set to #999999 already.

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 09:50 AM

    The "iFrame" code shows transparency "true" see screen shot.  Please tell me how to change this.  I have already tried to set it to "false" and it didn't work.transparency

  • Profile Image
    allanftd
    Answered on August 29, 2011 at 10:11 AM

    Hi shmuelg,

    Regarding your last inquiry, can you please try to delete this attribute altogether? Please try and let us know how it goes.

    JOTFORM SUPPORT

  • Profile Image
    Answered on August 29, 2011 at 11:31 AM

    What I completely do not understand is why on my "Contact" page, the jot form works fine! See url below.

    http://soferonsite.com/contact.htm

    While on subsequent pages I can't get it to "pop" up and work properly.  Please help me on this.  See url below.

    http://soferonsite.com/favicon.htm

  • Profile Image
    NeilVicente
    Answered on August 29, 2011 at 02:43 PM

    @shmuelg

    Can you tell us what else is wrong with your form? I can see that it does not have any transparency issues anymore. Do you want the "Sofer On Site Reward Points" form to pop-up in the same way as the Contact Us form does?

    If yes, then you must use pop-up embed codes.

    If the issue is something else, please let us know. Thanks!


    Neil

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 03:39 PM

    doesn't work with the pop-up code at all.

    I would really like it to work like it does on my "Contact" page.  Please advise.

    305.770.3481

  • Profile Image
    NeilVicente
    Answered on August 29, 2011 at 03:45 PM

    Your issue has more to do with Xara Web Designer than with JotForm. Anyway, here's a tip:

    Redo your favicon.htm page. Remove the layer with the green background and curved corners. Clear the page, leaving nothing except the footer and the header/menu.

    After doing so, embed the pop-up codes again.


    Neil

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 04:01 PM

    Thanks for your help, yet regretfully I'm sorry that it still doesn't work.

    Followed your steps exactly and tried it several other ways as well.  The button that says "Click Here" has disappeared.

  • Profile Image
    NeilVicente
    Answered on August 29, 2011 at 04:03 PM

    Thanks for the update. Please upload that page so I can inspect what's causing it to not work.

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 04:24 PM

    The HTML placeholder image is being regenerated.  It should look like this.

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 04:25 PM

    The URL is now updated.


  • Profile Image
    NeilVicente
    Answered on August 29, 2011 at 04:30 PM

    It works fine on my end. Please clear your browser's cache to reflect the changes. Click the link below to learn how to clear your browser's cache.

    http://www.wikihow.com/Clear-Your-Browser%27s-Cache

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 04:32 PM

    Yes it does work, but the button "Click Here" is gone

  • Profile Image
    NeilVicente
    Answered on August 29, 2011 at 04:35 PM

    In your embed codes, replace "Sofer On Site Rewards" with "Click Here"

    <a target="_blank" href="javascript:void( window.open('http://www.jotform.com/form/12215122353', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))">Sofer On Site Rewards </a>

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 04:38 PM

    Hi Neil, Really appreciate all your help. Is there a way to keep the image as shown above?  Are you familiar with XARA?

    If I do as you suggest, it will change the look of the site that I've worked hard to keep.

  • Profile Image
    NeilVicente
    Answered on August 29, 2011 at 04:41 PM

    Insert the "Click Here" button image tags in place of the "Sofer on Site Rewards" text in your embed codes

    <a target="_blank" href="javascript:void( window.open('http://www.jotform.com/form/12215122353', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))"><img src="yourbuttonimage.jpg"/></a>

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 04:59 PM

    Did it and now the button is totally gone.

  • Profile Image
    NeilVicente
    Answered on August 29, 2011 at 05:03 PM

    Replace yourbuttonimage.jpg with the URL to your button image file or the "Click Here" image.

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 05:06 PM

    For me to do this on 50+ pages is ludicrous and would surely bring a step closer to insanity.  There has got to be an easier way! Really frustrated.  I had hoped that XARA and JotForm would work together.  It did on my contact page and now?!  

    Please tell me if there is a way just to do what I did before on my contact page.

  • Profile Image
    NeilVicente
    Answered on August 29, 2011 at 05:15 PM

    From what I see in your contact page, it looks like you have added a layer for the button's background image, and another layer for the pop-up codes which you have placed on top of the button image layer.

    So basically, the "Click Here" text from the pop-up codes was retained and is floating on top of the button image.

    Anyway, in the future, please refrain from posting a hodge podge of issues (transparency, pop-up) in a single thread to avoid confusion. Thanks!


    Neil

  • Profile Image
    shmuelg
    Answered on August 29, 2011 at 05:20 PM

    As all of this relates to the header of "Forms not functioning in XARA Web Designer", I did not create a new thread.  Meanwhile, what worked at one time, still no longer does.  Answer seems at this point unresolvable.

  • Profile Image
    NeilVicente
    Answered on August 29, 2011 at 05:27 PM

    Hi,

    Did you follow the steps I suggested?

    From what I see in your contact page, it looks like you have added a layer for the button's background image, and another layer for the pop-up codes which you have placed on top of the button image layer.

    Create a layer then insert the button background image in it
    Create another layer (html, probably?) then insert your form's pop-up embed codes

    I apologize if I'm not too familiar with Xara, but if you were able to embed the pop-up form perfectly in your Contact page, there should be no reason why you can't do the same with your favicon.htm page.

    Nothing has changed with JotForm's codes to affect Xara and JotForm's "compatibility", so to speak.


    Neil

  • Profile Image
    shmuelg
    Answered on August 30, 2011 at 11:19 AM

    Just got off the phone with Pete (tech support from XARA) who explained to me the following steps to get the Pop-Up Form to work properly.

    1) Embed the form using Pop-Up HTML

    2) Select only the code from with the " " marks (see screen shot)

    3) On the button or link within XARA right click and select Web Properties

    4) Go to tab of "Link" and paste the revised code into "Link to Web or Email address"  DONE!!!

    Pete said that the iFrame code should also work.  Not sure.

    As this NOT the same way that I had done this originally, please have your programmers communicate an easier to paste these pop-up codes.  Thank you.