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

    The outer element is 600px and won't change

    Asked by AnaB29 on October 26, 2012 at 04:27 PM

    Hi

    I just signed up yesterday and I think jotform may work for me if we can resolve two issues.

    1. I need the TOTAL width of my contact form to be 550px wide.  I've tried adjusting the width from the preferences menu, but that only adjusts the width of the inner div, .form-all.  The outer form element does not become any smaller than 600px wide. 

     

    I tried adding the following css to the 'inject css' srea based on an answer provided in the forum but it didn't alter the html form element--still 600px. (I changed the widths in my document to the ones in the highlighted square brackets on the right, below for demonstration, but in my code they are included using proper css syntax)

     

      "Answered by idarktech on February 04, 2012

    Hi Chad,

    Please try to inject this custom CSS codes on your form and see if this would fix the overflowed elements.

    .form-html {

    max-width: 290px;  [540}

    width: 280px;}   [530]

    .form-label-top {

    max-width: 280px;}   [530]

    .form-all{

    max-width:300px;}   [550]

    Please let us know if this helps or not so we can further assist you with this. Thank you so much!"

     

    2.

    I also want the form to use the Google web font that is embedded on my page so I added this to the .form-all class, based on this post from the forum:

     

    "Answered by NeilVicente on April 22, 2011

    ....If you insist on using a custom font for your form, inject this custom css in your form:
    .form-all {
        font-familyVerdana;
    }

    Replace Verdana with any font you'd like. "

    My css:

    .form-all{ 

    font: 1em/1.5em "Open Sans", Georgia, Arial, sans-serif;

    color: #4b3939;}

     

    I followed both of these tips but neither of the has worked.  My outer element is still too wide and my fonts are your defaults, not my chosen one.

    Here is a link to the page i'm working on:

    http://www.eveandellie.com/new/contact.html

    Basically I have our contact info that appears on the left in one div and the form script in a second div that is supposed to appear on the right.  Thay are both floated, but the 600px width of the outer form element is too much for the space that is allowed for it, so it falls to the next 'row'.

     

    I look forward to hearing back from someone!

     

    Best,

    Angela

     

     

    Page URL:
    http://www.eveandellie.com/new/contact.html

    form to big html form element contact form form script html form JotForm
  • Profile Image
    JotForm Support

    Answered by Mike_T on October 26, 2012 at 05:24 PM

    Thank you for contacting us.

    1. Form is taking the space of your div <div class="box600 floatL">.

    Please try to decrease the size of mentioned div.

    Example with 550px:

    2. You do not have installed Open Sans font on your system, so browser is showing another available font.

    We have a tutorial about Google Fonts: How to Use Google Webfonts in JotForm

    I will let you know if I find some other way to embed Google Webfonts.

  • Profile Image

    Answered by AnaB29 on October 26, 2012 at 06:13 PM

    Thank you Mike!

     

    Silly me...yes, the div class box600 was the problem with the width issue, I've changed it and the form is aligned properly next to our contact info.

     

    However, no I don't have the open sans font installed on my system, but I do have it linked in the head of the page that the form script is pasted into, and all of my other text shows the google fonts whether viewed from my local file or live online, so how come the form doesn't use them as I've requested, in the 'inject css' feature of the form builder?

    I did try earlier copying the just the form part of the source code and pasting it into my webpage.  The form worked fine, but the captcha script wouldn't load and operate.  Also, I planned to create 2 more forms, one of them a payment form.  If I host the forms on my site's server can I still use stripe?

  • Profile Image
    JotForm Support

    Answered by Mike_T on October 26, 2012 at 06:51 PM

    You are welcome, Angela!

    So how come the form doesn't use them as I've requested, in the 'inject css' feature of the form builder? 

    Injected CSS code works, but as far as I understand, embed forms do not have access to linked scripts.

    I did try earlier copying the just the form part of the source code and pasting it into my webpage. The form worked fine, but the captcha script wouldn't load and operate.  

    We can try to check the problem with captcha. Alternatively, you can remove that field from your form and use the source code. Note, that we have built-in system that protects all the forms from internet bots.

    Also, I planned to create 2 more forms, one of them a payment form. If I host the forms on my site's server can I still use stripe?

    Stripe should be fine with the iFrame hosted code. It is our fresh integration, and I think that other embedding options may not work as excepted.

    Thank you for cooperation :)

  • Profile Image

    Answered by AnaB29 on October 26, 2012 at 07:39 PM

    Ok,

    so this time I downloaded the source files and copied the css and js files to my directories and my fonts are working correctly, the form works fine and captcha works too!!

    Here's the url again: http://www.eveandellie.com/new/contact.html

     

    Thanks again for your help.  I'll check into the iFrame Hosted code later when I get to building the order form.

    Angela

  • Profile Image
    JotForm Support

    Answered by Mike_T on October 26, 2012 at 07:41 PM

    We are happy to hear that :)

    Please feel free to contact us anytime!