What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Formatting form to become similar to website's theme

    Asked by jpehrler on June 05, 2014 at 01:35 PM

    I have this form http://milfordnow.com/contact-us/ that's almost perfect.  I want it to look just like the form that came with the theme that you can see here http://milfordnow.com/story-ideas/

    Everything on both the right and left line up perfectly (looks like a negitive padding to move the left edge over will be needed).

    Can you advise on how to get this done?

    Thanks in advance as always,

    Preston

    Page URL:
    http://milfordnow.com/contact-us/

    move thanks and
  • Profile Image

    Answered by Carina on June 05, 2014 at 02:49 PM

    I will work on the formatting of the form and will get back to you later.

    Thank you

  • Profile Image

    Answered by jpehrler on June 05, 2014 at 02:52 PM

    Awesome Carina.  If you have any questions, please let me know. 

    Best,

    Preston

  • Profile Image

    Answered by bob on June 05, 2014 at 06:46 PM

    Upon checking both the forms and cloning the first one I've just made few changes on it so that it can look like the second one you mentioned. Please have a look at the form below I've worked with and let us know if it is what you wanted.

    http://form.jotformpro.com/form/41556500632953

    If yes, then you can clone the form and use it on your website.

    Please get back to us with updates about your query.

    Thank You.

  • Profile Image

    Answered by jpehrler on June 06, 2014 at 09:25 AM

    This is great.  But it need to move left to align correctly.  Here is the form: 

    http://milfordnow.com/contact-us/

    It should line up like this:

    http://milfordnow.com/story-ideas/

    Thanks!

    -Preston

  • Profile Image

    Answered by EliezerN on June 06, 2014 at 10:15 AM

    Hi Preston,

    What Please try injecting this CSS code to your form:

    .form-all

    {

    margin-left: -35px !important;

    }

    Here is how to inject CSS codes to forms: How to inject custom CSS codes

    You can play around with the margin value -35px in case you need to udjust it.

    Then, it will look this way:

     

    Inform us if you need further assistance with this query.

    Thanks

  • Profile Image

    Answered by jpehrler on June 06, 2014 at 10:53 AM

    Beauiful! 

    Now we just need to align the right side of the form with the dotted line (in other words, the left is properly aligned, now the right needs to extend.

    If we can get that done, it will be PERFECT :)

    -Preston

  • Profile Image
    JotForm Support

    Answered by Welvin on June 06, 2014 at 11:34 AM

    Hi Preston,

    I've fixed it. Basically, you just need to adjust your form width inside the form builder from 690 to 788.

    Since the form text inputs width is set to 100%, it would automatically adjust to the page when changing the whole form width.

    Thanks

  • Profile Image

    Answered by jpehrler on June 06, 2014 at 11:38 AM

    Woo!  That got it!  As always, your team rocks! 

    Now if I could only use a custom font, to match the site font, all would be good in the universe.  But, you can't have everything.

    Thanks so much for your help.  (You should charge more!)

    -Preston

  • Profile Image
    JotForm Support

    Answered by Welvin on June 06, 2014 at 11:48 AM

    Hi Preston,

    I believe you are using: Source Sans Pro. I have added it to your form. The following are the custom CSS codes:

    http://pastiebin.com/5391e29437927

    If you require any further assistance, feel free to contact us. It's our pleasure to help!

    Thanks

  • Profile Image

    Answered by jpehrler on June 06, 2014 at 11:55 AM

    Wow, didn't realize you could add custom fonts :)

    I copied and pasted the code into the custom css, but don't see the font in the dropdown selections, nor is the font changing in the form via the custom css.

    thoughts?

  • Profile Image
    JotForm Support

    Answered by Welvin on June 06, 2014 at 12:36 PM

    Yes. We can add custom fonts from Google: http://www.jotform.com/help/100-Beautify-your-form-with-Google-Web-Fonts

    I'm sorry, I thought Source Sans Pro isn't a custom font so I have added it to the form as regular font style. Can't you see the changes while viewing the form in your contact us page: http://milfordnow.com/contact-us/ ? If not, the guide would help you.

    Thanks

  • Profile Image

    Answered by jpehrler on June 06, 2014 at 12:52 PM

    Hmm, I followed the directions and got the font from Google and the code, dropped it into the custom CSS, but it's not working.

    Please advise.

  • Profile Image

    Answered by BryanPaulo on June 06, 2014 at 01:25 PM

    Hi,

    There was a minor mistake on the stylesheet you pasted, you have .form-all { before the code you obtained from google webfont. I removed the line above it and it should be working now.

    Kindly re-embed the form to your website now and check if it matches the font on your website.

    Let us know if everything works fine now.

  • Profile Image

    Answered by jpehrler on June 06, 2014 at 01:39 PM

    Could you send me the link to the form please

    Thanks

  • Profile Image

    Answered by BryanPaulo on June 06, 2014 at 02:17 PM

    Hi,

    It's your form actually. Anyway, the link is: http://www.jotform.us/form/41564200181140

    Please re-embed your form to your website for changes to take effect.

    Let us know if you're good to go.

  • Profile Image

    Answered by jpehrler on June 06, 2014 at 02:32 PM

    Okay, frustrated here.

    I clone the form (which looks perfect).  But when I clone it, it's not the same (fonts are not correct).  Also the form number changes.

    here is the code after cloning it  <script type="text/javascript" src="//form.jotform.us/jsform/41565921891159"></script>

    For whatever reason, it's perfect when I see it when I click the link you provide, but somwhere in transfer, it goes wrong.

    grrr! 

    :)

  • Profile Image
    JotForm Support

    Answered by Mike_T on June 06, 2014 at 04:07 PM

    The cloned version and Bryan's version look identical on my side.

    Yes, the form ID of the cloned form will be different, and it is fine since each form use unique ID number.

    Can you please embed mentioned in your last post code to the site to check it out?

    Thank you.

  • Profile Image

    Answered by jpehrler on June 06, 2014 at 05:20 PM

    I'm at the point where I'm happy enough with it

    You guys are a HUGE help!  I cannot speak highly enough about your customer service.

    Kudos!

    -Preston

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on June 06, 2014 at 06:35 PM

    Hello Preston

    I am very happy to hear your comments about us. Thanks a lot for the kind words.

    Cheers!