Problem with embedding form to my Moonfruit website

  • Profile Image
    canafishdrown
    Asked on December 20, 2012 at 09:07 AM

    I use moonfruit to host my site and I have tried the html snippet copying the source code, html code and iFrame code, but nothing happens.

    Is JotForm not compatible for all websites??? I hope it is as I am loving the service and my contacts page!!! 

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 09:18 AM

    To my knowledge, JotForm embed codes are compatible with Moonfruit. Can you please share to us your site's URL so we can figure out what's causing your problem and possibly come up with a fix?

    We are eager to hear your response on this matter. Thank you for your cooperation.

    Kind regards

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 09:36 AM

    Hi 

    Thanks for getting back to me.

    My url is http://form.jotformeu.com/form/23525195271352

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 09:38 AM

    I'm sorry but I was specifically asking for your site's URL, meaning, your Moonfruit-hosted website. Keep the form embed codes on your site so I may be able to inspect it. Thanks!

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 09:40 AM

    Oh, sorry I am not techie... Is this what you mean???

    http://www.themonachieproject.com/

     

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 09:52 AM

    Can you please embed the form to your site now using the iFrame embed option? Tell me on which specific page the codes will be placed.

    By the way, I was able to embed your form successfully on my test moonfruit site.

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 10:06 AM

    I have inserted a new hidden page on moonfruit.

    Insert tab/html snippet/setup tab/copy&paste iFrame code/'yes' to the heights detected question 100 x 1330 pixels/Apply.

    Then a blank grey box appears, no form.

    When I clicked your test moonfruit is says on a LARGE grey box, which covers most of your website:

    Invalid Form URL
    This form is not available for this domain.
    http://www.jotformeu.com/form/23536845871362

    Oh, the stress...

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 10:11 AM

    Sorry about that. Please try checking my test site again.

    Also, kindly use these codes to embed your form:

    <iframe allowtransparency="true" src="//www.jotformeu.com/form/23536845871362" frameborder="0" style="width:100%; height:1247px; border:none;" scrolling="no">
    </iframe>

    As for the width and height detected question, please answer "No", then manually resize the HTML box (while editing the page) to accommodate your form's height and width.

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 10:16 AM

    I am sorry, please use this link to check my contact page:

    http://acero.moonfruit.com/#/contact/4572030634

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 10:18 AM

    It appears when I go to View My Site (thank you sooooooo mch!!!), but only half the form shows.

    Is there anyway of shrinking the form so it fits???

    Your test site, still has the same error msg.

    Btw, the form will show on mobile devices, wont they???

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 10:31 AM

    The page will have to be resized to accommodate the form's length. On my test site, the length I used is 1500

    As for shrinking the form, you can try decreasing the form's top and bottom padding to make it a little more compact.

    Here's the CSS codes I used for this clone:

    .form-line {
    padding-top: 4px;
    padding-bottom: 4px;
    }

    To inject:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 10:45 AM

    I have this CSS code in there already

    .form-all {

    border: medium solid #f91566;

    }

    #cid_18{width:40px;}

    #label_20, #label_19{display:none;}

    #id_19, #id_20{position:relative; top:20px; padding-right:0px; padding-left:0px;}

    #id_18{padding-right:0px; }

    #cid_18{margin-right:2px;!important}

    Do I just add your one in a new line??? Also, will that give me your compact version??? Would I still have to increase my page length in mf???
    You are a star!!!
  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 10:56 AM

    Yes, just add the new codes as a new line. It will produce the same compacting effect as on my clone.

    You will have to increase the page length if the form still does not fit. Play around with the numbers to find the perfect configuration for your webpage and form.

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 11:21 AM

    Neil, THANK YOU SOOOOOOOOOOOOOO MUCH!!!

    Is there a css or a way of getting rid of the outer grey,so the pink border is the limit??? I hope that makes sense???

    Are the jotform contact forms mobile compatible as in, people can complete the form from their mobile devices when accessing my site???

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 11:31 AM

    We can have that outer background removed and replaced by a transparent background color. However, I am not sure if it still would be transparent considering that your site is flash-based.

    We will have to see the page where the form is embedded so we can figure out the best way to do this.

    Are the jotform contact forms mobile compatible as in, people can complete the form from their mobile devices when accessing my site???

    Forms created with our form builder are HTML-based and should be compatible with most, if not all mobile browsers.

    The only problem I see is that your site is Flash-based, and there are a lot of mobile browsers that do not support flash natively - the iPhone's Mobile Safari browser is a good example.

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 11:35 AM

    Oh crumbs!!!

    Ok, I am working on, so will have the form live shortly...

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 11:55 AM

    Hi, ok its live now.

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 12:02 PM

    In addition into you helping making the grey bit transparent, if I make any updates on YOUR website, will it automatically updat on MY website??? Or do I have to put the iFrame code again???

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 12:36 PM

    I have added this code to your form:

    body, html {
    background: none repeat scroll 0 0 transparent !important;
    }

    The outer grey bit should be transparent now. Can you please double check?

    if I make any updates on YOUR website, will it automatically updat on MY website??? Or do I have to put the iFrame code again???

    The changes should be reflected instantaneously. There is no need to re-embed new codes unless your form got longer when you added new fields. Since the iFrame height is static, it will have to be adjusted to allow space for the new fields.

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 12:45 PM

    Again, THANK YOU SO MUCH!!!!!!!!!!!!!!!!!!!!!!!

    Its worked!!!

    I am a happy bunny!!!

     

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 12:46 PM

    We are so glad to hear that. Please do not hesitate to post a question or search the support forum if you have other questions in mind.

    Have a great day and happy holidays!

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 02:39 PM

    Hi Neil

    I've noticed that after submitting the form, you have to manually scroll up to see the Thank You msg.

    I read the post: http://www.jotform.com/help/151-Make-your-page-scroll-to-the-top-after-submission-while-using-iFrame-embed-code

    i just wanted to know that do I have to copy & paste <iframe scrolling="no" frameborder="0" style="width: 100%; border: medium none; height: 1770px;" id="22992880261965" name="22992880261965" allowtransparency="true" src="//form.jotformpro.com/form/23042699504960?" onload="scroll(0,0);">

    </iframe>

    or would that mess up all that we did earlier today???

  • Profile Image
    fxr
    Answered on December 20, 2012 at 03:24 PM

    No, that iframe code modification should make no difference to the CSS stuff Neil helped your with.

     

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 03:35 PM

    Hi Fxr, 

    I put in the above code, not I get on my site...

    This form is currently unavailable!
  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 04:02 PM

    Is my form messed up now???

    So many mixed emotions in 1 day (sigh!)

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 04:10 PM

    First off, the new codes you are using are taken from my example I have provided to the scrolltotop solution on this thread. The codes are for a disabled form under my account and is different from your form's actual embed codes.

    Kindly use this for your form instead:

    <iframe allowtransparency="true" src="//www.jotformeu.com/form/23536845871362" frameborder="0" style="width:100%; height:1247px; border:none;" scrolling="no" onload="scroll(0,0);">
    </iframe>

  • Profile Image
    canafishdrown
    Answered on December 20, 2012 at 04:55 PM

    No change, I still have to scroll up to see the msg...

    Also, I've just noticed that I am not getting the autoresponder email too...

    Please don't tell me to use noreply@jotform...

    Fingers crossed...

  • Profile Image
    NeilVicente
    Answered on December 20, 2012 at 05:16 PM

    I am sorry but the scrolling function does not work due to the nature of your site (flash-based). On this full HTML sample page, the page scrolls to the top of the form after submission, so the Thank You message gets displayed fully.

    One solution I can think of is to edit your thank you message and add a little more spacing from the top, so that the thank you message will be seen even if the form does not scroll to the top of the page after submission.

    As for the autoresponder issue, I am sorry but there is no way around the said problem other than using noreply@jotform.com as the sender email for higher acceptance rate on different email providers.

    There is a concrete reason for this and if you'd like to discuss it, please post a new question as we are going way out of topic on this thread.

    Thank you very much.