How to change the height of the message field?

  • Profile Image
    jurullc
    Asked 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?

  • Profile Image
    Chriistian
    Answered 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
    jurullc
    Answered 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
    Jan
    Answered 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
    jurullc
    Answered 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
    david
    Answered 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
    jurullc
    Answered 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
    Chriistian
    Answered 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
    jurullc
    Answered 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
    Kiran
    Answered 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
    Kiran
    Answered 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.