Align Bullets to the Left

  • Profile Image
    jpehrler
    Asked on March 28, 2014 at 02:46 PM

    1.  Align the bullets in "Preferred Method of Contact" to the left.

    2.  Create the same "look" for "Preferred Method of Contact" with the white background and outline.

    3.  Make the field question "Date/Time of Consultation" unwrap and appear on one line.

     

    formID=40713169041144

    Thanks for your help!

    -Preston Ehrler

  • Profile Image
    Welvin
    Answered on March 28, 2014 at 04:32 PM

    Hi Preston,

    Should be all set now. You'll noticed that I have added the following codes to the custom CSS area:

    #cid_10 {

    background: white;

    border-radius: 5px;

    border: 1px solid #b7bbbd;

    }

    .form-radio {

    width: 14px !important;

    }

     

    Thank you.

  • Profile Image
    jpehrler
    Answered on March 28, 2014 at 04:35 PM

    Hmmm, not quite there yet...

    http://mobilewell.com/contact/

  • Profile Image
    Welvin
    Answered on March 28, 2014 at 04:46 PM

    Please refresh the page or clear your browser(s). I already see the changes to the form.

    Thanks

  • Profile Image
    jpehrler
    Answered on March 28, 2014 at 04:47 PM

    Got it.  Great job--thanks so much for the professional help!

    As always, you guys ROCK!

  • Profile Image
    jpehrler
    Answered on March 29, 2014 at 04:41 PM

    Since the form is so long, could it be set up in two columns? (see attached screen cap) (But leaving label alignment as is).

    Thanks!

  • Profile Image
    Cesar
    Answered on March 30, 2014 at 12:39 AM

    This may be possible by injecting the proper CSS code. I have cloned your form and modified it to replicate the image you have posted:

    http://form.jotformpro.com/form/40880120455953?

    The CSS Code I Injected is the following:

    .form-label-top
    {
    font-size: 14px;
    display: none;
    }

    div#cid_5.form-input-wide{
    margin-left: 360px;
    margin-top: -298px;
    }

    #input_5
    {
    width: 450px;
    height: 255px;
    }

    Do let us know if you need further assistance. Thank you.

     

    Related Article:
    How-to-Inject-Custom-CSS-Codes 

  • Profile Image
    jpehrler
    Answered on March 31, 2014 at 11:16 AM

    That's amazing Cesar, but I needed all of the fields included in this form:  http://www.jotform.com//?formID=40713169041144

    Thanks!

  • Profile Image
    EltonCris
    Answered on March 31, 2014 at 12:00 PM

    @jpehrler 

    Have you tried shrinking the fields? This will allow you to create columns but you have to expand your form width as well like maybe 900px. Example: http://form.jotformpro.com/form/40894637549975?.

    I'm not sure what to do with the date fields though since they are grouped fields. Do you want the text area to align beside the date fields? This is still possible with CSS inject. Let us know so we can provide you further assistance.

  • Profile Image
    jpehrler
    Answered on March 31, 2014 at 12:09 PM

    I would say, let's move the website field up next to the last name field, then move the "comments" field under the website field.  Line it all up and that's probably going to look great.

  • Profile Image
    ashwin_d
    Answered on March 31, 2014 at 01:02 PM

    Hello jpehrler,

    Please take a look at the following form and see if this looks okay to you:  http://form.jotformpro.com/form/40894647802968?

    Though I have injected custom css but the website text box does not seems to be aligned well with the "Last Name" textbox because of the font size. Do check and get back to us if you need further changes in this form.

    Feel free to clone this form for a closer look. The following guide should help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Thank you!