HOW TO: Include Terms & Conditions on Order/Register Page instead of a link

[wizzy420]

My first contribution, I hope I'm not rehashing. If you comment or suggest changes, I will edit this post to incorporate them.

 

One thing I have learned from working with and owning Internet Service providers (since 1993 or so) is - when you have the T&C on the page that asks for acceptance, it goes over a lot better in a courtroom than if you had a link.

 

This tutorial explains how to get rid of the hyperlink to the T&C, and replace it with the actual T&C text - displayed and scrollable right above the acceptance check mark.

 

You will need to modify two files. Here I show the links to the files in the distribution, but I highly recommend using the custom template system so you can avoid changing files which may change with an upgrade:

 

templates/orderforms/cart/viewcart.tpl

templates/default/clientregister.tpl

 

Backup! Copy each file so if you make a mistake you can revert. I copy mine to originalfilename.tpl.orig

 

Now, apply the following change to both files:

 

1. Open the file with an editor
   
2. Go to the following chunk, near the bottom:

   {if $accepttos}
   <p><input type="checkbox" name="accepttos" id="accepttos"> <label for=accepttos>{$LANG.ordertosagreement} <a href="{$tosurl}" target="_blank">{$LANG.ordertos}</a></label>.<p>
   {/if}

3. First, modify the code to read as:

   {if $accepttos}
   <p>
   <center><textarea rows="20" cols="100" readonly="readonly">
   INSERT YOUR TERMS AND CONDITIONS, ACCEPTABLE USE POLICY HERE
   </textarea></center>
   <p><input type="checkbox" name="accepttos" id="accepttos"> <label for=accepttos>{$LANG.ordertosagreement} <a href="{$tosurl}" target="_blank">{$LANG.ordertos}</a></label>.<p>
   {/if}

4. What you have done is add a text area with a scroll bar containing your sites T&C and AUP. As most T&C/AUP texts are very long, the text box keeps the footprint on the page to a reasonable size.
   
5. Now, get rid of the link to your terms/AUP, and replace it with plain text:

   <a href="{$tosurl}" target="_blank">{$LANG.ordertos}</a>

   should be changed to (feel free to choose your own words):

   Terms and Conditions

6. Remove all of your templates_c/* files (BE CAREFUL! That is templates_c, not templates!)
   
7. Go sign up and see if you are happy
   

[Nathan123]

Hi,

 

Thanks, this works great.

 

Nathan

[brianr]

I'm being lazy not looking it up but I'd recommend one change....

 

There's an attribute you can use with the <textarea> element to make it read-only. If you don't your prospective buyer could delete it, replace it with his own text (eg. "screw you") and never accept your TOS.

 

It's probably also a good idea to include a link to the TOS as well as the text area so there can be no dispute.

[wizzy420]

I'm being lazy not looking it up but I'd recommend one change....

 

There's an attribute you can use with the <textarea> element to make it read-only. If you don't your prospective buyer could delete it, replace it with his own text (eg. "screw you") and never accept your TOS.

 

Well I went to add that in to my post, but apparently this forum doesn't let you edit your posts

[Calinax]

Can you post that change here and ask for Matt to make that change in the first post. so that till the time, I don't have to wait to incorporate it.

[wizzy420]

Can you post that change here and ask for Matt to make that change in the first post. so that till the time, I don't have to wait to incorporate it.

 

Basically, the line that says:

 

<textarea rows="20" cols="100">

 

changes to:

 

<textarea rows="20" cols="100" readonly="yes">

[Roger]

Hmmm... Dreamweaver form builder makes it readonly="readonly". Which does work....

[wizzy420]

Hmm, yes seems to work for me. I guess the question is what is closest to standard, supported by the maximum number of browsers.

[Roger]

The readonly="readonly" works with ie7 and FireFox. Don't know about anything else as that's all I use.

 

On another note, my coding days are long past but I think I'll play around with the template and see if I can put the acceptance checkbox or maybe a button inside the text area itself at the bottom. That way they have to at least scroll all the way to the bottom to accept.

 

You had a great idea with this wizzy420, I love it.

[Roger]

Ok found out you can't add html elements inside the textarea tags of a form. But, by replacing the entire thing with a table with 1 column using this style :

 

style="position: absolute; width: 600px; height: 100px; overflow: scroll; border: 1px solid black;"

 

in side the column tag you get a scrolling box with a 1px black border.

 

Just add your "I Agree" checkbox, button or what ever code at the bottom still inside the td tags. Should work just fine I would think.

 

I know, common knowledge for you coders but not for me. I found an example on the web using a div to do the same thing. But the style works with a column as well and a table is much easier to work with than a div....

[Roger]

Building on wizzy420's great idea. I have dumped the table used a div tag instead and placed the Continue button inside at the bottom of the scrolling window with a note above it that says: "By clicking the "Continue" button below You signify your acceptance of the above terms"

 

A quick look in the clients table and I didn't see a field that that held anything from the original "I accept..." checkbox. Maybe I missed it. But if not, then my idea works. Which is to drop completely the code for the "I accept..." checkbox. Maybe Matt or one of the coders can clarify if that value is needed.

 

so here's what I have ...

 

Editing the same files that wizzy420 mentioned at the beginning of the thread. I also edited the root/portal/clientregister.tpl file.

 

Replace this piece of code

{if $accepttos}

<p><input type="checkbox" name="accepttos" id="accepttos"> <label for=accepttos>{$LANG.ordertosagreement} <a href="{$tosurl}" target="_blank">{$LANG.ordertos}</a></label>.<p>

{/if}

 

with:

{if $accepttos}

<center><div align="left" style="position: float; width: 600px; height: 200px; overflow: scroll; border: 1px solid black;">

 

YOUR TERMS AND STUFF HERE

 

By clicking the "<strong>Continue</strong>" button below<br>

You signify your acceptance of the above terms</center>

<p align="center"><input type="submit" value="{$LANG.ordercontinuebutton}"></p>

</div></center>

{/if}

 

Attached are 2 jpgs of how mine looks.

 

If Matt verifys that that checkbox value is not needed then I'm good to go.

 

Maybe somebody else can get an even better idea from this. I had a lot of fun messing with it.

[Brett]

If you want to have a text area box that can't be edited you just have to use <textarea style="width:100%;text-align:left" rows="5" cols="80" readonly>

 

That is the proper use of the readonly tag. Just readonly by itself.

[ask21900]

Hmmm... Dreamweaver form builder makes it readonly="readonly". Which does work....

 

I'm pretty sure that it's a boolean thing. Any value to the readonly attribute other than the obvious should make it true.

[BionHostStan]

I recall disabled and readonly to only need to be written within <> as a parameter (?) and not in the form of a boolean.

 

BTW... would it be possible to make this an ajax implementation too? Like a little popup window or invisible div that displays (with the continue button).

Pimp my TOS!

[Zorro67]

Thanks for this mod, guys.

 

I particular like the different links inside the box

 

if I read it correctly, it would be possible to add a hack to display different TOS for different products via an {if} statement.

 

Will test & then post any additons, as I know multiple TOS is a question that has come up in the past in other threads

[VuDo0]

Will this mod for work for the latest WHMCS?

 

Regards,

John.

[ChrisGooding]

Although I haven't tested it, I can't see why it wouldn't. After all its a straight forward layout adjustment (ok, sort of), and as long as matt confirms the check box isn't required for any backend stuff, you could theoretically put what you want there.

 

As said, I haven't tested this theory, just going on my understanding. Hopefully someone who has tested it will comment.

[redrat]

This is an excellent augmentation of the WHMCS ordering system and very much welcome besides. Thank you to the originator and all other contributors.

[apollo1]

Thanks for the contrib. As per the screen shots posted by Roger, you already have 3 input fields on the same page (pw, confirm pw & captcha) then you expect the user to scroll down and click continue... all on the same page! From a user standpoint, way too cluttered and confusing. The acceptance (if you want to do it this way) should be on a screen by itself, or at least not the same page where you are asking someone to define a password or supply too many other values.

 

I personally appreciate all the efforts the contrib authors put in, but IMO I think we need to keep more focus on the end-user impact. A lot of people seem quick to slap a new change in as though they are modding some hot rod car or something.

Edited January 6, 2009 by apollo1

[Roger]

Yea that would be asking a lot to scroll down. May even be intimidating for someone not accustomed to web stuff.

 

Implementation with the position of the button at the bottom is not the best. But the theory and practicality of information presentation is good.

 

LOL... might hot-rod days came to an end circa late '60s early '70s.... ooops too much info...

Edited January 6, 2009 by Roger

[AndrewMKP]

Is there any way to directly grab the text from the Terms Page so you do not have to update both this and your Terms page seperately?

 

just a thought...

[Roger]

Possibly you could include it -

{php}
include('your TOS');
{/php}

I guess that would work. I'm not much of a coding fella anymore. Maybe one of the other guys could verify or correct that for you.

[AndrewMKP]

Yeah it would be interesting to see.

 

*Awaiting approval of above code before implementation*

[VicToMeyeZR]

I saw one place that had their TOS as in a light box. It was pretty impressive. Thanks for this code there though, thats a good idea

[AndrewMKP]

Anyone got any idea if this would work?

 

{php}
include('location/tos.php');
{/php}