how many files needed to formIt contact form please

Dear all,

A total noob here. I went through all possible tutorials about FormIt, still can't figure out how many (what kind of) files i should create and in which files i should put which codes. I am using MODX Revolution 2.2.7-pl (traditional). I would like to create just a simple form with name, email, comment fields. I don't know where exactly (in what kind of file, resource page or template) to put the HTML code with the fields and submit query and where to call the FormIt. I learned the difference between resource pages, template, chunks, and snippets. The tutorials say to call the Formit from a resource page, but when i call it from there, it just doesn't work, the HTML code doesn't parse. Next to the Home page, I created a blank Contact page and then I placed the form HTML code in the Content field and when i load my Contact page i get my HTML tags in the browser, when i put the code making the Content area "HTML edit" then i can see the form fields, but i didn't get any email when i clicked the Submit button (localhost, XAMPP). I have no idea how it works. I am very confused.

I just need an example guiding me to run say, only two fields: name and email, and running properly so that i can figure out myself if i should create a resource page or chunk or template.

Thanks and your help will be greatly appreciated.

Post your markup code and I'll walk through it.

Hi Svetoslav,

Thank you for your prompt response. I copied the following code from a tutorial:


<div class="well marginTop25"><form action="[[~[[*id]]]]" method="post">
<div id="name" class="[[--!+fi.error.name:notempty=`control-group error`]]"><label for="name">Name: [[!+fi.error.name:notempty=`<span class="label label-important">This is a required field.</span>`]]</label>
<div class="controls"><input class="input-block-level" type="text" name="name" value="[[!+fi.name]]" /></div>
</div>
<div id="email" class="[[--!+fi.error.email:notempty=`control-group error`]]"><label for="email">Email: [[!+fi.error.email:notempty=`<span class="label label-important">This is a required field.</span>`]]</label>
<div class="controls"><input class="input-block-level" type="text" name="email" value="[[!+fi.email]]" /></div>
</div>
<div id="comment" class="[[--!+fi.error.comment:notempty=`control-group error`]]"><label for="comment">Comment: [[!+fi.error.comment:notempty=`<span class="label label-important">This is a required field.</span>`]]</label>
<div class="controls"><textarea class="input-block-level" name="comment" rows="10" cols="30"></textarea></div>
</div>
<input class="btn btn-primary" type="submit" value="Submit" /></form></div>
</div>


And i placed it in the content field of my Contact resource/page. That's all i did. I don't know if i should have created a template or TV or chunk or snippet. I think i placed the code in a wrong place (resource/ page), because when i loaded my Contact page in a browser, the browser displayed unparsed, raw HTML code. So i clicked on HTML Edit and copied the code in there, i could see the form fields parsed but when i clicked on the submit button, i did not receive anything to my email.

Thank you.

The FormIt snippet call is missing here.
Put it at the top (before the markup). In your case something like this:


Then make the "MyEmailChunk" chunk and put your email markup here. Something like this:


So, FormIt snippet will capture the input of the form, will validate it (name:required, email:email:required, comment:required), and sanitize the input of the comment field (comment:stripTags). Then will send a mail to "[email protected]" using the markup of MyEmailChunk and finally will redirect to resource with id 123 (the "thank you" page).

Do you get the idea?
Let me know if you need more help.

Svetoslav

hi Svetoslav,

This is the whole code. I think i had cut the Snippet call part for my previous post thinking the form field part was the markup code you asked for.

<div class="container">[[!FormIt? &hooks=`email` &emailFrom=`[email protected]` &emailTpl=`MyEmailChunk` &emailTo=`[[+email]]` &emailSubject=`Your Subject Goes Here` &validate=`name:required, email:email:required, comment:required:stripTags` &successMessage=`
<div class="alert alert-success marginTop25"><button class="close" type="button" data-dismiss="alert">×</button>
<h3>Your comment has been submitted successfully, please check your email.</h3>
</div>
` &validationErrorMessage=`
<div class="alert alert-error"><button class="close" type="button" data-dismiss="alert">×</button>
<h3>Please review the following errors:</h3>
<ul>[[!+fi.error.name:!empty=`
<li><a href="[[~[[*id]]]]#name">Name is a required field</a></li>
`]] [[!+fi.error.email:!empty=`
<li><a href="[[~[[*id]]]]#email">Email is a required field</a></li>
`]] [[!+fi.error.comment:!empty=`
<li><a href="[[~[[*id]]]]#comment">Comment is a required field</a></li>
`]]</ul>
</div>
` ]] [[!+fi.validation_error_message:!empty=`
<div class="alert alert-error marginTop25"><button class="close" type="button" data-dismiss="alert">×</button>
<h3>Please review the following errors:</h3>
<ul>[[!+fi.error.name:!empty=`
<li><a href="[[~[[*id]]]]#name">Name is a required field</a></li>
`]] [[!+fi.error.email:!empty=`
<li><a href="[[~[[*id]]]]#email">Email is a required field</a></li>
`]] [[!+fi.error.comment:!empty=`
<li><a href="[[~[[*id]]]]#comment">Comment is a required field</a></li>
`]]</ul>
</div>
`]] [[!+fi.successMessage]]
<div class="well marginTop25"><form action="[[~[[*id]]]]" method="post">
<div id="name" class="[[--!+fi.error.name:notempty=`control-group error`]]"><label for="name">Name: [[!+fi.error.name:notempty=`<span class="label label-important">This is a required field.</span>`]]</label>
<div class="controls"><input class="input-block-level" type="text" name="name" value="[[!+fi.name]]" /></div>
</div>
<div id="email" class="[[--!+fi.error.email:notempty=`control-group error`]]"><label for="email">Email: [[!+fi.error.email:notempty=`<span class="label label-important">This is a required field.</span>`]]</label>
<div class="controls"><input class="input-block-level" type="text" name="email" value="[[!+fi.email]]" /></div>
</div>
<div id="comment" class="[[--!+fi.error.comment:notempty=`control-group error`]]"><label for="comment">Comment: [[!+fi.error.comment:notempty=`<span class="label label-important">This is a required field.</span>`]]</label>
<div class="controls"><textarea class="input-block-level" name="comment" rows="10" cols="30"></textarea></div>
</div>
<input class="btn btn-primary" type="submit" value="Submit" /></form></div>
</div>


I really do wonder if it is correct to put this code with Form fields and Formit Snippet call inside the Content field of my Contact page? Of should i have created and put it in a template? Or a Chunk?

I just don't know where and how to put these codes or code parts in all those tutorials. Where to put those codes in the manager to make the code up and running?

Have you read my FormIt tutorial?

Hope it helps, good luck.

yes, i think i copied the forms Html code from your tutorial. but i still can't understand in where/ which file to place the forms Html code. i put it in my Contacts resource page. not able to receive email. anyone helps? i am new to both programming and Modx. struggling to find out basics. thay's why i did not understand even if i read your tutorial.
please help. thanks.

i finally understood everything and got it to work. my smtp port was closed in modx and php. only this problem made me confused with everything. some things are not easy to figure out for total beginners in this field. anyways, forward smoothly