Buy Now
Sign in

Request Info form with CSS

jamesls , September 27 2007, 08:14
J
jamesls 1
September 27 2007, 08:14 #2490
Hi there This is my first post here.

Basicaly I took the form posted in "Optical Contact / Request Information form by laurel" and altered it to suite my needs and added some CSS styling. Hope you guys like it and can find a use for it somewhere.

<style type="text/css">
<!--
legend
{
color:#000000;
background:#6699FF;
border: 1px solid #781351;
padding: 2px 6px;
}
fieldset
{
border: 1px solid #781351;
width: 90%;
background-color:#E9FEFE

}
label2
{
width: 16em;
text-align: right;
margin-right: 0.5em;
display: block;
}
label1
{
width: 8em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
select {
width: 8em;
text-align: left;


}

input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351;
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9;
}
-->
</style>
</head>

<body>
<fieldset>
<legend>JLS Design Details</legend><br/>
<label2 for="contact">Contact: **************</label2><br/>
<label2 for="tel">Telephone: **************</label2><br/>
<label2 for="mob">Mobile: **************</label2>
</fieldset><br/>
<fieldset>
<legend><strong>Your Details</strong></legend>
<p><label1 for="name">Your Name:</label1><input type="text" name="name" size="40"></p>
<p><label1 for="email">E-mail:</label1><input name="email" type="text" size="40">
<p><label1 for="dayphone">Day Phone:</label1><input type="text" name="day_phone" size="20"> </p>
<p><label1 for="evephone">Evening Phone:</label1><input type="text" name="night_phone" size="20"></p>
</p>
</fieldset><br />
<fieldset>
<legend><strong>When would you like this project to begin?</strong></legend>


<br/>
<label2 for="month"><strong>Month</strong>
<select NAME="month" id="ff_elem203" size="1">
<option SELECTED VALUE="none">Select Month</option>
<option VALUE="Jan">Jan</option>
<option VALUE="Feb">Feb</option>
<option VALUE="Mar">Mar</option>
<option VALUE="Apr">Apr</option>
<option VALUE="May">May</option>
<option VALUE="Jun">Jun</option>
<option VALUE="Jul">Jul</option>
<option VALUE="Aug">Aug</option>
<option VALUE="Sep">Sep</option>
<option VALUE="Oct">Oct</option>
<option VALUE="Nov">Nov</option>
<option VALUE="Dec">Dec</option>
</select></p></label2>
<br/>
<label2 for="year"><strong>Year</strong>
<select name="select" id="year" size="1">
<option value="2007" selected="selected">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>
</label2>

</fieldset><br/>
<fieldset>
<legend><strong>Your Enquiry is about:</strong></legend>
<div align="left">
<table border="0" width="90%" id="table4" align="left">
<tr>
<td width="150">
<p><input TYPE="checkbox" NAME="ff_nm_Website
  • " VALUE="info" id="ff_elem193">
    <label id="ff_lbl193" for="ff_elem193">Website Design </label>
    </p>
    <p><input TYPE="checkbox" NAME="ff_nm_NewMedia
  • " VALUE="info" id="ff_elem194">
    <label id="ff_lbl194" for="ff_elem194">New Media </label>
    Design</td>
    <td width="164">
    <p><input TYPE="checkbox" NAME="ff_nm_SoftwareBox
  • " VALUE="info" id="ff_elem195">
    <label id="ff_lbl195" for="ff_elem195">SoftwareBox</label>
    Design</p>
    <p><input TYPE="checkbox" NAME="ff_nm_Print
  • " VALUE="info" id="ff_elem196">
    <label id="ff_lbl196" for="ff_elem196">Print Design (eg Poster)</label>
    </td>
    <td width="304">
    <p><input TYPE="checkbox" NAME="ff_nm_Logo
  • " VALUE="info" id="ff_elem197">
    <label id="ff_lbl197" for="ff_elem197">Logo</label>
    Design</p>
    <input TYPE="checkbox" NAME="ff_nm_Other
  • 1" VALUE="info" id="ff_elem199">
    <label id="ff_lbl199" for="ff_elem199">Other Information or Questions: </label>
    <p></td>
    </tr>
    </table>
    </div>
    <p></p>
    <p><textarea COLS="50" NAME="other_info" id="ff_elem192" style="height: 63; width: 612" rows="4"></textarea>
    </p>
    </fieldset><br/>
    <fieldset>
    <legend><strong>The best way to contact you is</strong></legend>

    <input type="checkbox" name="contact" value="phone"> By Telephone
    <input type="checkbox" name="contact" value="email"> By Email </p>
    </fieldset><br/>
    <fieldset>
    <legend><strong>Use the space below for additional questions & comments:</strong></legend>
    <p><textarea COLS="50" NAME="other_info0" id="ff_elem205" style="height: 63; width: 612" rows="4"></textarea>
    </p>
    </fieldset><br/>
    <fieldset><legend><strong>AntiSpam</strong></legend>
    <div align="center">{imageverification}</div>
    </fieldset>
    </p>
    <p align="center">
    <input type="submit" value="Send to JLS Design" name="Submit" style="font-weight: bold">
    <input type="reset" value="Reset (cancel form)" name="reset" style="font-size: 8pt">
    </p>


    Example of what this form looks like:


    Hope it is ok.

    Post edited by: jamesls, at: 2007/09/27 04:15<br><br>Post edited by: jamesls, at: 2007/09/27 04:16
    admin 28
    September 27 2007, 10:04 #2494
    Thanks very much James!!

    Max
    Max
    If your main question got answered then please mark the answer using the button!
    Did you try the new ChronoForms7 ? if yes then please send us your comments!!
    O
    ozzy 6
    September 30 2007, 07:22 #2541
    Thank you very much its great.. And thanx for sharing it..
    L
    laurel 29
    October 17 2007, 02:45 #2850
    :P Very Nice!
    A
    abasel 148
    March 06 2008, 13:23 #6289
    I can't see how you get the input field on its own line above the image or how you put the message between the two. Also how do you get the reload image option

    GreyHead 64
    March 06 2008, 13:34 #6290
    Hi abasel,

    There's a way to do a refresh button in this FAQ, and in the same piece of code you'll see that you can swap around the elements of the block. Note that this will apply to all your forms though!

    Bob
    ChronoForms technical support
    If you'd like to buy me a coffee or two, thank you very much
    J
    johnsmith 13
    May 16 2008, 03:27 #8469
    Hi there,
    I am new to this form and Chrono, please help me with this form. I have modified the form Jamesls posted but was unable to make it work. I am using it to collect general information about the player, names address etc.

    Any help would much appreciated. By the I don't have any javascript with the form.

    thanks
    John.

    here is the form code:
    <style type="text/css">

    legend
    {
    color:#000000;
    background:#6699FF;
    border: 1px solid #781351;
    padding: 2px 6px;
    }
    fieldset
    {
    border: 1px solid #781351;
    width: 90%;
    background-color:#E9FEFE

    }
    label2
    {
    width: 16em;
    text-align: right;
    margin-right: 0.5em;
    display: block;
    }
    label1
    {
    width: 8em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
    }
    select {
    width: 8em;
    text-align: left;


    }

    input
    {
    color: #781351;
    background: #fee3ad;
    border: 1px solid #781351;
    }

    .submit input
    {
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9;
    }

    </style>


    <fieldset>
    <legend><strong>Team Registration Form</strong></legend>
    <p><label1 for="name">Season:</label1><input type="text" name="name" size="40"></p>
    <p><label1 for="name">Team Representative:</label1><input name="text" type="text" size="40">
    <p><label1 for="dayphone">Phone:</label1><input type="text" name="day_phone" size="40"> </p>
    <p><label1 for="email">Team Eamil:</label1><input type="text" name="email" size="40"></p>
    <p><label1 for="name">Team Name:</label1><input name="text" type="text" size="40"></p>
    </fieldset><br />
    <fieldset>
    <legend><strong>Roster</strong></legend>
    <p><label1 for="name">1</label1><input name="text" type="text" size="40">
    <p><label1 for="name">2</label1><input name="text" type="text" size="40">
    <p><label1 for="name">3</label1><input name="text" type="text" size="40">
    <p><label1 for="name">4</label1><input name="text" type="text" size="40">
    <p><label1 for="name">5</label1><input name="text" type="text" size="40">
    <p><label1 for="name">6</label1><input name="text" type="text" size="40">
    <p><label1 for="name">7</label1><input name="text" type="text" size="40">
    <p><label1 for="name">8</label1><input name="text" type="text" size="40">
    <p><label1 for="name">9</label1><input name="text" type="text" size="40">
    <p><label1 for="name">10</label1><input name="text" type="text" size="40">
    <p><label1 for="name">11</label1><input name="text" type="text" size="40">
    <p><label1 for="name">12</label1><input name="text" type="text" size="40">
    <p><label1 for="name">13</label1><input name="text" type="text" size="40">
    <p><label1 for="name">14</label1><input name="text" type="text" size="40">
    <p><label1 for="name">15</label1><input name="text" type="text" size="40">
    <p><label1 for="name">16</label1><input name="text" type="text" size="40">
    <p><label1 for="name">17</label1><input name="text" type="text" size="40">
    <p><label1 for="name">18</label1><input name="text" type="text" size="40">
    <p><label1 for="name">19</label1><input name="text" type="text" size="40">
    <p><label1 for="name">20</label1><input name="text" type="text" size="40">
    <br/>

    <fieldset>
    <legend><strong>The best way to contact you is</strong></legend>

    <input type="checkbox" name="contact" value="phone"> By Telephone
    <input type="checkbox" name="contact" value="email"> By Email </p>
    </fieldset><br/>
    <fieldset>
    <legend><strong>Use the space below for additional questions & comments:</strong></legend>
    <p><textarea COLS="50" NAME="other_info0" id="ff_elem205" style="height: 63; width: 612" rows="4"></textarea>
    </p>
    </fieldset><br/>
    <fieldset><legend><strong>AntiSpam</strong></legend>
    <div align="center">{imageverification}</div>
    </fieldset>
    </p>
    <p align="center">
    <input type="submit" value="Send to Oromia Sports" name="Submit" style="font-weight: bold">
    <input type="reset" value="Reset (cancel form)" name="reset" style="font-size: 8pt">
    </p>
    GreyHead 64
    May 16 2008, 09:05 #8473
    Hi John,

    When you say it doesn't work can you say a bit more please? What doesn't work? If you turn debug on what do you see?

    Bob

    Max: I can't get this to show the code!!!
    ChronoForms technical support
    If you'd like to buy me a coffee or two, thank you very much
    R
    romanum 3
    May 16 2008, 12:52 #8482
    I have the same problem with this code,debug is on,but shows me no errors.

    When i copy this code in the html area and i go to "Save" the component dont save the full code.only a piece of it.
    <fieldset> <legend><b>Bei Fragen:</b></legend><br/> 
    <label2 for="contact">Fahrschule Nickel</label2><br/>
    <label2 for="tel">Telefon: 0282</label2><br/>
    <label2 for="mob">Mobil: 0170</label2>
    </fieldset><br/>
    <fieldset>
    <legend><strong>Persönliche Angaben</strong></legend>
    <p><label1 for="name"> Name:</label1><input type="text" name="name" size="40"></p>
    <p><label1 for="email">Stasse/Nr.:</label1>
    <input name="street" type="text" size="40">
    <p><label1 for="email">PLZ/Ort:</label1>
    <input name="ort_plz" type="text" size="40">
    <p><label1 for="email">Geb.Datum:</label1>
    <input name="geb_datum" type="text" size="14" value="TT.MM.JJJJ">
    <p><label1 for="email">E-mail:</label1><input name="email" type="text" size="40">
    <p><label1 for="dayphone">Telefon:</label1><input type="text" name="day_phone" size="20"> </p>
    <p><label1 for="evephone">Mobil:</label1>
    <input type="text" name="mobil_phone" size="20">
    </p>
    </p>
    </fieldset><br />
    <fieldset>
    <legend><strong>Welche FS-Klasse möchten Sie machen?</strong></legend>


    <br/>
    <label2 for="month"><strong>Klasse</strong>
    <select NAME="month" id="ff_elem203" size="1">
    <option SELECTED VALUE="none">Klasse waehlen</option>
    <option VALUE="AD">A (d, ab 25 Jahren)</option>
    <option VALUE="AB">A (b, ab 18 Jahren)</option>
    <option VALUE="A1">A1 (ab 16 Jahren)</option>
    <option VALUE="PKWB">B (KFZ)</option>
    <option VALUE="BE">BE (KFZ mit Anhänger)</option>
    <option VALUE="A_B">A+B</option>
    <option VALUE="B_BE">B+BE</option>
    <option VALUE="KL_M">M (50er Roller)</option>
    <option VALUE="mofa">Mofa</option>
    </select></label2>
    <br/>
    <label2 for="year"><strong>Ich moechte:</strong>
    <select name="select" id="year" size="1">
    <option value="2007" selected>Anmeldung</option>
    <option value="2008">Nachschulung</option>
    <option value="2009">Informationen</option>
    </select>
    </label2>

    </fieldset><br/>
    <fieldset>
    <legend><strong>Ich moechte Informationen ueber:</strong></legend>
    <div align="left">
    <table border="0" width="90%" id="table4" align="left">
    <tr>
    <td width="150">
    <p><input TYPE="checkbox" NAME="ff_nm_Website
  • " VALUE="info" id="ff_elem193">
    <label id="ff_lbl193" for="ff_elem193">Fuehrerschein</label> </p>
    <p><input TYPE="checkbox" NAME="ff_nm_NewMedia
  • " VALUE="info" id="ff_elem194">
    <label id="ff_lbl194" for="ff_elem194">Fuehrerschen </label>
    ab 17</td>
    <td width="164">
    <p><input TYPE="checkbox" NAME="ff_nm_SoftwareBox
  • " VALUE="info" id="ff_elem195">
    <label id="ff_lbl195" for="ff_elem195">Nachschulung</label>
    .</p>
    <p><input TYPE="checkbox" NAME="ff_nm_Print
  • " VALUE="info" id="ff_elem196">
    <label id="ff_lbl196" for="ff_elem196">Kurse</label>
    </td>
    <td width="304">
    <p><input TYPE="checkbox" NAME="ff_nm_Logo
  • " VALUE="info" id="ff_elem197">
    <label id="ff_lbl197" for="ff_elem197">Preise.</label></p>
    <input TYPE="checkbox" NAME="ff_nm_Other
  • 1" VALUE="info" id="ff_elem199">
    <label id="ff_lbl199" for="ff_elem199">Sonstiges </label>
    <p></td>
    </tr>
    </table>
    </div>
    <p></p>
    <p><textarea COLS="50" NAME="other_info" id="ff_elem192" style="height: 63; width: 612" rows="4"></textarea>
    </p>
    </fieldset><br/>
    <fieldset>
    <legend><strong>Sie erreichen mich am besten ueber</strong></legend>

    <input type="checkbox" name="contact" value="phone"> Telefon
    <input type="checkbox" name="contact" value="email"> Email
    </fieldset><br/>
    <fieldset>
    <legend><strong>Sonstiges:</strong></legend>
    <p><textarea COLS="50" NAME="other_info0" id="ff_elem205" style="height: 63; width: 612" rows="4"></textarea>
    </p>
    </fieldset><br/>
    <fieldset><legend><strong>AntiSpam</strong></legend>
    <div align="center">{imageverification}</div>
    </fieldset>

    <p align="center">
    <input type="submit" value="Senden" name="Submit" style="font-weight: bold">
    <input type="reset" value="Loeschen" name="reset" style="font-size: 8pt">
    </p>
    R
    romanum 3
    May 16 2008, 13:18 #8483
    Ok.. i have found the error..
    i dont have to use umlauts.
    GreyHead 64
    May 16 2008, 13:34 #8486
    Hi romanum,

    That makes sense, good catch!

    You should also take the <body> tag out of your form code; and I think the '<label1' tags should be just '<label'.

    Bob
    ChronoForms technical support
    If you'd like to buy me a coffee or two, thank you very much
    R
    romanum 3
    May 16 2008, 14:26 #8490
    Thank you ,Bob

    And thank you for this great component too.
    J
    johnsmith 13
    May 16 2008, 15:20 #8495
    Hi Bob,
    Thank you for getting back to me. My site is going live on May 31 and I really want this form to work so that the kids can register for summer soccer games.
    What I did was:
    •  Created the form
    •  Pasted the form code into the html code section
    •  Created the link for it by going to menu->component link and display it on my home page using a module.
    •  Completed the form, clicked submit button but nothing happens – no data submitted no feedback.
    I suspect I need javascript function for submitting and validation?

    Thanks
    John
    GreyHead 64
    May 16 2008, 15:26 #8497
    Hi John,

    You don't need any JavaScript for submitting (and probably not for validation).

    In the ChronoForms Forms Manager, open the form and turn DeBug to ON in the General Tab (and remove any ReDirect URL temporarily).

    Save the form, then click on the Link for the form to display it in a new window. Put some data in and Submit the form. You should then get a screen-ful of debug info. Please copy and post that here for starters.

    Bob
    ChronoForms technical support
    If you'd like to buy me a coffee or two, thank you very much
    J
    johnsmith 13
    May 16 2008, 17:17 #8502
    Hi Bob,
    I did exactly as you suggested and here is the out put
    POST: Array ( [name
  • => test [text] => [day_phone] => 465555555 [email] => [email]test@me.com[/email] [contact] => email [other_info0] => [chrono_verification] => DifAB [Submit] => Send to Oromia Sports )
    Case 1: Use table layout
    E-mail: 'Yes' custom
    Email not sent
    E-mail message

    From: Tura

  • To: [email]info@oromiasports.com[/email], [email]test@me.com[/email]
    Subject:
    name   test
    text   
    day_phone   465555555
    email   [email]test@me.com[/email]
    contact   email
    other_info0   
    Submit   Send to Oromia Sports
    reset   


    Submitted by 205.211.160.1

    I can see something get recorded when I checked on the Saved Dataview. I have attached the screen shot. Even though I completed the form, the data is not recorded properly - no names of people registered show up.
    J
    johnsmith 13
    May 16 2008, 17:30 #8505
    sorry the image was too large to upload so here it is now.

    only uploaded the output.
    thanks
    GreyHead 64
    May 16 2008, 17:50 #8507
    Hi John,

    Thanks for that. There are two - probably separate - things going on here. First off nearly all your fields are named 'text'; what web forms do is to create a results slot for that name and write the results into it, when they find a second field with the same name the results from the first one are over-written. So all that's being returned in the $_POST array is the value of the last, empty text field. (Also 'text' is a not a good field name as it has other meanings in html.)

    You need to rename your fields with either (a) different names text_1, text_2, . . .is fine, or (b) use an array name like text_result[], you can put this in all your fields and the web browser will add each result to the array instead of over-writing. This would probably be good for your roster fields.

    Second, there's a problem with the email being sent. ChronoForms is sending it to Joomla and something is going wrong after that - hence the 'Email not sent' message. Please check the FAQs here and look for the one about emails not being sent as there are several possible causes.

    Bob
    ChronoForms technical support
    If you'd like to buy me a coffee or two, thank you very much
    J
    johnsmith 13
    May 16 2008, 20:31 #8508
    Hi Bob,
    I can't thank you enough for your help. I made the changes to name = text to name =text_1, 2 etc. Is this what you recommending me to change right? For example, see below but it didn't make any difference. please see the debug output at the bottom. By the way I didn't make changes the email yet though.

    <legend><strong>Roster</strong></legend>  
    <p><label1 for="name">1</label1><input name="text_4" type="text" size="40">
    <p><label1 for="name">2</label1><input name="text_5" type="text" size="40">
    <p><label1 for="name">3</label1><input name="text_6" type="text" size="40">
    <p><label1 for="name">4</label1><input name="text_7" type="text" size="40">
    <p><label1 for="name">5</label1><input name="text_8" type="text" size="40">
    </p><br/>



    FORM DEBUG OUTPUT
    _POST: Array ( [name] => 2008 [text_1] => oromia [day_phone] => 416280000 [email] => [email]zesource@yahoo.com[/email] [text] => Oromia [text_2] => John Smith [text_3] => Mary Santos [text_4] => James [text_5] => Ogali [text_6] => Hassofalt smith [text_7] => James williams [text_8] => stehpan Baani [text_9] => Roger miller [text_10] => Robert santos [text_11] => Jenny craig [text_12] => Don Willimams [text_13] => Don Willimams [text_14] => Don Willimams [text_15] => Don Willimams [text_16] => Don Willimams [text_17] => Don Willimams [text_19] => Don Willimams [text_20] => Don Willimams [text_21] => Don Willimams [text_22] => Don Willimams [text_23] => Don Willimams [contact] => email [other_info0] => test [chrono_verification] => ixD4R [Submit] => Send to Oromia Sports )
    Case 2: Use template
    E-mail: 'Yes' custom
    Email not sent
    GreyHead 64
    May 17 2008, 09:33 #8516
    Hi John,

    Well the only difference that I can see is that you now have some output from your form.

    But as you are using the email template and haven't changed it yet there isn't anything showing up in the email. As far as I can see that's exactly what you'd expect.

    Switch back from 'email template' to 'field titles' and hopefully you'll see the data.

    Bob
    ChronoForms technical support
    If you'd like to buy me a coffee or two, thank you very much
    J
    johnsmith 13
    May 19 2008, 19:16 #8587
    Thank you Bob. I can see the imput info now. I really appreciated your help for the last few days. I'm just a bigenner, looking forward to add some functionalities such as - basic field validation (eg. email), some feed back for users (eg. "thank you for registering") after they submit the form.

    The ChronoForm Form manager interface is a bit intimediating. For example, in the General tab, there are a number of email fields which I still don't know how the difference.

    I watched a couple of videos on how to create basic form and I understand it is hard to cover everything in video. As my profession is creating videos, I will create one (After I leared it myself). Do you know if there is manual that describe each tabs in details for this product?
    thanks
    John