Styling the eForm?

43 Posts

klarsen7 Reply #1, 17 years ago

Hi I am having trouble getting the form to look right.

Here is the link:http://lifewater.org/modx/index.php?id=6

Here is the code:
[!eForm? &formid=`ContactForm` &subject=`[+subject+]` &to=`[(email_sender)]` &ccsender=`1` &tpl=`ContactForm` &report=`ContactFormReport` &invalidClass=`invalidValue` &requiredClass=`requiredValue` &cssStyle=`ContactStyles` &gotoid=`46` !]

Can you add line breaks in there, or how would I get it to be on separate lines at least?

1 Posts

ufchica Reply #2, 16 years, 11 months ago

(Hope it’s not too late to answer in this thread, I am new to the forums and MODx in general so I hope you forgive me if there is a rule not to bring up threads older than given period of time)

You insert the line breaks in the chunk containing the template for your form. For example, when you have the following code:

<label for="name">Yuor name here</label>
<input maxlength="60" name="name" type="text" />
<label for="email">Your email</label>
<input maxlength="40" name="email" size="40" type="text" />

You just put a new paragraph or line break tag before each <label> like this:

<label for="name">Yuor name here</label>
<input maxlength="60" name="name" type="text" />

<br />

<label for="email">Your email</label>
<input maxlength="40" name="email" size="40" type="text" />

3 Posts

arkunt Reply #3, 16 years, 3 months ago

Hi, colud you explain to me how I put my form looking smoothly, I mean, looking like a table, all field square with each others

Quote from: ufchica at Oct 16, 2009, 08:47 AM

(Hope it’s not too late to answer in this thread, I am new to the forums and MODx in general so I hope you forgive me if there is a rule not to bring up threads older than given period of time)

You insert the line breaks in the chunk containing the template for your form. For example, when you have the following code:
<label for="name">Yuor name here</label>
<input maxlength="60" name="name" type="text" />
<label for="email">Your email</label>
<input maxlength="40" name="email" size="40" type="text" />
You just put a new paragraph or line break tag before each <label> like this:
<label for="name">Yuor name here</label>
<input maxlength="60" name="name" type="text" />

<br />

<label for="email">Your email</label>
<input maxlength="40" name="email" size="40" type="text" />

1,098 Posts

microcipcip Reply #4, 16 years, 3 months ago

Open an HTML editor like Dreamweaver and create a table, or style them with CSS

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

659 Posts

anso Reply #5, 16 years, 3 months ago

CSS is your friend !

In your css file, you can do something like


label{
display: inline-block;
width: 120px;
float :left;
margin-right: 5px;
}

input{
width: 200px;
float: left;
}

In your html add a
as arkunt said in his post, you can embrace each pair of <label> and <input> between <div> to be safe with the floating elements.

Hope this helps
Cheers