close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Form builder creates such complicated code

Thread began 3/02/2010 3:10 am by gwh362692 | Last modified 3/04/2010 6:42 am by gwh362692 | 1251 views | 9 replies |

gwh362692

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>

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

gwh362692

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?

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

gwh362692

  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?

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

neilo

  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.

Sign in to reply to this post

tone397472

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.

Sign in to reply to this post

gwh362692

Ok thanks for clarifying.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...