zem_contact_reborn 4.0.3.20

opto · 2011-09-21 12:38:43

Hello,
I’m using zem_contact_reborn as a licence agreement form, but I cannot put the licence text in a textarea: linebreaks are misintpreted an are displayed as raw html. What should I do?

merz1 · 2011-09-21 13:12:24

opto No time to check the solution but attribute escape="" might help.

M_i · 2011-09-21 13:21:57

opto wrote:

Hello,
I’m using zem_contact_reborn as a licence agreement form, but I cannot put the licence text in a textarea: linebreaks are misintpreted an are displayed as raw html. What should I do?

Are you sure you need to put the licence text in a textarea? Do users need to edit the text? Wouldn’t it be sufficient to display the licence text with a form containing a ‘do you accept this licence agreement’ checkbox + name + email below?

opto · 2011-09-21 15:20:03

The licence text is long, and the textarea help reducing the page length.
I also tried to use a plain <textarea></textarea> tag inside an article, but the textarea field then contains the text converted sort of like this:

“”
</p>

<p><span class=“caps”>LICENCE TEXT</span> <span class=“caps”>

“”
etc…
this is a bit frustrating, what can I do?

johnstephens · 2011-09-21 15:35:29

It sounds like you could accomplish the same thing in CSS by declaring a height for the containing element, along with overflow:scroll.

Last edited by johnstephens (2011-09-21 15:36:22)

opto · 2011-09-21 15:43:15

Thank you, this is beyond my capabilities though :(

johnstephens · 2011-09-21 15:50:23

I don’t know what your containing element might be, but let’s say you use a div, like so:

<div class="tos">
My lengthy terms of service...
</div>

Then, in your stylesheet, you could add this:

.tos {
height: 20em;
overflow: scroll;
}

You might need to adjust the height value based on the media and other design needs, but that should work.

M_i · 2011-09-21 15:50:36

opto wrote:

The licence text is long, and the textarea help reducing the page length.

That’s what I thought. Textareas are for text input from the user, such as comments or questions in contact forms. If you just want to put a large amount of text in a small space, you need to use a css like johnstephens says.

You specify the height and width of the box that your licence text will go into, and if there is any overflow (text that doesn’t fit into that space), there’ll be a scrollbar to show the rest of the text.

<div class style="height:100px; width:200px; overflow:scroll;">
   <p><span class="caps">LICENCE TEXT</span></p> 
   <p>etc...</p>
</div>

and after that, you can insert the zem_contact form so users can accept the agreement.

The height and width properties above obviously define the size of the box (besides pixels you can also use another unit such as % or em, which corresponds to the font size). The overflow property ‘scroll’ ensures there are always both horizontal and vertical scrollbars, even if the text would fit in the defined space. You could also set it to overflow:auto – in that case you’ll only get a vertical scrollbar when there is indeed more content to scroll to.

When you use a div like this inside an article, you don’t have to use HTML for your licence text, you can also just use Textile and format the text just like you would any other article text. So then it’d be something like:

<div class style="height:100px; width:200px; overflow:scroll;">
h2. LICENCE TEXT

Bla bla *bla*. Bla bla bla.

Etc.
</div>

Edit – ah, few seconds too late to be helpful :) – anyways, see johnstephens’ post above – does the exact same thing as I’ve described here, just with the css in the stylesheet instead of inline.

Last edited by M_i (2011-09-21 16:28:18)

opto · 2011-09-21 16:26:46

Thank you, this is what I needed!

M_i · 2011-09-21 17:15:59

opto wrote:

Thank you, this is what I needed!

I got some brilliant advice from ruud yesterday, and I always try to pay it forward;)

dreamer · 2011-09-27 05:12:55

is there a way to style the color of the text inside the fields?

it seems that .zemText and .zemTextArea controls the color of both the text outside the field and inside the field, but i just want to change the color inside the field.

here is my form here

Last edited by dreamer (2011-09-27 05:13:24)

bici · 2011-09-27 05:18:47

dreamer wrote:

here is my form here

one of the nicest looking forms i have seen. Can you share the zem_contact code?

tye · 2011-09-27 05:25:13

Try these (but don’t use red)

input.zemText, input.zemTextarea{
background-color: red;
}

label.zemText , label.zemTextarea  {
background-color: none;
}

dreamer · 2011-09-28 07:04:34

Thanks Tye. Though, I don’t believe input.zemTextarea changes the color for anything. I tried isolating that element and it doesn’t affect the text inside the field.

Though, this will;

#Comments.zemTextarea {color:#000}

Bici- thanks for the compliment. Here is the code;

<txp:zem_contact_text break="" label="Full Name" name="Fullname" required="1" min="2" />
<txp:zem_contact_text break="" label="Company" name="Company" required="1" min="3" /><br />
<txp:zem_contact_text break="" label="State Resale Sales Certification #" name="Resale" required="1" min="3" />
<txp:zem_contact_text break="" label="Fed ID#" name="Fed" required="1" min="3" /><br />
<txp:zem_contact_email break="" required="1" />
<txp:zem_contact_text break="" label="Phone #" name="Phone" min="7" max="15" required="0" /><br />
<txp:zem_contact_text break="" label="Address" name="Address" required="1" min="3" /><br />
<txp:zem_contact_text break="" label="City" name="City" required="1" /> 
<txp:zem_contact_text break="" label="State" name="State" required="1" />
<txp:zem_contact_text break="" label="Zipcode" name="Zipcode" required="1" min="5" /><br />
<txp:zem_contact_text break="" label="Best time to call" name="Best" required="1" min="3" /><br />
<txp:zem_contact_textarea label="Your Comments" name="Comments" cols="60" rows="8" default="If requesting a catalog or price sheet, please list the specific product line." /><br />
<txp:zem_contact_submit label="Submit" />

jakob · 2011-09-28 08:12:10

I tried isolating that element and it doesn’t affect the text inside the field.

Though, this will…

Tye is in principle correct in that the class is applied to label and element so you need to address each html element separately if you want to style them differently, he just left out the textarea:

input.zemText {
   color: grey;
}

textarea.zemTextarea {
   color: grey;
}

label.zemText,
label.zemTextarea  {
   color: white;
}

On a related note, your might want to consider using :focus instead of :hover for the change of background color: hover responds to the mouse position, not where the cursor is, so with :hover a different field may appear highlighted as the one where you can currently type. :focus highlights the one the cursor is in regardless of where the mouse pointer happens to be.

Textpattern CMS

Textpattern CMS support forum

#1081 2011-09-21 12:38:43

Re: zem_contact_reborn 4.0.3.20

#1082 2011-09-21 13:12:24

Re: zem_contact_reborn 4.0.3.20

#1083 2011-09-21 13:21:57

Re: zem_contact_reborn 4.0.3.20

#1084 2011-09-21 15:20:03

Re: zem_contact_reborn 4.0.3.20

#1085 2011-09-21 15:35:29

Re: zem_contact_reborn 4.0.3.20

#1086 2011-09-21 15:43:15

Re: zem_contact_reborn 4.0.3.20

#1087 2011-09-21 15:50:23

Re: zem_contact_reborn 4.0.3.20

#1088 2011-09-21 15:50:36

Re: zem_contact_reborn 4.0.3.20

#1089 2011-09-21 16:26:46

Re: zem_contact_reborn 4.0.3.20

#1090 2011-09-21 17:15:59

Re: zem_contact_reborn 4.0.3.20

#1091 2011-09-27 05:12:55

Re: zem_contact_reborn 4.0.3.20

#1092 2011-09-27 05:18:47

Re: zem_contact_reborn 4.0.3.20

#1093 2011-09-27 05:25:13

Re: zem_contact_reborn 4.0.3.20

#1094 2011-09-28 07:04:34

Re: zem_contact_reborn 4.0.3.20

#1095 2011-09-28 08:12:10

Re: zem_contact_reborn 4.0.3.20

Board footer