Form Designer Preview Not Accurate

  • Profile Image
    emlogodesign
    Asked on October 18, 2014 at 04:33 PM

    Here is my form ... this preview is how I want it to look http://form.jotform.us/form/42689231036152

     

    When I put it on my website it spaces everything out and adds more space.. www.emdesignia.com Please help!

  • Profile Image
    Jan
    Answered on October 18, 2014 at 10:55 PM

    Hi emlogodesign,

    I can see that you used the new Form Designer. Thank you for trying our new tool. Sorry if you are having issues with it. In the Form Designer if you click "Preview Form" it will go to the section where you can preview the layout on different devices.

    This is what the original form looks like on desktop and tablet screen.

    I tried cloning your form and try to check it on Form Designer. On preview mode, If you click on mobile phone portrait or landscape, you can see the lines. Although it shows fine in desktop and tablet screens. Please check the screenshot below.

    On your Wix website, it shows that you embed the form on right side.

    First, try re-embedding the form using this guide.

    Adding a Form to Wix Site (http://www.jotform.com/help/70-Adding-a-form-to-Wix-Site)

     

    If the issue is still the same then please try "Adding" these custom CSS code.

    /* Custom CSS */

    @media only screen and (max-width: 768px) {

    * {color: #ffffff !important;}

    .form-line {border: 0px !important;}

    .form-submit-button-light {color: #7c868d !important; border-radius: .3em !important; text-shadow: 1px 1px 0px #ffffff !important; border: 1px solid #dfdfdf !important; -moz-box-shadow: inset 0 1px 0 0 #ffffff, 0 1px 1px 0 rgba(0, 0, 0, 0.40); -webkit-box-shadow: inset 0 1px 0 0 #ffffff, 0 1px 1px 0 rgba(0, 0, 0, 0.40); box-shadow: inset 0 1px 0 0 #ffffff, 0 1px 1px 0 rgba(0, 0, 0, 0.40); background: #eaeaea !important; background: -moz-linear-gradient(top, #fafafa 0%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#eaeaea)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#eaeaea',GradientType=0 ); background: linear-gradient(top, #fafafa 0%, #eaeaea 100%);}

    }

    @media screen and (max-width: 768px) {

    .form-line { padding: 0px 10px !important; }

    }

    Here's a guide on How to Inject Custom CSS.

     

    Hope this helps, if not please let us know.

    Thank you!

     

  • Profile Image
    emlogodesign
    Answered on October 20, 2014 at 01:41 PM

    Neither of these options work. Also the link to the directions for wix html
    is broken. It's even worse now than it was before. Please help!!

  • Profile Image
    Mike_T
    Answered on October 20, 2014 at 02:51 PM

    The form looks different on your web page due to enabled Mobile theme.

    Please enable a Nova Theme or a SuperNova Theme on your form, then re-check the form on your web site.

    Thank you.

  • Profile Image
    emlogodesign
    Answered on October 20, 2014 at 10:41 PM
    This helped a little, but I do not want the labels showing. I want the form
    to be very compact. The beta designer allows me to do this...but it doesn't
    seem to be working accurately.
    --
    *Emily Kucera*
    *Graphic Designer*
    563.581.0019
    emdesignia@gmail.com
    emdesignia.com

    Share your positive experience by writing a review!

    ...
  • Profile Image
    Welvin
    Answered on October 21, 2014 at 07:39 AM

    Hi Emily,

    You can again hide the label using the form designer. I've fixed it for you. Please kindly check now.

    Thank you!

  • Profile Image
    emlogodesign
    Answered on October 21, 2014 at 09:41 AM
    Okay, we're still moving forward however the form is still very glitchy.
    I've published this version of the form on my site, however:
    1. Once I submitted the form once on my website it disappeared from the site
    2. When I reloaded the page to see if the form would come back it did come
    back but 1/2 of the submit button was missing although the whole button was
    there previously.
    3. I never received the autoresponder only the notification. (I double
    checked my email and it is correct)
    ...
  • Profile Image
    Welvin
    Answered on October 21, 2014 at 10:43 AM

    1. Because you have the form redirect to: http://www.emdesignia.com/#!5-cost-saving-ideas/c1ofk which is an empty page - no form is there.

    2. Reloading the form doesn't give me a problem here, I'm using Chrome 38 and Firefox 33 in Windows 7 PC. But considering you're using Wix website which is flash based CMS, Framed contents are usually loaded right after the whole website elements.

    3. I have move the autoresponder issue to a new thread, please kindly check it here: http://www.jotform.com/answers/446653.

    Thank you!