How to move the form flush to the Left?

  • Profile Image
    DawnJHAH
    Asked on March 13, 2014 at 11:49 AM

    Got my form all set up and the background matched to my website.  But the form is indented.

    I would like to move the form flush to the left, so that it lines up with the rest of the page content.

    Suggestions?

    Thanks in advance!

  • Profile Image
    EliezerN
    Answered on March 13, 2014 at 01:44 PM

    Hi,

    To accomplish what you need simply inject this CSS code to your form:

    .form-all

    {

    margin-left:0px !important;

    }

    That will remove the margin from the left side of your form. Here is how to inject CSS codes to forms: How to inject custom CSS codes

    Do not hesiate to contact us if you still need assistance with this inquiry.

    Thanks

  • Profile Image
    DawnJHAH
    Answered on March 14, 2014 at 10:38 AM

    Thanks so much Eliezer.  It worked on the form, but not work on the website.

    Suggestions?

    http://dev.haveahootfuncenter.com/contact/

    :)

  • Profile Image
    ashwin_d
    Answered on March 14, 2014 at 01:50 PM

    Hello DawnJHAH,

    Please inject the following custom css in your form to left align your questions:

    .form-all {float: left;}

    Do check and get back to us if this works for you.

    The following guide should help you inject custom css code:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Thank you!

  • Profile Image
    DawnJHAH
    Answered on March 14, 2014 at 03:47 PM

    I've added the custom CSS, but it seems it's not working.

    I've shaded the background of the form, as you can see.  Yet, for whatever reason, the form, not the text is lining up to the left.  I need the text of the form in line with the text above the form.

    http://dev.haveahootfuncenter.com/contact/

    Thanks!

     

  • Profile Image
    DawnJHAH
    Answered on March 14, 2014 at 05:19 PM

    I've added a Contact Form 7 into the space in the meantime as we are going to launch very soon.

    This is how I want the JotForm to look. 

    http://dev.haveahootfuncenter.com/contact/

    Thanks in advance :)

  • Profile Image
    pinoytech
    Answered on March 14, 2014 at 07:07 PM

    Hi,

    Can you please take a look at the image below if this is what you are trying to achieve?

    If yes, inject this custom css in your form.

    .form-all {

    margin-left: -12px !important;

    }

    #id_2.form-line {

    margin-left: 4px !important;

    }

    #id_13.form-line {

    margin-left: 2px !important;

    }

    Feel free to contact us again if you need further assistance.

  • Profile Image
    DawnJHAH
    Answered on March 14, 2014 at 07:10 PM

    LOL...after 3 hours getting CF7 working!  Too funny.  But I love JF and how it ties into MailChimp.

    This looks great!  But I'm looking for a sleeker look.  Cells closer together and somewhat higher (thicker).

    Like how I've got it here http://dev.haveahootfuncenter.com/contact/

    Thanks!

  • Profile Image
    EltonCris
    Answered on March 14, 2014 at 11:40 PM

    @DawnJHAH

    Glad you've found something else that fits your requirements. Should you need help anything with your Jotform forms, let us know here. We'd be happy to assist.

    Regards!

  • Profile Image
    DawnJHAH
    Answered on March 15, 2014 at 12:41 PM

    Actually, is there a way to recreate the CF7 I have on the page in JotForm.  I would much prefer to use JF.

     

    http://dev.haveahootfuncenter.com/contact/

     

    Thanks!

  • Profile Image
    ashwin_d
    Answered on March 15, 2014 at 02:06 PM

    Hello DawnJHAH,

    Please take a look at the following form and see if this is what you are trying to achieve:   http://form.jotformpro.com/form/40735606525959?

    If this seems okay to you we will add the required field validations as well. 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

    Do get back to us if you need any further changes.

    Thank you!

  • Profile Image
    DawnJHAH
    Answered on March 17, 2014 at 10:41 AM

    It's almost there.  I prefer the boxes to be higher and closer together.  Are those changes possible.

    Wow...I'm impressed!  This is why I LOVE JotForm!

    Thanks!

  • Profile Image
    EliezerN
    Answered on March 17, 2014 at 12:30 PM

    @DawnJHAH

    Yes, it is possible. Here is the example form of what you are trying to achieve: http://form.jotformpro.com/form/40755409783968

    This is the CSS code I injected: 

    .form-textbox

    {

    height:40px !important;

    border:none !important;

    }

    .form-textarea

    {

    height: 252px !important;

    border:none !important;

    }

    .form-line

    {

    padding: 4px !important;

    }

    You can clone the form using this guide: How to clone an existing form from a URL 

    Please inform us if you still need further assistance. In case you have an unrelated inquiry, kindly open a new thread to post it. You can use this link: http://www.jotform.com/answers/answer.php

    Thanks

  • Profile Image
    DawnJHAH
    Answered on March 17, 2014 at 12:55 PM

    YOU GUYS ROCK!!!!!  It's perfect.  Beautiful!  This is how templates should be!!!

    Thanks for your work. 

  • Profile Image
    ashwin_d
    Answered on March 17, 2014 at 02:09 PM

    Hello DawnJHAH,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!