GetSimple Support Forum

Full Version: Custom forms
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
What's the best practice for creating a custom form in GS? I've checked out p01-contact, but the problem I've run into with that is that there are limited options for the form layout -- unless I'm missing something. I'm not trying to do anything complicated. Nothing dynamic, just a form with a few text fields, some checkboxes, and a textarea that emails the form values in an HTML email format that I can control. Pretty basic stuff.

The biggest problem I've run into so far is with a series of checkboxes. I don't know how to get a line break after each so they appear as...

[ ] cb1
[ ] cb2
[ ] cb3

...instead of...

[ ] cb1 [ ] cb2 [ ] cb3

What I'm really hoping is that someone can tell me I don't need to use p01-contact, that there's form handling built in to GS and I can lay it out any way I want, but if there is, I missed it.

TIA!
jjeffers Wrote:I've checked out p01-contact, but the problem I've run into with that is that there are limited options for the form layout -- unless I'm missing something.

yes, you missed something.

You can style p01-contact form like you want:
an example from get-simple.de

Code:
/* ================= Contact Formular =================== */
/* ======= Form ========== */

.p01-contact {
    position:relative;
    width: 500px;
    padding: 20px;
    margin-left:-5px;
    background: transparent;
    margin-bottom:20px;
    overflow:hidden;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/PIE.htc);
}
.p01-contact .field{margin-bottom:10px}
.p01-contact .field.captcha{float:left}
.p01-contact .text input{width:80%}
.p01-contact .captcha input{width:160px;}
.p01-contact textarea{width:80%; height:100px}
.p01-contact .text input,
.p01-contact .captcha input,
.p01-contact textarea
{
    background-color:#FFF;
    border:1px solid #DDD;
    font-size:12px;
    padding:5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(/PIE.htc);
}
.p01-contact .submit{
    position:absolute;
    bottom:20px;
    right:20px;
    -moz-border-radius:10.2em 10.2em 10.2em 10.2em;
    -moz-box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.5);
    background-color:#666;
    border-bottom:0.2em solid #666666;
    border-width:1px 1px 0.2em;
    color:#FFF;
    cursor:pointer;
    font-size:1em;
    line-height:1;
    padding:0.3em 0.6em;
    text-shadow:0 0 0.1em #666;
    }


the form sits in the class .p01-contact and you add the relevant CSS to your theme's style-file as we did

see also here: http://get-simple.info/forum/topic/1758/...m-question

and your question to position checkboxes:
1) this is a CSS question so some CSS tutorials might be a better place to search
2) check that checkboxes are not defined as "display:block" but as "display:inline" or "inline:table-cell"...

Quote:What I'm really hoping is that someone can tell me I don't need to use p01-contact, that there's form handling built in to GS and I can lay it out any way I want, but if there is, I missed it.

Sorry, GS comes with form-handling ;=) Because it generates websites and links to CSS-files in the header ;=)

I suggest you learn a little about CSS, and you will be able to manage everything like you want
I haven't used the GS form plug-in. I already had two forms I generated, in use on my old site I wanted to keep them plus save myself time. So I added them to pages in an Iframe.

This works very well and show the versatility of GS . I am not saying don't use the plug-in by any means, it is simply what I already had I wanted to keep.

I love the variation and flexability of GS