Form problems

  • Profile Image
    jonsynergy
    Asked on February 07, 2013 at 08:39 AM

    Hi,

     

    I would be grateful if you could look at the form below

     

    http://www.biopharmreports.com/2013/focus_flowcyt_applications.asp

     

    When I fill in the message bod with a long message, the forms shifts to the left and I lose some of the boxes.

     

    Also, is there a way of getting the words and the hint words over to the right of the form, rather than the left?

     

    Thanks,

    John

  • Profile Image
    abajan
    Answered on February 07, 2013 at 10:55 AM

    Hi John,

    It seems there are a number of issues that need to be corrected. In addition to the shifting issue, much of the form isn't being displayed in Firefox and possibly other browsers. It's something to do with how the form is embedded in the page because it's showing okay at its own (JotForm) URL.

    Let me run some tests and get back to you.


    Wayne

  • Profile Image
    abajan
    Answered on February 07, 2013 at 11:56 AM

    John,

    Do you need the form to be no wider than 200 pixels? When I loaded a clone of it in my form builder, I immediately noticed that while the form itself was set to be just 200 pixels wide, it's elements were all overflowing the right boundary of the form. I'm pretty sure that this is responsible for the shifting issue.

    I'll continue to check on what could be causing the Firefox problem.


    Wayne

  • Profile Image
    jonsynergy
    Answered on February 07, 2013 at 12:00 PM
    Thank you Wayne, much appreciated.
    John
    .................................
    John Bates Ph.D
    Biopharm Reports
    http://www.biopharmreports.com
    +44 (0) 7870 204848

    _____
  • Profile Image
    jonsynergy
    Answered on February 07, 2013 at 12:38 PM
    Hi Wayne, yes I need to keep it narrow.
    Overflowing elements does sound feasible to me,
    especially when I put a lot of text in the message box
    John
    .................................
    John Bates Ph.D
    Biopharm Reports
    http://www.biopharmreports.com
    +44 (0) 7870 204848

    _____
  • Profile Image
    abajan
    Answered on February 07, 2013 at 01:03 PM

    Okay, thanks for the info, John. I'll see how best I can adjust the form's injected CSS to lessen the width of its various elements to properly fit within that limit.

     

    Wayne

  • Profile Image
    jonsynergy
    Answered on February 07, 2013 at 01:07 PM
    Thank you Wayne, much appreciated.
    John
    .................................
    John Bates Ph.D
    Biopharm Reports
    http://www.biopharmreports.com
    +44 (0) 7870 204848

    _____
  • Profile Image
    abajan
    Answered on February 08, 2013 at 12:48 PM

    Hi John,

    Surely, you must have thought I'd forgotten you!

    Anyway, I believe I've finally found a solution. Please do the following:

    1. Replace the form's injected CSS with the following:

    .form-textarea, .form-textbox {
    padding: 9px;
    border: solid 1px #E5E5E5;
    outline: 0;
    font-size: 13px !important;
    font-family: Verdana, Tahoma, sans-serif !important;
    width: 170px;
    max-width: 170px;
    background: #FFF url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFF), color-stop(4%, #EEE), to(#FFF));
    background: -moz-linear-gradient(top, #FFF, #EEE 1px, #FFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0 0 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0 0 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0 0 8px;
    }

    textarea {
    width: 170px;
    max-width: 170px;

    height: 100px;line-height: 100%;
    }

    input:hover, textarea:hover,
    input:focus, textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
    }

    .form-all {
    padding-top: 0;
    }

    .form-line-error {
    background: none repeat scroll 0 0;
    }

    .form-captcha {
    width: 175px;
    }

    img#input_7_captcha.form-captcha-image {
    width: 173px !important;
    }

    input#input_7 {
    width: 143px !important;
    }

    .form-error-message {
    display: none !important;
    }

    .form-label-left {
    display: none;
    }

    /*--add red border on error--*/
    .form-validation-error {
    border: 1px solid red !important;
    }

    2. Save the form

    3. Replace the form code that's currently in your page with this iFrame. (You may insert it anywhere within the page's body.) If it doesn't look as if anything has changed, use this iFrame instead.

    That should do it. Please let us know if the form's appearance and/or positioning need additional adjustments.

    Thanks for your patience.

  • Profile Image
    jonsynergy
    Answered on February 08, 2013 at 12:55 PM
    Hi Wayne, thanks so much for that.
    No, as it happens I could see you beavering away as I have tracked pages and
    I could see how many pages you were clicking on.
    Spooky I know, but I guess it was some smart guy such as yourself who
    invented Countercentral in the first place, so you've only yourself to blame
    !! :-) :-)
    Thanks again for all your efforts, its very much appreciated!
    So what's it like working on the beach in Barbados?

    Best regards,
    John
    .................................
    John Bates Ph.D
    Biopharm Reports
    http://www.biopharmreports.com
    +44 (0) 7870 204848

    _____
  • Profile Image
    abajan
    Answered on February 08, 2013 at 01:06 PM

    Ha ha... Well, although I live on a hill that's less than half-mile from the nearest beach (Worthing Beach, in the south of the island), I don't think I've ever actually worked while on one! I've had picnics, swimmed swum, snorkeled, strolled and what not but never worked!

    Anyway, you can let us know if they're any issues with the form.

    Cheers

  • Profile Image
    jonsynergy
    Answered on February 08, 2013 at 01:11 PM
    Will do, thanks.
    I'll have another go with it probably on Monday now.
    Have a good week-end.

    Best regards,
    John
    .................................
    John Bates Ph.D
    Biopharm Reports
    http://www.biopharmreports.com
    +44 (0) 7870 204848

    _____
  • Profile Image
    abajan
    Answered on February 08, 2013 at 01:14 PM

    Thanks, and the same to you.

    I think I'll head to the beach!

  • Profile Image
    jonsynergy
    Answered on February 08, 2013 at 01:29 PM
    Sounds good! :-)


    _____
  • Profile Image
    jonsynergy
    Answered on February 08, 2013 at 05:38 PM
    That was a quick swim !! :-)

    Best regards,
    John
    .................................
    John Bates Ph.D
    Biopharm Reports
    http://www.biopharmreports.com
    +44 (0) 7870 204848

    _____
  • Profile Image
    abajan
    Answered on February 08, 2013 at 07:12 PM

    Yeah, I had forgotten that you had also asked about right some elements. I'm working on that intermittently while attending to other forum threads. The beach can wait! :)

  • Profile Image
    abajan
    Answered on February 08, 2013 at 07:13 PM

    ... about right aligning some elements.

  • Profile Image
    abajan
    Answered on February 09, 2013 at 11:51 AM

    Hi again John,

    Please make these changes:

    1. Add the following rules to the bottom of the form's current injected CSS:

    #id_10 {
    padding-right: 0;
    }

    p {
    background: #FFF;
    color: #F00;
    line-height: 0.3em;
    font-size: medium;
    font-weight: bold;
    }

    [placeholder], p, label, input, textarea {
    text-align: right;
    }

    #input_2 {
    width: 134px;
    }

    #id_2 {
    margin-left: 82px;
    }

    .form-button-error {
    width: 200px;
    position: absolute;
    left: -82px;
    display: block;
    margin-top: 5px;
    text-align: right;
    }

    2. Before closing the Preferences pop-up, click its Advanced Settings tab and click Edit Form Warnings:


    3. Change the default message about incomplete required fields to "Please complete the highlighted fields", click Ok and save the change:

    and then close the Preferences


    4. Click the form's heading ("Contact us about this focus report") and when the Properties tab appears, click the button labeled with a big "T":

     


    5. Replace all of the code in the box with just this and click OK. (The rule with the p selector in the extra CSS above takes care of the styling)

    6. Save the form:


    7. In your web page, remove the iFrame I previously said to insert, copy this one instead and place it immediately below the opening body tag. Although I had previously stated that the iFrame can be placed anywhere within the page's body, I subsequently discovered that adding position:absolute to the iFrame's attributes prevented it from being displayed in IE9 and below. However, after much research and experimentation I was able to resolve the issue by placing the iFrame just below the opening body tag. Good old Internet Explorer. Gotta love it! :)

    That should do the trick (knock wood). When done, the form should be positioned on your page like this:


    Do let us know how it turns out.


    Wayne