Form design question

[rboulder]

I'm very much a novice at web design but have been playing around styling forms with css and using fieldset and legend for grouping/labelling.

I want to try and incorporate the submit button onto the form itself - i found an example of the sort of thing I'm trying to achieve here:

form example

I've looked over the source code but the submit code just seems to hang around outside the form itself - I can't see how it's been placed on the bottom border.

Does anyone know how this has been done or any other ways to achieve a similar effect?

Thanks,

rboulder

 

[jhon martan]

A simple script like FormMail (http://www.scriptarchive.com/formmail.html) uses a variable called 'Sort Order', which lets you define how the responses are displayed in the resulting e-mail you get when someone fills the form in. The configuration help page here: http://www.scriptarchive.com/readme/formmail.html#form_config provides more info.

 

[rboulder]

Hi jhon,

thanks for that, but it's more a question about the design. I can get my forms to all work ok, I was just wondering how to get that button actually on the border like the fieldset legend tag at the top of the form.

thanks

 

[FreshFishDesign]

It's all in the CSS

I'm not sure if I've misunderstood your question, but the way to style and place the button in your example is to use CSS.

 

[LouTheDesigner]

Here's the CSS that your example site used for the submit button: Note that they are using absolute positioning.

#search {
background:url("../../images/btn_search.png") no-repeat scroll left top transparent;
border:0 none;
bottom:-23px;
cursor:pointer;
height:49px;
position:absolute;
right:15px;
width:239px;
}

 

[rboulder]

Thanks very much for the info guys.

@FreshFishDesign, thanks but I'm realising I'm quite out of depth with my CSS

@LouTheDesigner - thanks very much for that - I hadn't realised the id=search had set up the position, but did you just write that code from looking at the page? I can't see anything in the source that references it? I can see I'm going to have to read up on this absolute positioning lark

cheers

hang on - I just remembered firebug and it's showing all the CSS

 

[LouTheDesigner]

hang on - I just remembered firebug and it's showing all the CSS

You got it! Happy 4th!

-Lou

 

[rboulder]

Cheers Approachnet,

it's definitely an image but I wasn't sure how the whole thing had been positioned

But I have another question now about the form - I'm trying to do a similar two part form - ie. if you press submit then the data you enter carries on over into a section on the second page. How do you do that?

cheers,

 

[sysgenmedia]

Hi rboulder,

You'll need to do a bit of php coding to get access to the variables to carry them over.

Depending on whether you're using GET or POST on your form, either of these pages will be helpful.

http://www.php.net/manual/en/reserved.variables.get.php
http://www.php.net/manual/en/reserved.variables.post.php

You can use either $_GET or $_POST to read the variables submitted from step one and either stick them into hidden fields on step 2 or pre-fill the fields with data if you're still displaying them.

Keep in mind that there's inherently some security risk when dealing with user input. Make sure to sterilize properly, especially if you intend to insert anything entered into a database.

The php.net manual is incredibly helpful for this sort of thing. Make sure to read through the comments as there's usually helpful snippets of code in them.

Best,
Nathan

 

[rboulder]

Hi sysgenmedia,

thanks very much for that - you had prempted me on the data side and that's the bit I'm stuck on now, lol.

I can transfer data from the first form to the second and display it also on the second page using the $_Post function, but the problem I'm getting is this:

when i press the "submit" button on the first form, the second page comes up but the second form has been triggered as well. This causes it to immediately come up with errors about incomplete fields. I just want to send the data from form 1 to form 2, then fill-in form 2 and then post, but form 2 is being posted before i get to it.

Not sure if I've explained it that well

thanks, rboulder

 

[sysgenmedia]

Well, that would depend on how the second page's errors are handled. Are they triggering php-based errors or is it some kind of javascript?

It shouldn't be auto-posting from the 2nd page unless you specifically told it to do so, so my guess is that there's either a php or javascript field check running on the load of the second page that's finding the blank fields.

Best,
Nathan

 

[rboulder]

Hi Nathan,

thanks for that. It's php based errors, but I've got around that by naming the first button submit1. However, the problem now is that the second form doesn't stay on the same page - it always heads back to the index.php page when submitted.

So now I have a form on the index page which sends you to a second form where the data is carried through, but when the second form is completed (or not - errors are handled in the same way), it returns back to the index page. If the second form is also there then the errors or success messages come up, but otherwise nothing.

cheers,
rboulder