I would like to substitue the following code:

Code: Select all

<cms:input class="btn4 left" type="submit" value="Submit" name="submit"/>

For a CSS powered button using this code:

Code: Select all

<a class="btn4 right" href="#"><span>Submit</span></a>

Any ideas on how I can do this please?

[KK]

Hi,

The regular <input type='submit'> form element will automatically submit the form when clicked. As opposed to it, if you use the

Code: Select all

<a class="btn4 right" href="#"><span>Submit</span></a>

markup that you mentioned, you'll have to use JavaScript to make it submit the form.
You can modify the code this way -

Code: Select all

<a class="btn4 right" href="javascript:document.myform.submit();"><span>Submit</span></a>

where 'myform' is the 'name' of your form.
or

Code: Select all

<a class="btn4 right" href="document.forms['myform'].submit();"><span>Submit</span></a>

where 'myform' is the 'id' of your form.

I'd suggest you try the <button> element that can be styled very conveniently e.g.-

Code: Select all

<button class="btn4 right" type="submit"><span>Submit</span></button>

Hope this helps.

Hhmm, I must be doing something wrong.

I still can't get this to work how I would like it to do. Maybe the javascript version would be the better solution. The <button> tag just remains grey instead of any other colour, regardless of the CSS I use.

[KK]

Use the Javascript version if that is what works for you.
Just make sure to add a <noscript> block within the form for non-javascript enabled visitors -

Code: Select all

<noscript>
   <input type="submit" value="Submit">
</noscript>

Where would I get the form ID or name from? I have used the tutorial as my basis and styled accordingly.
The form starts off with:

Code: Select all

<cms:if k_is_commentable >
   <div class="comment-form" >
      <cms:form method="post" class="k_form">

Is there a couch snippet to get the form ID??

[KK]

Simply add the parameters to the cms:form tag e.g.-

Code: Select all

<cms:form method="post" class="k_form" name="myform" id="myform" >