Forums (Obsolete)

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.

Kentico Legend

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.


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.

Certified Developer 13

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

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!

Certified Developer 13

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