Form Controls: How to customize

Igor Evstratov asked on July 12, 2017 11:25

What I'm going to do is creating a form layout with custom HTML like this:

    <div class="js-form-control form__control">
        <cms:FormControl runat="server" ID="iFirstName" Field="FirstName" FormControlName="TextBoxControl" CssClass="form__input" placeholder="First Name*" />
    </div>

Which is rendered to:

<div class="js-form-control form__control">
    <div id="p_lt_ctl04_pageplaceholder_p_lt_ctl01_On_lineForm_viewBiz_ctl00_iFirstName" placeholder="First Name*">
        <input name="p$lt$ctl04$pageplaceholder$p$lt$ctl01$On_lineForm$viewBiz$ctl00$iFirstName$fcFirstName$txtText" type="text" maxlength="200" id="p_lt_ctl04_pageplaceholder_p_lt_ctl01_On_lineForm_viewBiz_ctl00_iFirstName_fcFirstName_txtText" class="form-control">

    </div>
</div>

Questions

As you can see the attributes go to the div wrapper. How can I pass attributes like "placeholder" to the TextBoxControl ifself?
How can I get rid of the wrapper div? I mean the one with the ID p_lt_ctl04_pageplaceholder_p_lt_ctl01_On_lineForm_viewBiz_ctl00_iFirstName
If there is no way to customize the existing form control, any advise on how to implement this with a custom form control?

Thanks, Igor

form controls kentico 10 forms layouts

Recent Answers

Mariia Hrytsai answered on July 12, 2017 14:10

You can develop your custom form control with appropriate properties: https://docs.kentico.com/k10/custom-development/developing-form-controls/example-developing-custom-form-controls
If you need only placeholder for textbox, you can use WatermarkText property of text box control assigned to field. It can be set in fields configuration section.

2 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on July 12, 2017 15:04

If you plan to do more development with Kentico, I'd get used to how the form controls are created and work with them vs. trying to modify them or recreate them as it will only cause you problems. Create your CSS and JS to work with the output of the form controls and you'll have a much better experience.

Also there are properties on the actual fields you can add css classes to when you are creating a form, page type, class field or property.

1 votesVote for this answer Mark as a Correct answer