formfields.com Forum Index formfields.com
FORMfields Forums
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Center form, plus few other things

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    formfields.com Forum Index -> FF 2.X - Frequently Asked Questions (FAQs)
View previous topic :: View next topic  
Author Message
nado



Joined: 29 Mar 2006
Posts: 16

PostPosted: Fri Jun 16, 2006 2:34 am    Post subject: Center form, plus few other things Reply with quote

hi

I've got a few problems. I'm working on this site: www.blastbuy.com ... it's under construction, so you can test it out.

Problems:

1) How can I center the whole form without having the textboxes etc centered within the table?

2) How can I change the Buttons (submit, clear) font etc through CSS?

3) How can I change the font size etc for the fields on the confirmation page?

4) In IE, the comments textarea isn't as wide as it should be... is there a way to fix this for just IE? (it works fine in Firefox)


cheers
nathan
Back to top
View user's profile Send private message
formfields



Joined: 01 Aug 2005
Posts: 465

PostPosted: Fri Jun 16, 2006 6:57 pm    Post subject: Reply with quote

1. You can do this by using the center tag and a text-align attribute:
Code:

<center>
<? /* BEGIN - SECTION 3 */ ?>
   <table style="text-align:left;">
...
   </table>
<? /* END - SECTION 3 */ ?>
</center>
Back to top
View user's profile Send private message
formfields



Joined: 01 Aug 2005
Posts: 465

PostPosted: Fri Jun 16, 2006 7:00 pm    Post subject: Reply with quote

2. You can format the submit buttons by using the following CSS:
Code:

input.FORMfieldsSubmit {
   font-size: 18px;
}
Back to top
View user's profile Send private message
formfields



Joined: 01 Aug 2005
Posts: 465

PostPosted: Fri Jun 16, 2006 7:02 pm    Post subject: Reply with quote

2. You can format the submit buttons by using something like the following CSS:
Code:

input.FORMfieldsSubmit {
   font-size: 18px;
}


3. You can format the labels on the confirmation page using something like:
Code:

label.display {
   color: red;
   font-size: 16px;
   background-color: inherit;
}


You can format the field values on the confirmation page using something like:
Code:

div.display {
   color: green;
   background-color: inherit;
}
Back to top
View user's profile Send private message
formfields



Joined: 01 Aug 2005
Posts: 465

PostPosted: Fri Jun 16, 2006 7:20 pm    Post subject: Reply with quote

4. You can $cols parameter in the TextAreaField configures the width of the textarea. For example, you can specify 80 characters of width using:
Code:

$formBean->addField(new TextAreaField("message", "Message", REQUIRED, 1000, 1, 5, 80));


-----------

Here is an example of a form that includes all the customizations listed above:
Code:

<? /* BEGIN - SECTION 1 */ ?>
<?php
   
   require($_SERVER["DOCUMENT_ROOT"] . "/FORMfields/FORMfields.php");
   
   define("SLEEP", 4);
   define("FF_FORM_NAME", "formattingexample");
   define("FF_FORM_TITLE", "Formatting Example");
   define("FF_STYLE_FILE", FF_ROOT_URL . "/styles/default.css");
   define("FF_SHOW_W3C_VALIDATOR", false);
   define("FF_DISPLAY_CONFIRMATION", true);
   define("FF_INSERT_INTO_DB", false);
   define("FF_SEND_EMAIL", false);
   define("FF_EMAIL", "");
   define("FF_CANCEL_URL", "/");
   define("FF_DONE_URL", "/");
   
   define("FF_ENTER", 1);
   define("FF_CONFIRM", 2);
   define("FF_DONE", 3);
   
   $action = FF_ENTER;

   $formBean = new FormBean();
   $formBean->addField(new SubmitField("_submit", "Submit"));
   $formBean->addField(new SubmitField("clear", "Clear"));
   $formBean->addField(new SubmitField("cancel", "Cancel"));
   $formBean->addField(new PersonNameField("name", "Name", REQUIRED));
   $formBean->addField(new DateField("date", "Date", REQUIRED, " "));
   $formBean->addField(new TextAreaField("message", "Message", REQUIRED, 1000, 1, 5, 80));
   
   if (FormField::getOrNull("_confirm", $_REQUEST) || FormField::getOrNull("_back", $_REQUEST)) {
      $formBean->setEditable(false);
   }

   $formBean->getParameters();
   
   if (FormField::getOrNull("_back", $_REQUEST)) {
      $formBean->setEditable(true);
   }
   
   if (FormField::getOrNull("_submit", $_REQUEST) || FormField::getOrNull("_confirm", $_REQUEST)) {
      if ($formBean->checkValues()) {
         if (FF_DISPLAY_CONFIRMATION && !FormField::getOrNull("_confirm", $_REQUEST)) {
            // CONFIRMATION OPERATION:
            $formBean->setEditable(false);
            $formBean->addField(new SubmitField("_back", "< Back"));
            $formBean->addField(new SubmitField("_confirm", "Confirm >"));
            $action = FF_CONFIRM;
         } else {
            // SUBMIT OPERATION:
            $action = FF_DONE;
            if (FF_SEND_EMAIL)
               $formBean->email(FF_EMAIL, FF_FORM_TITLE . " Submission");
            if (FF_INSERT_INTO_DB) {
               $formBean->addField(new DateTimeField("__inserted_on", "Inserted On", REQUIRED, null));
               $formBean->formFields["__inserted_on"]->getCurrentDateTime();
               $formBean->insertValuesIntoDb(FF_FORM_NAME);
            }
         }
      }
   } else if (FormField::getOrNull("clear", $_REQUEST)) {
      // CLEAR OPERATION:
      $formBean->clearAllData();
   } else if (FormField::getOrNull("cancel", $_REQUEST)) {
      // CANCEL OPERATION:
      header("Location: " . FF_CANCEL_URL);
   } else if (!$formBean->getButtonClicked()) {
      // DEFAULT OPERATION:
      // Enter default values here. Example:
      // $formBean->setValue("name", "John");
   }
   
   //echo $formBean->toString();
   
?>
<? /* END - SECTION 1 */ ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title><?= FF_FORM_TITLE ?></title>
<? /* BEGIN - SECTION 2 */ ?>
<? if ($action == FF_DONE) { ?>
   <meta http-equiv="Refresh" content="<?= SLEEP ?>; url=<?= FF_DONE_URL ?>">
<? } ?>
<link rel="stylesheet" type="text/css" href="<?= FF_ROOT_URL ?>/FORMfields.css" />
<script type="text/javascript" src="<?= FF_ROOT_URL ?>/FORMfields.js"></script>
<link rel="stylesheet" type="text/css" href="<?= FF_ROOT_URL ?>/tableHelpers.css" />
<link rel="stylesheet" type="text/css" href="<?= FF_STYLE_FILE ?>" />
<style type="text/css">
   /* Sometimes it is useful to specify a label width */
   /*label.notValid, label.isValid, label.disabled, label.display {
      width: 150px;
   }*/
   
   input.FORMfieldsSubmit {
      font-size: 18px;
   }
   
   label.display {
      color: red;
      font-size: 16px;
      background-color: inherit;
   }
   
   div.display {
      color: green;
      background-color: inherit;
   }
   
</style>
<? /* END - SECTION 2 */ ?>
</head>

<body onload="setFocus();" class="FORMfields">
<center>
<? /* BEGIN - SECTION 3 */ ?>
   <table style="text-align:left;">
   <tr>
   <td>
   <a name="ffStart"></a>
   <form action="#ffStart" method="post" enctype="multipart/form-data">
      <div class="FORMfields">
         <h1 class="FORMfields"><?= FF_FORM_TITLE ?></h1>
         <? if ($action == FF_DONE) { ?>
            <br />
            <div style="font: normal normal bold 18px verdana;">
               Thank you for your submission.
            </div>
            <div style="margin-top:20px;font: normal normal bold 12px verdana;">
               Note: Please click <a href="/">here</a> if your browser does not redirect in <?= SLEEP ?> seconds.
            </div>
            <br />
         <? } else {
            if ($action == FF_CONFIRM) {
               ?>
                  <h3 class="FORMfields">
                     Please confirm that the following data is correct:
                  </h3>
               <?
            } else {
               ?>
                  <div style="text-align:right;">
                     <span class="required">*</span><span class="help" style="padding-left:0px;font-size:9px;"> - required</span>
                  </div>
               <?
            }
            
            echo $formBean->getTableTag();
         } ?>
         
      </div>
      <div style="text-align:left;margin:10px 3px 10px 3px;">
         <a style="font: normal normal normal 9px verdana,sans-serif;" href="http://www.formfields.com" target="_blank">Form Generated by FORMgen</a>
      </div>
      <? if (FF_SHOW_W3C_VALIDATOR) { ?>
         <div>
            <a href="http://validator.w3.org/check?uri=referer"><img border="0" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
            <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
         </div>
      <? } ?>
   </form>
   </td>
   </tr>
   </table>
<? /* END - SECTION 3 */ ?>
</center>
</body>

</html>
Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    formfields.com Forum Index -> FF 2.X - Frequently Asked Questions (FAQs) All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group