Formit Beginners Tutorial?

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?
:thinking:

From a MODX formit point of view if it works it’s fine :slight_smile:

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

No probs. I think the code missing might be due to using single backticks, which modx tags also uses so it opens and closes the highlighting. Try surrounding the start and end of the code with three backticks ``` and hopefully that’ll sort out dropping code in here in the future :slight_smile:

OK,

next question.

What I’m trying to do is create a subscription form, and I’ve already got the first part working.
What i now want to do is
1: send a success email to the new subscriber
2: save the details to a db

Any pointers on the best way to do those?

You can do it with your own custom hooks, or you can use one of the pre-made ones:

https://docs.modx.com/extras/revo/formit/formit.hooks/formit.hooks.formitautoresponder
https://docs.modx.com/extras/revo/formit/formit.hooks/formit.hooks.formitsaveform

Yeah,

been trying the autoresponder, can’t get it to work. Must be missing something in my call

[[!FormIt?
&hooks=`email,redirect,FormItAutoResponder`
&emailTpl=`sentEmailTpl`
&emailSubject=`[[++site_name]] Message from Me`	
&emailTo=`my@email`
&redirectTo=`25`           
&validate=`email:email:required` 
&fiarTpl=`subResponseTpl`
&fiarSubject=`Thanks for Subscribing`
&fiarToField=`fi.email`
&fiarFromName=`Me`

]]

Try putting it before the redirect hook.
e.g.
&hooks=`email,FormItAutoResponder,redirect`

Made no difference.

Maybe the &fiarToField is wrong I’ve tried both email and fi.email.

The &fiarTpl=subResponseTpl is pretty simple

<p>[[+fi.firstname]], </p>
<p>Thanks for signing up.</p>

I can confirm that &fiarToField should be the ‘name’ attribute of the field the user is entering their email into, not the placeholder value.

Then in the TPL you use the placeholders as you have.

Based on the call above, are you getting your emailTo email correctly and it’s just the fiar one that’s not working?

Have you checked this site is able to send email full stop? There’s a QuickEmail extra to test that easily if you haven’t do so some way yet.
https://docs.modx.com/extras/revo/quickemail

It can send emails because it is sending me the first part of the call and using the correct template for that. That is the form works on the site as far as submission ad redirect to success page and I get the first email.

It’s just the second half with the autoresponder part that’s not firing for some reason.

The email names in the form code are as follows
<input type="text" class="form-control" placeholder="Email Name..." name="email" id="email" value="[[!+fi.email]]">

As I said, I’ve tried both email and fi.email so not sure what’s broken.

How are you sending the emails? Is it a channel where you can see logs to see if a message is being generated vs not creating one at all?

Also, I believe @muzzstick was right - ‘FormItAutoResponder’ it will need to be before ‘redirect’ in the hooks order.

Josh,

not sure about the question.

The emails are being sent thru Modx.

There’s nothing in the modx error logs to show a problem.

I’ve also checked in cpanel and all i can see is the first email being sent, but there’s nothing for the autoresponder.

So my hunch is that it is simply not being generated. So I’m thinking there’s a missed problem in the call or the template somewhere.

And yes Formitautoresponder is before redirect

[[!FormIt?
	&hooks=`email,FormItAutoResponder,redirect`
	&emailTpl=`sentEmailTpl`
	&emailSubject=`[[++site_name]] Message from Me`	
	&emailTo=`my@email address`
	&redirectTo=`25`           
	&validate=`email:email:required` 
	&fiarTpl=`subResponseTpl`
	&fiarSubject=`Thanks for Subscribing`
	&fiarToField=`email`
	&fiarFromName=`Ampli`
]]

You can see the form in action here https://ampli.buzz/signuptest

Use the form in the middle of the page,
not the modal in the top menu bar.

Arrgh. i’m an idiot. Made a silly mistake.

More soon.

Would you mind creating new issues in new threads? It’ll help new users find answers to questions easily rather than one massive thread with loads of different issues and answers. Also don’t forget to mark answers as ‘solved’

I’ll start a new thread,https://community.modx.com/t/weird-formit-issues-call-changes-not-being-processed/472

but there’s no option to mark this question as solved or best answer in this thread.

I think there should be a check mark box at the bottom of users posts.

Not on all posts or categories I’ve been told, and certainly not on this one.

Already had this discussion at Show "Solved-Icon" on the forums main page

So as long as no-one else comments on this thread it should close itself in two days.

Hey,

I moved both topics into the support category. I’m going to make an Extras subcategory here, but you should be able to do what you want now.

1 Like

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.