Design and CSS styles
Version 6.x > Design and CSS styles > Submitting data in a form - converting generic input fields to Kentico input fields View modes: 
User avatar
Member
Member
chris.worthington-barclayvouchers.co - 6/5/2013 8:59:54 PM
   
Submitting data in a form - converting generic input fields to Kentico input fields
Hello,

We're running Kentico 6 and we got a form page from our advertising agency. Their page is formatted with CSS and looks nice, so we'd like to use it rather than build a form page from scratch.

When I use forms in Kentico, I go to Tools > Forms and use Kentico fields, so the form uses the $$input:CompanyName$$ format. I can't find a way to edit the size of the input window, for example, I just have to use it as it is.

The form page(s) we got from our agency use generic HTML form fields, like this:

<input type="text" name="company" id="company" style="width:240px; height:15px">

So I figure I have two ways to adapt this page; either create a form in Kentico and find a way to edit the input field (seen above with "style="width:240px; height:15px"), or find a way to pass the data variables from 'name="company"' into a Kentico data field.

Is there a better way? Any help would be greatly appreciated.

User avatar
Kentico MVP
Kentico MVP
Brenden Kehren - 6/6/2013 10:51:16 PM
   
RE:Submitting data in a form - converting generic input fields to Kentico input fields
Render the form on a page and view the source code. You will see you can style the form because every element has a class associated with it. The layout looks like so:
<div class="FormPanel">
<table class="EditingFormTable">
<tr>
<td class="EditingFormLabelCell">
<label class="EditingFormLabel" />
</td>
<td class="EditingFormValueCell">
<div class="EditingFormControlNestedControl">
<input class="TextBoxField" />
</div>
</td>
</tr>
</table>
</div>
The alternate to this would be to create a custom layout although I have noticed there is additional markup that is rendered even though I have not entered any of that in my layout. See my post here.

User avatar
Member
Member
chris.worthington-barclayvouchers.co - 6/6/2013 11:35:53 PM
   
RE:Submitting data in a form - converting generic input fields to Kentico input fields
The problem I have is that when I put the form on a page, I can't view the source code. The "source" button that lets me see the source code is gone.

User avatar
Kentico Consulting
Kentico Consulting
kentico_josefd - 6/7/2013 3:11:00 AM
   
RE:Submitting data in a form - converting generic input fields to Kentico input fields
Hello,

What FroggEye meant is that you can check the final output code of the online form web part rendered on a live site using your browser (ctrl + u), in order to find out which CSS classes Kentico CMS assigns to each form element.

For example you can see the input field is rendered like this this:

<input name=".." type="text" maxlength="200" id="..." class="TextBoxField" />

When you have found the relevant classes, simply place your CSS to their definition in the site Stylesheet. You can also place additional classes to the CMS Desk -> Tools -> Form -> Layout -> Source, when defining the custom layout of your form.

Regards,
Josef Dvorak

User avatar
Member
Member
chris.worthington-barclayvouchers.co - 6/7/2013 3:24:35 AM
   
RE:Submitting data in a form - converting generic input fields to Kentico input fields
Josef (and FroggEye),

Thank you, I'm new to Kentico and web development, so I'm sorry I didn't get it.

Okay, I did that, and most of them are TextBoxField. So I need to modify the CSS so that TextBoxField attributes are consistent (if I understand this correctly).

Is there a way I can keep TextBoxField choices on the same line? As it is, each TextBoxField instance creates a new line, so I can't do forms with entries like:

Last name First name

They end up like
Last name
First name

Thanks again for your kind help!

User avatar
Kentico Consulting
Kentico Consulting
kentico_josefd - 6/7/2013 6:01:48 AM
   
RE:Submitting data in a form - converting generic input fields to Kentico input fields
Hello,

The simplest solution in this case would be to create a table, which will show all the labels and input elements on single line:

<table>
<tbody>
<tr>
<td>
$$label:FirstName$$</td>
<td>
$$label:LastName$$</td>
<td>
$$input:FirstName$$</td>
<td>
$$input:LastName$$</td>
</tr>
</tbody>
</table>


Regards,
Josef Dvorak