Form builder creates such complicated code

Hi everyone,

I wanted to insert just a simple form onto my home page, consisting of just a First Name, Last Name and Email field, plus a submit button. I used CSS form builder to insert it but it created so much code, ie. all these divs which complicate my code. I just wondered why this extension has to create such div-heavy code? Also, I inserted it into a div that already existed in my layout, ie. within my sidebar div and the form just spilled right out of it, clashing with all my other code.

Is it possible to just create my own simple form and then have form builder create the validation? I just didn't want to go to the trouble of doing this if the code ends up being the same as that below, once I bring it into form builder.

Appreciate any advice.



<form class="NewFromBlank_Default" id="NewsletterRegistration_NewFromBlank_Default" name="NewsletterRegistration_NewFromBlank_Default" method="post" action="index.php">
<!--
WebAssist CSS Form Builder - Form v1
CC: Registration
CP: Newsletter Registration
TC: <New From Blank>
TP: Default
-->
<ul class="NewFromBlank_Default">
<li>
<fieldset class="NewFromBlank_Default" id="fieldset">
<legend class="groupHeader"></legend>
<ul class="formList">
<li class="formItem">
<div class="formGroup">
<div class="lineGroup">
<div class="fullColumnGroup">
<label for="fieldset_group_First_Name" class="sublabel" > First Name<span class="requiredIndicator">&nbsp;*</span></label>
<div class="errorGroup">
<div class="fieldPair">
<div class="fieldGroup"> <span id="fieldset_group_First_Name_Spry">
<input id="fieldset_group_First_Name" name="fieldset_group_First_Name" type="text" value="<?php echo((isset($_GET["invalid"])?ValidatedField("index","fieldset_group_First_Name"):"")); ?>" class="formTextfield_Large" tabindex="1" onblur="hideServerError('fieldset_group_First_Name_ServerError');"/>
<span class="textfieldRequiredMsg">Please enter your first name</span> </span>
<?php
if (ValidatedField('index','index')) {
if ((strpos((",".ValidatedField("index","index").","), "," . "1" . ",") !== false || "1" == "")) {
if (!(false)) {
?>
<span class="serverInvalidState" id="fieldset_group_First_Name_ServerError">Please enter your first name</span>
<?php //WAFV_Conditional index.php index(1:)
}
}
}?>
</div>
</div>
</div>
</div>
</div>
<div class="lineGroup">
<div class="fullColumnGroup">
<label for="fieldset_group_Last_Name" class="sublabel" > Last Name<span class="requiredIndicator">&nbsp;*</span></label>
<div class="errorGroup">
<div class="fieldPair">
<div class="fieldGroup"> <span id="fieldset_group_Last_Name_Spry">
<input id="fieldset_group_Last_Name" name="fieldset_group_Last_Name" type="text" value="<?php echo((isset($_GET["invalid"])?ValidatedField("index","fieldset_group_Last_Name"):"")); ?>" class="formTextfield_Large" tabindex="2" onblur="hideServerError('fieldset_group_Last_Name_ServerError');"/>
<span class="textfieldRequiredMsg">Please enter your last name</span> </span>
<?php
if (ValidatedField('index','index')) {
if ((strpos((",".ValidatedField("index","index").","), "," . "2" . ",") !== false || "2" == "")) {
if (!(false)) {
?>
<span class="serverInvalidState" id="fieldset_group_Last_Name_ServerError">Please enter your last name</span>
<?php //WAFV_Conditional index.php index(2:)
}
}
}?>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="formItem">
<div class="formGroup">
<div class="lineGroup">
<div class="fullColumnGroup">
<label for="fieldset_group_Email" class="sublabel" > Email<span class="requiredIndicator">&nbsp;*</span></label>
<div class="errorGroup">
<div class="fieldPair">
<div class="fieldGroup"> <span id="fieldset_group_Email_Spry">
<input id="fieldset_group_Email" name="fieldset_group_Email" type="text" value="<?php echo((isset($_GET["invalid"])?ValidatedField("index","fieldset_group_Email"):"")); ?>" class="formTextfield_Large" tabindex="3" onblur="hideServerError('fieldset_group_Email_ServerError');"/>
<span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldRequiredMsg">Please enter your email address</span> </span>
<?php
if (ValidatedField('index','index')) {
if ((strpos((",".ValidatedField("index","index").","), "," . "3" . ",") !== false || "3" == "")) {
if (!(false)) {
?>
<span class="serverInvalidState" id="fieldset_group_Email_ServerError">Please enter your email address</span>
<?php //WAFV_Conditional index.php index(3:)
}
}
}?>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="formItem"> <span class="buttonFieldGroup" >
<input class="formButton" name="NewsletterRegistration_submit" type="submit" id="NewsletterRegistration_submit" value="Submit" onclick="clearAllServerErrors('NewsletterRegistration_NewFromBlank_Default')" tabindex="3" />
</span> </li>
</ul>
</fieldset>
</li>
</ul>
</form>

The different divs are created to allow for the different design options. Since the label, error, fields, and columns can all be positioned and styled individually, they need corresponding html elements.

A form builder form can switch between designs by changing the .css alone, in order to account for a diversity of designs, the html used needs to account for the options available.

What features of the form builder are you looking for? Server Validation and Spry validation can be added to existing forms using the Form Builder Server Validation Server Behavior on an existing form and applying Spry Validation through Dreamweaver is a valid way to accomplish this with existing forms.

Thanks for the reply,

Originally Said By: Ray Borduin

  The different divs are created to allow for the different design options. Since the label, error, fields, and columns can all be positioned and styled individually, they need corresponding html elements.

A form builder form can switch between designs by changing the .css alone, in order to account for a diversity of designs, the html used needs to account for the options available.  

I understand now why there's so much code but from a developers perspective, it really puts you off wanting to use it due to the amount of code which is only there because of the different design options which will never all be used anyway. Do you think a future version of the extension would just output the design option that the user chose instead of every single possibility? It would make it so much easier to use.

  Server Validation and Spry validation can be added to existing forms using the Form Builder Server Validation Server Behavior on an existing form and applying Spry Validation through Dreamweaver is a valid way to accomplish this with existing forms.  

If I was to use the Form Builder Server Validation Server Behavior, would I need to run the form wizard? I thought I read somewhere that even if you have your own form, you need to enter the wizard, but if I do that it's just going to add all that extra code isn't it?

Also, if I use Dreamweaver's Spry Validation, will this interfere with the original elements of the form?

The form builder server validation wizard is a separate wizard for adding just the form validations to the existing form. You can do it without entering the form builder wizard.

Spry validation can be added before or after. It will not interfere with the existing elements or server validation.

I'm not sure if we will change the html output of the form builder forms.... probably not.

The good thing about forms built in this way is that we can include them in solutions and allow theming through css without having to edit the html.

If you want a simple form with your own html, then you should not be using that wizard.

We could at some point in the future create a wizard that does everything else but works on your existing form. That would be the more likely route we would take to support creating a more simple html syntax... or I guess making it easier for you to use one.

We appreciate the feedback.

  The form builder server validation wizard is a separate wizard for adding just the form validations to the existing form. You can do it without entering the form builder wizard.  

Ok great - are there instructions on how to use the validation wizard in any of the documentation?

  Spry validation can be added before or after. It will not interfere with the existing elements or server validation.  

Is both Spry and server validation needed for any one form?

Also once the form has been validated, do I need to use dataAssist to create the code that will insert the 3 fields into the database?

For many years before form builder was created, there was validation toolkit. As such there should still be a whole slew of documentation and examples around it. Start by opening up the Server Validation Wizard and clicking the help button.

Spry validation isn't ever needed. But it is an attractive and dynamic way to add client side validation with all of the bells and whistles. For the sake of true validation, client validation is useless, since it can be turned off in any browser. Server Validation is the more important kind for true security and is the only one that is truly necessary.

Adding validation error messages is still pretty tedious and time consuming, which is one of the reasons why we created form builder.

Anyway, spry validation is added on a field by field basis. Server Validation is applied as a server behavior, but then each error message has to be added and configured individually.

Once validation is in place, or before, you can add the DataAssist server behavior. Again, since you are using your own forms you would not use the DataAssist wizard, but instead apply the insert or update server behaviors directly to the page.

  We could at some point in the future create a wizard that does everything else but works on your existing form. That would be the more likely route we would take to support creating a more simple html syntax.  

Hi Ray,

I would definitely support this proposal. It seems that with FormBuilder you have made a great product in terms of its validation functionality and 'wizardry', which is devalued (I believe) to a large extent by the mark-up it produces to accommodate design. I can't bring my self to use it for this reason. It takes a couple of minutes in DreamWeaver to apply my own preferred styles anyway.

This is a shame, because it has a great walk-through wizard for applying server-side validation, - a facility that you can't access without having it apply exaggerated design features and mark-up.

If there were a similar wizard for just validation, or even a checkbox to tick at step 1 of the wizard to select 'Validation Only', it would help a lot.

I don't have a problem with using the alternative method of applying validation via the toolkit, but the walk-through wizard would be a useful bonus.

Thanks.

Hi, My suggestion is: Take away the editor for formatting (it only makes it more complicated and unstable ). Keep the validation function and text fill-in functions. Create clear and for everybody understandable CSS "rules" / "styles". Write a great tutorial about Form-Builder and CSS and you save 2/3 of the code in the forms now.
It's a great way for people to learn CSS and to find out that it works 5 times faster then the editors formatting functions do at the moment.

Ok thanks for clarifying.