How to change the height of the message field?

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?

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 

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?

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.

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

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.

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.  

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;

}

}

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.

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. 

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.