It is possible to organize/ design a form?

  • 17 August 2011
  • 6 replies
  • 3 views
C

it is possible to organize/ design a form?

6 replies

Oli_Gardner
Rank

Hi Camillo,
If there is a form already on the page, double-click on one of the form fields (not the button) and the form editor will appear.

This lets you re-order, add and change and of the form fields.

If you don’t have a form, select the page section you want to add it into (in the page editor) and click the “Form” button in the toolbar.

Let me know if you have any more specific questions, and I’ll be happy to help.
Cheers
Oli

J

Hi Camillo,

If it is the appearance of the form that you would like to change there are a number of controls in the Properties panel on the right side of the editor. Here you can control the field size, spacing, font attributes, color, field borders and other attributes.

Justin

C

Thanks, but i want to put fields horizontally, not vertical as it appears automaticly with the button “Form”.
Thanks for your help!

J

Hi Camillo,

Unfortunately it is not possible to organize the fields horizontally with the form editor at the moment. The only way that could be done at the moment would be to add some Javascript to the page that would re-position the from fields when the page loads in the end users browser. Sorry, we realize this is not an ideal solution.

Justin

J

Here is some Javascript that you can paste into the Manage Scripts dialog box accessible by clicking on the scripts button.

This script will only work if there are at least two form fields and it will use the vertical spacing as the horizontal spacing. I have put comments in the code so that you can see exactly what it is doing. The script makes use of the jQuery Javascript library which we include in every page.

The effect of the script will only be apparent in the preview or published version of the page but not in the editor so you might have to use a bit of trial and error to get the fields positioned exactly as you want.

<script> <br /> jQuery(document).ready(function($) { <br />
/* get all the <div>s that contain form fields */ <br />
var formFields = $('div.lp-pom-form-field'); <br />
/* if there aren't at least two form fields then don't do anything */ <br />
if (formFields.length < 2) { <br />
  return; <br />
} <br />
/* store the first field in a variable because we are going to use it for a bunch of calculations */ <br />
var firstField = $(formFields[0]); <br />
/* get the width of the first form field */ <br />
var fieldWidth = firstField.width(); <br />
/* get the top left position of the first form field */ <br />
var origin = firstField.position(); <br />
/* calculate the horizontal spacing between fields based on the current vertical spacing */ <br />
var gap =
$(formFields[1]).position().top - (origin.top + firstField.height()); <br /><br />
/* go through all the form fields except the first one */ <br />
for(var i = 1, l = formFields.length, f; i<l; i++) { <br />
  f = formFields[i]; <br />
  /* postiion the form field relative to the origin */ <br />
  f.style.top = origin.top + 'px'; <br />
  f.style.left = (origin.left + (fieldWidth + gap) * i) + 'px'; <br />
} <br /><br />
/* get the form submit button */ <br />
var button = $('div.lp-pom-form').find('a.lp-pom-button')[0]; <br /><br />
/* get the label of the first fields so that we can determine it's position */ <br />
var label = firstField.find('label');
<br />
/* offset the button so that it has in-line with the form fields <br />
   if the labels are on the top of form fields offset the button vertially
<br />
   by the height of the label so that it aligns with the field */ <br />
button.style.top = (origin.top +
($(firstField.children()[1]).position().top === 0 ? 0 : label.height())) + 'px'; <br />
button.style.left = (origin.left + (fieldWidth + gap) * l) + 'px'; <br /> }); <br /> </script>
J

Oops some stuff got mangled while posting. Here it is again:

\<script\>   
jQuery(document).ready(function($) {   
/\* get all the \<div\>s that contain form fields \*/   
var formFields = $('div.lp-pom-form-field');   
/\* if there aren't at least two form fields then don't do anything \*/   
if (formFields.length \< 2) {   
return;   
}   
/\* store the first field in a variable because we are going to use it for a bunch of calculations \*/   
var firstField = $(formFields[0]);   
/\* get the width of the first form field \*/   
var fieldWidth = firstField.width();   
/\* get the top left position of the first form field \*/   
var origin = firstField.position();   
/\* calculate the horizontal spacing between fields based on the current vertical spacing \*/   
var gap = $(formFields[1]).position().top - (origin.top + firstField.height());   
 
/\* go through all the form fields except the first one \*/   
for(var i = 1, l = formFields.length, f; i\<l; i++) {   
f = formFields[i];   
/\* postiion the form field relative to the origin \*/   
f.style.top = origin.top + 'px';   
f.style.left = (origin.left + (fieldWidth + gap) \* i) + 'px';   
}   
 
/\* get the form submit button \*/   
var button = $('div.lp-pom-form').find('a.lp-pom-button')[0];   
 
/\* get the label of the first fields so that we can determine it's position \*/   
var label = firstField.find('label');  
/\* offset the button so that it has in-line with the form fields   
if the labels are on the top of form fields offset the button vertially  
by the height of the label so that it aligns with the field \*/   
button.style.top = (origin.top + ($(firstField.children()[1]).position().top === 0 ? 0 : label.height())) + 'px';   
button.style.left = (origin.left + (fieldWidth + gap) \* l) + 'px';   
});   
\</script\>

Reply


Terms & ConditionsCookie settings