Is there a beginner’s Formit tutorial anywhere?
And I do mean beginners. I’ve looked at the modx documetnation and can’t make any sense of it.
Thanks
Have a look at this video. It seems quite straightforward => https://www.youtube.com/watch?v=_YKjA7jc3Tc
1 Like
Thanks but l already saw that, way too advanced.
I don’t need a multi field form, I just need one.
Plus he moves thru it far too quickly.
As I said i need a beginner’s video.
There may not be a beginner’s video tutorial, so to speak, but using FormIt is very straightforward.
For example, creating a contact form could be as easy as pasting the following code inside a chunk called myContactForm. Then, you’d reference this chunk on your contact page => [[$myContactForm]]
<!-- myContactForm -->
[[!FormIt?
&hooks=`email,redirect`
&emailTpl=`myEmailChunk`
&emailTo=`user@example.com`
&redirectTo=`123`
&validate=`
name:required,
email:email:required,
subject:required,
text:required:stripTags
]]
<p>[[!+fi.validation_error_message]]</p>
<form action="[[~[[*id]]]]" method="post" class="form">
<label for="name">
Name:
<span class="error">[[!+fi.error.name]]</span>
</label>
<input type="text" name="name" id="name" value="[[!+fi.name]]">
<label for="email">
Email:
<span class="error">[[!+fi.error.email]]</span>
</label>
<input type="text" name="email" id="email" value="[[!+fi.email]]">
<label for="subject">
Subject:
<span class="error">[[!+fi.error.subject]]</span>
</label>
<input type="text" name="subject" id="subject" value="[[!+fi.subject]]">
<label for="text">
Message:
<span class="error">[[!+fi.error.text]]</span>
</label>
<textarea name="message" id="message" cols="55" rows="7" value="[[!+fi.text]]">[[!+fi.text]]</textarea>
<div class="form-buttons">
<input type="submit" value="Send Contact Inquiry">
</div>
</form>
Basically,
&hooks=email,redirect is telling FormIt how to handle the form data, once submitted. In this case, the email hook is used to send the form data to the address specified in the &emailTo propperty.
The redirect hook is telling FormIt to redirect the user to the page specified in the &redirectTo property.
The &emailTpl is the name of the chunk used to email your form data. Think of this as your email template.
The &validate property tells FormIt which fields to validate and which specific validator to use. name:required means the name can’t be empty. email:email:required means, the email field must contain a valid email address and can’t be empty.
If any of these validation rules fails, the form won’t be submitted. Any validation errors found will be printed back to the user in the following format:
[[!+fi.error.fieldname]]
1 Like
Above can be found in de docs, in case you missed it.
1 Like
FYI, if all you need is a simple contact form, take a look at the SPForm extra.
Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: Bob’s Guides
My MODX Extras
Bob’s Guides is now hosted at A2 MODX Hosting
Above can be found in de docs, in case you missed it.
Excellent, exactly what I was looking for. Yes i did miss this page.
Thanks 
OK
what have i missed
[[!FormIt?
&hooks=`email,redirect`
&emailTpl=`sentEmailTpl`
&emailSubject=`[[++site_name]] Message from Me`
&emailTo=`my@email`
&redirectTo=`25`
&validate=`email:email:required` ]]
[[!+fi.validation_error_message:notempty=<p>[[!+fi.validation_error_message]]</p>]]
</div>
</div>
<div class="col-sm-4">
<button type="button" id="submit" class="btn btn-primary btn-round btn-block">Subscribe</button>
</div>
</div>
</form>
I know I haven’t got the correct submit function in there but I’m not sure what’s required for that to be added to the last line of the above code.
and Tpl
This is the Formit Email Chunk.
([[+email]]) Wrote:
[[+text]]
All I want is to captcha an email address , nothing else.
PS I do have a real email address in the snippet, I just vanilla-ised it above.
PPS Still getting the hang of the new code inputs for this forum.
What’s happening when you try to submit the form ? You’ve only posted a part of your HTML so can’t see the actual field you’re trying to capture.
But I’d suggest changing button type to submit as this could be preventing the form from even submitting. Also ensure that the field name in your html has a name attribute of ‘text’ and the email field has an attribute of ‘email’
Just noticed that, but actually I have posted all the html it’s just not showing.
When I go to edit the above post it’s all there, so I’m just now trying to figure out why it isn;t showing.
As for what happens when i submit the form, well nothing, probably because I haven’t correctly coded the input function.
Give me a few minutes to figure out why the code isn;t showing in the post.
Just tried again, for some reason the code option for this forum won’t show all the code.
Damn.
Try pastebin.com and just post a link. In any case changing the button type to submit should at least submit the form and we can go from there 
So this bit is just the design elements at the end of the form before i add any formit stuff to it
<button type="button" id="submit" class="btn btn-primary btn-round btn-block">Subscribe</button>
I’m assuming I need to add something like this to it but I’m not sure which bits and where
<input type="submit" value="Send Contact Inquiry" />
Hope that’s clear.
Try this:
<button type="submit" id="submit" class="btn btn-primary btn-round btn-block">Subscribe</button>
1 Like
Bingo!
Many thanks. All working so far.
Still got a bit more to do but it’s Friday night and I’m on my second frosty tube, so probably shouldn’t do too much more tonight.
Thanks again.
Great, glad you got it working 
Also appreciate the feedback on the YT video. I’ll release a more simplified and thorough version dedicated to formit in the coming weeks.
Thanks,
I’m a long time Modx user, going back to Evo days, but I’ve rarely used Formit. (I know, how is that possible?)
I’m not a coder, but once I understand how things work in a monkey see monkey do way I usually get the hang of things.
So video’s and screenshots are godsends
Thanks again for all your help and patience.
OK,
here’s where I’m at.
I added First and last name calls.
[[!FormIt?
&hooks=`email,redirect`
&emailTpl=`sentEmailTpl`
&emailSubject=`[[++site_name]] Message from Me`
&emailTo=`my@emailaddress`
&redirectTo=`25`
&validate=`email:email:required` ]]
[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]
<form action="[[~[[*id]]]]" method="post">
<div class="row">
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="now-ui-icons users_circle-08"></i></span>
</div>
<input type="text" class="form-control" placeholder="First Name..." autocomplete="fullname" name="firstname" id="firstname" value="[[!+fi.firstname]]" />
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="now-ui-icons text_caps-small"></i></span>
</div>
<input type="text" class="form-control" placeholder="Last Name..." autocomplete="name" name="lastname" id="lastname" value="[[!+fi.lastname]]">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="now-ui-icons ui-1_email-85"></i></span>
</div>
<input type="text" class="form-control" placeholder="Email Name..." name="email" id="email" value="[[!+fi.email]]">
</div>
<button type="submit" id="submit" class="btn btn-primary btn-round btn-block">Get Secrets</button>
</div>
</div>
</form>
It all works, although I’m not entirely sure why.
Is the syntax correct?
Have i left anything out that needs to be in there?
From a MODX formit point of view if it works it’s fine
From a front end developer point of view there are a few things you could improve on. I can’t see the opening form tag and possibly some other open divs so I’ll only comment on what I can see. However just ensure you have this to open your form:
<form action="[[~[[*id]]]]" method="post">
and that all divs that are open are closed, I think there are two currently open if the code posted is correct.
-
You may want to consider using the label tag where you have your ‘input-group-prepend’ class.
-
autocomplete attribute only accepts ‘on’ and ‘off’ as far as I know
-
You could also look at putting in different aria role for accessibility, if you wanted to go a few steps further you could also consider schema tags and tabindex
-
You could also consider using type=“email” for the email field. (it’ll bring up specific keyboard layouts for mobile and tablet users)
-
This may have been done intentionally but not everything needs an id. If you’re using it to style elements specifically in CSS then fair enough. I know when I first started with formit though I gave the name and id as I wasn’t sure which one was needed, but it’s just name for formit.
Arrrgh, the code pasting options for this forum still aren’'t working right for me
Yes the <form method="post" action="[[~[[*id]]]]"> is at the start of the html
The divs are all matched, if they weren’t my layout wouldn’t work.
The <div class="input-group-prepend"> is how the form was originally coded and styled. so I’m just retrofitting whatever Formit bits into the code where I think they go.
Same with autocompete tt’s how the original form was coded.
Schema, hadn’t even thought of that yet, baby steps first, but it’s a good point, I’ll do that once I get eveything else shipshape.
On your last point, yeah, that’s the bits I wasn;t sure of . What names, id, values and types to use. I just used what I had and added what I thought the relevant formit code should be.
So in this line <input type="text" class="form-control" placeholder="Last Name..." autocomplete="name" name="lastname" id="lastname" value="[[!+fi.lastname]]"/>
The first half is the the origianal form html <input type="text" class="form-control" placeholder="Last Name..." autocomplete="name"
And the second half name="lastname" id="lastname" value="[[!+fi.lastname]]"/> is the Formit bit.
As I said it works, and it looks pretty good on the page, but you know I like to know what I’m doing so I don;t perpetuate stupid mistakes down the line.
Thanks for your detailed input