Contact Form Plugin Question

[MadFly]

Hi, sorry to ask, but I have searched for a while now, and cannot find what I am looking for on this forum. I would like to edit the look of the contact form.

Like move the Name, Email and Homepage to the left side of the text areas, and I would also like to add something to that, for example
Name: {text area} *
Email: {text area} *
Homepage: {text area}(optional)

Things in red I would like to add, and things in blue I would like to move. I do not understand enough of the plugin_contactform.tpl code to modify anything there.

[MadFly]

ooo I forgot this one...

I would also really like to be able to add a from email address. Currently it shows that the email is sent from root@hostingserver.domain which is not right.

I hope there is somewhere a general location where one could change all these sort of options.

[yellowled]

Like move the Name, Email and Homepage to the left side of the text areas

That one we can probably do with some CSS statements. An URL to your current contact form would be good, though.

and I would also like to add something to that, for example
Name: {text area} *
Email: {text area} *
Homepage: {text area}(optional)

Things in red I would like to add, and things in blue I would like to move. I do not understand enough of the plugin_contactform.tpl code to modify anything there.

That part definitely needs some adjustments in plugin_contactform.tpl, but they're not too hard to manage once we tackle the other stuff.

I would also really like to be able to add a from email address. Currently it shows that the email is sent from root@hostingserver.domain which is not right.

Yes, it is. Technically, these emails are sent by the server your blog is hosted on. You should still be able to reply to them with any properly configured email client, though.

YL

[MadFly]

I found half of it. I really wonder why do I usually find something after I post it. I actually do search before I post. Could be tiredness or something

Below is the code of the contact form, after I have edited it a little bit. All those   is there to re-align the text areas of the Name, Email and Homepage.

Code: Select all

            <p><label for="author"><strong>{$CONST.NAME}</strong></label>                             
			   <input type="text" id="author" name="serendipity[name]" value="{$commentform_name}" size="22" tabindex="1" />
               </p>
            <p><label for="email"><strong>{$CONST.EMAIL}</strong></label>                             
			   <input type="text" id="email" name="serendipity[email]" value="{$commentform_email}" size="22" tabindex="2" />
               </p>
            <p><label for="url"><strong>{$CONST.HOMEPAGE}</strong> (optional)</label> 
			   <input type="text" id="url" name="serendipity[url]" value="{$commentform_url}" size="22" tabindex="3" />
               </p>

            <p><textarea rows="10" cols="100%" id="serendipity_commentform_comment" name="serendipity[comment]" tabindex="4">{$commentform_data}</textarea></p>
               <br />
               <!-- This is where the spamblock/Captcha plugin is called -->
               {serendipity_hookPlugin hook="frontend_comment" data=$commentform_entry}

[yellowled]

Below is the code of the contact form, after I have edited it a little bit. All those   is there to re-align the text areas of the Name, Email and Homepage.

Oh, my. This is definitely not how you want to do it.

For the pure alignment of labels and inputs, you can actually go with the original plugin_contactform.tpl. All you need to edit in the i3theme's style.css is this:

Code: Select all

#commentform label {

	font-weight: bold;

	color:#666;

	font-size: 100%;

	padding-left: 5px;

}

to

Code: Select all

#commentform label {
	font-weight: bold;
	color:#666;
	font-size: 100%;
	float: left;
        width: 100px;
}

and you're done. I strongly recomment not to use the deprecated font tag for the ... well, at all, actually. Instead, you should use a <span class="mandatory">*</span> and <span class="optional">(optional)</span> instead and format them using the s9y.css like this:

Code: Select all

.mandatory, .optional { color: red; }

You got the point right where to insert those, though. But I strongly suggest not to use   for formatting purposes, that's just not what it's supposed to to

YL

[MadFly]

cool!

I will make those changes tonight. I thought the   was the wrong idea, but at least it worked in a way. But I reckon that this could cause future problems.

Will see how it goes tonight.

Thanks again!

[yellowled]

Oops, I forgot: You might want to throw in a

Code: Select all

#commentform p { clear: left; }

YL

[MadFly]

Nice! Shall I throw that in with the style.css or s9y.css?

I did it in the style.css. Cannot see much of a difference, but if you said I should, I probably should.

[yellowled]

Shall I throw that in with the style.css or s9y.css?

Actually, s9y.css would be cleaner. I usually use style.css for the original styles and s9y.css for any changes related to the port when I do theme ports for s9y (like this one).

Cannot see much of a difference

Sort of a best practices kind of thing. Google "clearing floats" for more details

YL

[MadFly]

Excellent! Thanks