Formit &submitVar Questions

I have two forms on a page and the Docs says to do this

If you have multiple forms on a page, set the &submitVar property on your Snippet call to a name of a form element within the form (ie, &submitVar=form1-submit). This tells FormIt to only process form requests with that POST variable. Multiple forms should be used with INPUT type=“submit” name=“form1-submit”, button elements have been reported not working.

So i get that I should add &submitVar to my call as such:

               [[!FormIt?
&hooks=`email,FormItAutoResponder,redirect`
&emailTpl=`subNotiTpl`
&emailSubject=`[[++site_name]] You have a New Subscriber`	
&emailTo=`stories@myaddress`
&redirectTo=`25`           
&validate=`email:email:required` 
&fiarTpl=`sentEmailTpl`
&fiarSubject=`Thanks for Subscribing`
&fiarToField=`email`
&fiarFromName=`Ampli`
   &submitVar=`myformname`]]

But then is says

Multiple forms should be used with INPUT type=“submit” name=“form1-submit”, button elements have been reported not working.

My button (code below) doesn’t have an input type so I’m not sure how to rewrite that part of the form to make it work.

Any pointers appreciated.

                             <input type="email" class="form-control" placeholder="Email..." name="email" id="email" value="[[!+fi.email]]"/>
                          </div>
                        </div>
                        <div class="col-md-3">
                                  <div class="form-group">
                          <button type="submit" class="btn btn-primary btn-round btn-block">Get Secrets</button>```

Thanks

submitVar can refer to any form control in your form, not just submit inputs. For more flexibility, you can use hidden fields for this.

Adding this to your form should be enough:
<input type="hidden" name="form1-submit" value="any value">

Your FormIt call should look this:

[[!FormIt?
&hooks=`email,FormItAutoResponder,redirect`
&emailTpl=`subNotiTpl`
&emailSubject=`[[++site_name]] You have a New Subscriber`	
&emailTo=`stories@myaddress`
&redirectTo=`25`           
&validate=`email:email:required` 
&fiarTpl=`sentEmailTpl`
&fiarSubject=`Thanks for Subscribing`
&fiarToField=`email`
&fiarFromName=`Ampli`
&submitVar=`form1-submit`]] //  set to the name of the hidden field above

Of course, you’d do the same for your second form:
<input type="hidden" name="form2-submit" value="any value">

2 Likes

@treigh is right. I use hidden fields by default, but I believe this is why I started.

Treigh,

Well that seemed to work.

Many thanks :smiley:

My button (code below) doesn’t have an input type so I’m not sure how to rewrite that part of the form to make it work.

Just to extend on this you do have an input type on your button, where it says type=submit. But since buttons can be problematic with submitvar you may need to change it to an input tag instead of a button tag.

<button type="submit" class="btn btn-primary btn-round btn-block">Get Secrets</button>

becomes

<input type="submit" class="btn btn-primary btn-round btn-block" value="Get Secrets">

Or just use the hidden input fields as suggested :slight_smile:

Yeah i saw that,

but the button type="submit is how the modal form was originally coded and modals can be tempramental if things aren’t coded just so, as i’ve discovered.

So I didn’t want to mess too much with the orignal code.

Anyway, as i said above, the hidden fields solution works just fine so i’ll stick with that.

Hi all,

me again on my ongoing journey beginning Formit.

For anyone who’s interested I’ve used Formit in a Modal Popup.

https://ampli.buzz/modal-test

It works, which always makes me happy.

Click the Subscribe Button at the far right of the navbar to see how it looks.

But don’t actually subscribe otherwise you will really be subscribed.

PS Thanks to everyone who’ve helped get to grips with Formit over the past few days. :grin:

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”.