I need assistance with setting the layout of a form. I am creating an application form and I would like to be able to position the form questions in a specific layout. I have downloaded the "tableless_layout" from the market, but I haven't used css in this way for a long time. Can someone assist me with some examples of how to incorporate the tableless_layout code and css?
Here is the tableless_layout code:
<?php/************************************************************
* DESIGNERS: SCROLL DOWN! (IGNORE ALL THIS STUFF AT THE TOP)
************************************************************/defined('C5_EXECUTE') or die("Access Denied.");$survey=$controller;$miniSurvey=new MiniSurvey($b);$miniSurvey->frontEndMode=true;//Clean up variables from controller so html is easier to work with...$bID=intval($bID);$qsID=intval($survey->questionSetId);$formAction=$this->action('submit_form').'#'.$qsID;$questionsRS=$miniSurvey->loadQuestions($qsID,$bID);$questions=array();while($questionRow=$questionsRS->fetchRow()){
<?php/************************************************************
* DESIGNERS: SCROLL DOWN! (IGNORE ALL THIS STUFF AT THE TOP)
************************************************************/defined('C5_EXECUTE') or die("Access Denied.");$survey=$controller;$miniSurvey=new MiniSurvey($b);$miniSurvey->frontEndMode=true;//Clean up variables from controller so html is easier to work with...$bID=intval($bID);$qsID=intval($survey->questionSetId);$formAction=$this->action('submit_form').'#'.$qsID;$questionsRS=$miniSurvey->loadQuestions($qsID,$bID);$questions=array();while($questionRow=$questionsRS->fetchRow()){$question=$questionRow;$question['input']=$miniSurvey->loadInputType($questionRow,false);//Make type names common-sensicalif($questionRow['inputType']=='text'){$question['type']='textarea';}elseif($questionRow['inputType']=='field'){$question['type']='text';}else{$question['type']=$questionRow['inputType'];//checkboxlist, select, radios, fileupload}//Make radioList wrapper consistent with checkboxList wrapperif($questionRow['inputType']=='radios'){$question['input']="<div class=\"radioList\">\n{$question['input']}</div>\n";}//Construct label "for" (and add id's to inputs so they work)$question['input']=str_replace(' id=""','',$question['input']);//clean up silly file elements which for some reason have an id attribute but it's always empty (if we left this in, it would mess up our code below that inserts an actual id)$hasIdAlready=(strpos($question['input'],' id="')!==false);//sanity check (as of this writing, c5 doesn't give id's to any form fields -- but maybe in the future?)$canBeLabelled=in_array($question['type'],array('text','textarea','select','fileupload'));//checkboxlist and radios can't get labels because they have multiple inputs (ideally the text of each answer would be a label, but that's too much hackery for us to do safely here in the template)if(!$hasIdAlready&&$canBeLabelled){$domId="form{$bID}_question{$questionRow['msqID']}";if($question['type']=='text'||$question['type']=='fileupload'){$search='<input';$replace='<input id="'.$domId.'"';$question['input']=str_replace($search,$replace,$question['input']);}elseif($question['type']=='textarea'){$search='<textarea';$replace='<textarea id="'.$domId.'"';$question['input']=str_replace($search,$replace,$question['input']);}elseif($question['type']=='select'){$search='<select';$replace='<select id="'.$domId.'"';$question['input']=str_replace($search,$replace,$question['input']);}$question['labelFor']=" for=\"{$domId}\"";}else{$question['labelFor']='';}$questions[]=$question;}//Prep thank-you message$success=($_GET['surveySuccess']&&$_GET['qsid']==intval($qsID));$thanksMsg=$survey->thankyouMsg;//Collate all errors and put them into divs$errorHeader=$formResponse;$errors=is_array($errors) ? $errors:array();if($invalidIP){$errors[]=$invalidIP;}$errorDivs='';foreach($errorsas$error){$errorDivs.='<div class="error">'.$error."</div>\n";//It's okay for this one thing to have the html here -- it can be identified in CSS via parent wrapper div (e.g. '.formblock .error')}//Prep captcha$surveyBlockInfo=$miniSurvey->getMiniSurveyBlockInfoByQuestionId($qsID,$bID);$captcha=$surveyBlockInfo['displayCaptcha'] ? Loader::helper('validation/captcha'):false;//Localized labels$translatedCaptchaLabel= t('Please type the letters and numbers shown in the image.');$translatedSubmitLabel= t('Submit');/******************************************************************************
* DESIGNERS: CUSTOMIZE THE FORM HTML STARTING HERE...
*/?><div id="formblock<?php echo $bID; ?>"class="formblock"><form enctype="multipart/form-data" id="miniSurveyView<?php echo $bID; ?>"class="miniSurveyView" method="post" action="<?php echo $formAction ?>"><?phpif($success):?><div class="success"><?phpecho$thanksMsg;?></div><?phpelseif($errors):?><div class="errors"><?phpecho$errorHeader;?><?phpecho$errorDivs;/* each error wrapped in <div class="error">...</div> */?></div><?phpendif;?><div class="fields"><?phpforeach($questionsas$question):?><div class="field field-<?php echo $question['type']; ?>"><label <?phpecho$question['labelFor'];?>><?phpecho$question['question'];?><?phpif($question['required']):?><span class="required">*</span><?phpendif;?></label></td><td><?phpecho$question['input'];?><?phpendforeach;?>
</div><!-- .fields -->
<?phpif($captcha):?>
<div class="captcha">
<label><?phpecho$translatedCaptchaLabel;?></label>
<br />
<?php$captcha->display();?>
<br />
<?php$captcha->showInput();?>
</div>
<?phpendif;?>
<input type="submit" name="Submit" class="submit" value="<?phpecho$translatedSubmitLabel;?>" />
<input name="qsID" type="hidden" value="<?phpecho$qsID;?>" />
<input name="pURI" type="hidden" value="<?phpecho$pURI;?>" />
</form>
</div><!-- .formblock -->
I understand how to do that. I need help creating the css to style the tableless form. How do I add css to the tableless form to custom place each of the 60 question entries where I want them to be positioned in the form block?
Code
Post Reply
Delete Post
You are allowed to delete your post for 5 minutes after it's posted.
This add-on installs a custom template for the default form block.
Click on the form block while in edit mode and select "custom template" instead of "edit".
From there select the "tableless" custom template then click save.