Canvas Support

Multiple lines in contact form

7 replies · opened Apr 7, 2016

Sshui726Apr 7, 2016

There is only one line in the contact form. It confuses users when they pressed enter key because all content disappeared. How can I show multiple lines in the "Your Message" box? Thx.

SSemicolon WebSTAFFApr 7, 2016

Hello,

This Function is not Available with Canvas by Default but it is Definitely Possible by using an External Plugin. Please consider using this File https://www.dropbox.com/s/adrimrrq4e8z0k3/one-page-index.html?dl=1 .

Please make sure that you have Downloaded and Included this Plugin in your js File or it to work properly.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Sshui726Apr 8, 2016

I downloaded and it's a "one-page-index.html" file. How to use it?

SSemicolon WebSTAFFApr 8, 2016

Hello,

Consider Editing your Existing File. Please Follow the Instructions below:

  • Add the following CSS Code in the Document <head>:

textarea {
	box-sizing: border-box;
	min-height: 48px;
	overflow-x: hidden;
}

Please make sure that you have Downloaded and Included this Plugin in your js File or it to work properly.

  • Add the following JS Script at the bottom of the Page just after the js/function.js Linking:

	jQuery('textarea.js-auto-size').textareaAutoSize();

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Sshui726Apr 9, 2016

I follow your instruction to add the code in index.html, also copied the js file into the js folder. But my page is not working. Could you please have a look? Anything I missed? Thx.

http://www.pulse-our-promise.com/2016/

SSemicolon WebSTAFFApr 9, 2016

Hello,

We have just checked out your Website and there are still 2 issues:

  • Make sure that you always add the Inline <style> Codes just before the Document </head> ends to make sure that it does not get overwritten by the Default Styles:

textarea {
	box-sizing: border-box;
	min-height: 48px;
	overflow-x: hidden;
}
  • You missed this point from our Previous Reply:
Add the **.js-auto-size** Class to the **** Field in your Contact Form.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Sshui726Apr 11, 2016

Thx a lot.

  1. I moved the <style> tag to right before </head>.

  2. I already added it, please see below. However it still does not works. 

             &lt;textarea

class="required sm-form-control border-

form-control" id="template-contactform-

message js-auto-size" name="template-

contactform-message" rows="7" cols="30"

placeholder="查詢內容"></textarea>

SSemicolon WebSTAFFApr 11, 2016

Hello,

We have just checked out your Website and found out that you have added the .js-auto-size Class incorrectly in the ID attribute of the <textarea>. Please add it in the class attribute. It should look something like this:

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard