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

    How to change the height of the message field?

    Asked by jurullc on May 31, 2016 at 07:05 PM

    I have injected CSS to increase the height of my message field

     

    #input_12 {

    height: 150px !important;

    }

     

    Unfortunately, the "message" text doesn't align with the envelope.  Any advice as to what's going on?

    Page URL:
    http://367.a52.myftpupload.com/contact/

    height message changing the height Injected CSS increase
  • Profile Image
    JotForm Support

    Answered by Chriistian on May 31, 2016 at 10:42 PM

    I checked your form and it seems that you are using an text box instead of using text-area. If you want to move your text on top, I would suggest to use a text-area instead of using text-box.

    Then inject this css to customize it:

    #input_14 {

        padding-left: 60px;

        font-size: 20px;

    }

    Here's a demo so you can see it in action: https://form.jotform.com/61518281124955 

  • Profile Image

    Answered by jurullc on June 01, 2016 at 10:02 AM

    I see the demo; however, in your demo, you are missing the envelope icon that should appear to the left of the message.  Does this make sense?

  • Profile Image
    JotForm Support

    Answered by Jan on June 01, 2016 at 12:07 PM

    You can clone the cloned form (https://form.jotform.com/61518281124955) created by Christian and then inject this custom CSS code.

    #cid_14:before {
    content: url('https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/46354/310582/aPYZtEm9BtnDnE6/Screen%20Shot%202014-09-26%20at%203.54.43%20PM.png');

    position: absolute;
    top: 17px;
    left: 45px;
    width: 46px;
    height: 38px;
    }

    #input_14 {
    padding-top: 10px !important;
    font-size : 18px !important;

    font-family : 'Muli' !important;
    }

    After that, please remove the other Message field in the form. Here's the result:

    Related guides:
    How-to-clone-an-existing-form-from-a-URL
    How-to-Inject-Custom-CSS-Codes

    Hope that helps. Thank you.

  • Profile Image

    Answered by jurullc on June 01, 2016 at 05:34 PM

    So why is the "@" symbol missing next to "email".  Also, it appears that the contact form doesn't appear once that page clicked on. I have to refresh it before it appears.  Here's the updated form, https://form.jotform.com/61526315337958

  • Profile Image
    JotForm Support

    Answered by david on June 01, 2016 at 05:48 PM

    The image URL's are http:// rather than https://.  If the form is loading using the secure https:// url, the images that are not loading from secure sources will not be loaded as mixed content.  However, if you load the form from the http:// URL, all images and such will load without issue:

    https://secure.jotform.com/61526859868980

    http://form.jotform.com/61526859868980

    Replace the image with one from a secure source or use the http link to the form and the image should then show without issue.

  • Profile Image

    Answered by jurullc on June 01, 2016 at 10:27 PM

    I am kind of confused. As to resolution to the last concern. So, am I to use the JotForm with http:// or https://. 

     

    Also, on mobile devices the icons look weird.   Take a look at the "message" section.  

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 01, 2016 at 11:47 PM

    Since the @ image is using http:// you will need to also use http:// for your jotform. Here's a sample url: http://http://www.jotform.com/61526315337958. Since we are using http, the @ image can be seen in your form.

    As for the icons, you can inject the custom css below to align the icons on mobile:

    @media only screen and (max-device-width: 480px) {

    #cid_1:before, #cid_10:before, #cid_4:before, #cid_3:before, #cid_14:before{

    top: 28px;

    }

    }

  • Profile Image

    Answered by jurullc on June 02, 2016 at 09:55 AM

    I did inject the css however, the mail icon is still cutting off the line around the message area. This is on the mobile devices.

  • Profile Image
    JotForm Support

    Answered by Kiran on June 02, 2016 at 11:51 AM

    I see that there is some CSS code added to your JotForm which I think there is a conflict. I'm checking it and get back to you once I find something helpful to you.

     

    Thank you for your patience. 

  • Profile Image
    JotForm Support

    Answered by Kiran on June 05, 2016 at 02:10 PM

    Sorry for the delay. Please try changing the CSS code provided by our colleague Chriistian to below:

    @media only screen and (max-device-width: 480px) {

    #cid_1:before, #cid_10:before, #cid_4:before, #cid_3:before, #cid_14:before {

       top: 17px;

    }

    #cid_14:before {

       top: 30px;

    }

    }

    Also, please change the form width to 650px from the Form Designer.

    The form with the changes above should be displayed in the phone as shown below:

    Please check and let us know if you need any further assistance. We will be happy to assist.