Signup form styling issues

  • Profile Image
    GoAskErin
    Asked on July 27, 2012 at 07:03 PM

    Hi,

    I'm having some styling problems. The sign up form in question is in footer of my client's website, goaskerin.com. Here is what I'm trying to do:

    1. All form elements to flush left within the 265 px div.

    2. Email input field aligns with right of div with no overhanging elements (same for all states).

    3. On mouse down, the text, "email", should show above the input field.

    Thank you.

    Sam

  • Profile Image
    idarktech
    Answered on July 27, 2012 at 08:25 PM

    Hi Sam,

    I have merge my CSS codes to your current CSS codes. I can see that some of the background colors are blocking your form styles? Please replace your CSS codes with this:

     

    /*--remove focus/error background--*/

    .form-line-error, .form-line-active {

    background:none !important;

    }

    /*--Your CSS Codes - Reduce Top Padding--*/

    .form-all {

    padding-top: 10px !important;

    }

    /*--Added fix width--*/

    #input_4 {

    width: 252px !important;

    max-width: 252px !important;

    height: 34px;

    padding-left:10px;

    font-size:14px;

    }

    /*--Your CSS - Hide Full Name--*/

    #id_5.form-line{

    visibility:hidden;

    }

    /*--Align to left by removing left padding--*/

    .form-line {

    padding-left: 0px !important;

    }

    Also, is there any reason why you are hiding the full name field of your form?

    Please let us know if this is what you are trying to achieve. We're always here to help. Thanks!

  • Profile Image
    GoAskErin
    Answered on July 30, 2012 at 03:27 PM

    Hi, thanks for the response. Yes, the full name form is hidden on purpose. JotForm requires the full name for Mail Chimp integration, but I do not want it to show so I hid it. If there is a better way to do this, please let me know. Thanks. Sam 

  • Profile Image
    Mike_T
    Answered on July 30, 2012 at 04:10 PM

    Your form looks beautiful now :) 

    This is fine to hide the Full Name field until that subscription issue is solved by our Developers.

    Please feel free to contact us if you need any further assistance.

  • Profile Image
    GoAskErin
    Answered on July 30, 2012 at 04:11 PM

    I would like to add similar styling to the File Upload form on the lower right of this page: 

    http://www.goaskerin.com/workshops/custom-video-tutorials/

    1. Top three form elements (name, email, notes) to align left and right (justified) within the 265 px div. 

    2. No overhanging elements (same for all states). 

    Please advise.

    Sam  

     

  • Profile Image
    Mike_T
    Answered on July 30, 2012 at 04:50 PM

    Please add the following CSS to your code:

    /*--Fix width for Name, Email and Notes--*/

    #input_1, #input_2, #input_4 {

    width: 252px !important;

    max-width: 252px !important;

    height: 34px;

    padding-left:10px;

    font-size:14px;

    }

    /*--Align to left by removing left padding--*/

    .form-line {

    padding-left: 0px !important;

    }

    Let us know if something else should be fixed.

  • Profile Image
    GoAskErin
    Answered on July 31, 2012 at 05:33 PM

    Hi, 

    I'm still experiencing problems on the "File Upload" form located on this page: 

    http://www.goaskerin.com/workshops/custom-video-tutorials

    1. The top three input fields are extending past the desired right hand padding, i.e., part of the field is hidden on the right. 

    2. The sub text under the Notes input field is extending too far to the right and is not wrapping. 

    3. The "required" text is not showing. 

    I'm thinking part of the problem is the complexity of the CSS injection. Please advise on how to clean up the code to make it leaner and less cumbersome. 

    Here is the CURRENT CSS injection from the Form Styles panel:  

    /*--Fix width for Name, Email and Notes--*/#input_1, #input_2, #input_4 {width: 252px !important;max-width: 252px !important;height: 34px;padding-left:10px;font-size:14px;}/*--Align to left by removing left padding--*/.form-line {padding-left: 0px !important;}.form-header-group {

    background:none;

    border-bottom:none;

    padding: 12px 0 24px 5px;

    }

    .form-line-error {

    background:#666 repeat scroll 0 0;color:#ccc;

    }.form-line-active {

    background-color:#333;

    }.form-all {padding-top: 10px;}/*--label top styles--*/

    .form-label-top, .form-label-left{

    color:#ffffff !important;

    }/*--remove focus border--*/

    .form-textbox:focus, .form-textarea:focus{

    outline: none;

    }/*--form header style--*/

    .form-all h3{

    margin:0;

    background:#57a700 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6138_form_heading.gif) repeat-x;

    color:#fff;

    font-size:20px;

    border:1px solid #57a700;

    border-bottom:none;

    margin-left: 1px;

    text-indent: 30px;

    }/*--mail icon--*/

    .form-all h3 span{

    display:block;

    padding:10px 20px;

    align:right;

    background:url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6139_form_ico.gif) no-repeat 5% 50%;

    }/*--form section style--*/

    .form-section{

    border-radius:0px;

    -webkit-border-radius:0px;

    -moz-border-radius:0px;

    padding-left: 0px;

    margin:0;

    border:0px;

    border-top:none;

    <!-- background:#000 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6142_form_top.gif) repeat-x; -->

    background:#fff;

    }/*--textbox, textarea style--*/

    .form-textbox, .form-textarea{

    font-family:arial;

    border:1px solid #111;

    background:#282828 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6140_form_input.gif) repeat-x;

    padding:5px 3px;

    color:#fff;

    }/*--form submit button style--*/

    .form-submit-button{

    padding:2px 10px 20px 10px;

    height:34px;

    line-height:10px;

    border:1px solid #70ad2e;

    background:#5aae00 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6141_form_button.gif) repeat-x;

    color:#fff;

    cursor:pointer;

    text-align:center;

    }/*--reduce form line--*/.form-line{

    padding:5px !important;

    width:100%;}/*--remove form top padding--*/

    .form-all{

    padding-top:0px !important;<!--

    .form-line{

    padding:5px !important;

    }/*--remove form top padding--*/

    .form-all{

    padding-top:0px !important;

    -->}/*--for html texts--*/

    .form-html {

    padding: 0px !important;

    padding-right: 7px !important;

    }/*--remove error message--*/

    .form-error-message {

    display: none !important;

    }

    .form-line-error {

    background:none repeat scroll 0 0;

    }/*--reduce error font size--*/

    .form-button-error {

    font-size: 11px !important;

    }/*--fix captcha--*/

    .form-captcha, .form-captcha:hover {

    border:none;

    background:none;

    padding:0px !important;

    }

    .form-captcha-image {

    border:0px;

    background:none;

    -moz-border-radius:0px !important;

    -webkit-border-radius:0px !important;

    border-radius:0px !important;

    }/*--fix captcha box--*/

    #input_7{

    width:142px !important;

    max-width:142px !important;

    }/*--add red border on error--*/

    .form-validation-error {

    border: 1px solid red !important;

    }

  • Profile Image
    NeilVicente
    Answered on July 31, 2012 at 06:30 PM

    @GoAskErin

    I have applied the following changes to your form's injected CSS to rectify the problems you mentioned:

    1.  Added a 10 pixel right padding to the input fields
    2.  Decreased the width of the input fields to 236px (from 252px)
    3.  Added a line of code to wrap the sub-label text for the upload field

    As for the required text not being shown, and the captcha image not loading properly - this problem is caused by a conflict between your site's jQuery scripts and the form's ProtoType scripts.

    To solve this issue:

    1.  In your page's source code, find the reference to jQuery library (hosted on googleapis)

    2.  Paste this code right below the jQuery reference:

    <script type="text/javascript">
      $.noConflict();
    </script>

    So it becomes:

    3.  Save your webpage

  • Profile Image
    GoAskErin
    Answered on July 31, 2012 at 06:56 PM

    Thanks. I'm also unable to get the form to upload PSD files. I've added the asterisk (*) to list of accepted extensions, but I still get this error message: 

    one-one-one2.psd has invalid extension. Only pdf, doc, docx, xls, csv, txt, rtf, html, zip, mp3, wma, mpg, flv, avi, jpg, jpeg, png, gif are allowed.

    Will this problem be resolved by adding the script you've just sent? 

    Sam 

  • Profile Image
    NeilVicente
    Answered on July 31, 2012 at 07:07 PM

    Indeed, that problem is also caused by the script conflict.

    Adding the noconflict code should make your form work smoothly.