FormIt help

708 Posts

Eko Reply #1, 11 years, 8 months ago

I already posted this on the FormIt forum but I thought it might get more responses over here.
http://forums.modx.com/thread/79306/can-t-get-formit-to-work#dis-post-436995

Thanks

This question has been answered by multiple community members. See the first response.

Todd

708 Posts

Eko Reply #2, 11 years, 8 months ago

Responses are more frequent on this forum than FormIt so I'm reposting here.

I'm still unable to get multiple forms on the same page to work and would appreciate any insight.

As shown in the post from my original thread on the FormIt forum http://forums.modx.com/thread/79306/can-t-get-formit-to-work#dis-post-437419 the Form 2 snippet (and form) works as expected when it's the only form on the page. However it's when two forms are on the same page that's causing trouble. Below is the form that's not working.

Revo 2.2.4

				   [[!FormIt?
					    	&hooks=`spam,email,redirect`
					    	&emailTpl=`advertiseEmail`
					    	&emailSubject=`Advertising Inquiry`
					    	&emailTo=`[email protected]`
					    	&redirectTo=`2`
					    	&submitVar=`adSubmit`
					    	&validate=`first:required, last:required, mailAd:required, city:required, state:required, zip:required, phone:required, business:required, website:required,
					    	email:email:required`
					    ]]
        				[[!+fi.error_message:notempty=`<p class="error">[[!+fi.error_message]]</p>`]]

						<form action="[[~[[*id]]]]" method="post" id="advertiseForm">
							<input type="hidden" name="nospam:blank" value="" />

							<fieldset>
								<label for="first">
									First:

									<span class="error">[[!+fi.error.first]]</span>
								</label>
								<input type="text" name="first" id="first" value="[[!+fi.first]]" class="" />

								<label for="last">
									Last:

									<span class="error">[[!+fi.error.last]]</span>
								</label>
								<input type="text" name="last" id="last" value="[[!+fi.last]]" />
							</fieldset>

							<fieldset>
								<label for="mailing">
									Mailing Address:

									<span class="error">[[!+fi.error.mailing]]</span>
								</label>
								<input type="text" name="mailing" id="mailing" value="[[!+fi.mailing]]" />
							</fieldset>

							<fieldset>
								<label for="city">
									City:

									<span class="error">[[!+fi.error.city]]</span>
								</label>
								<input type="text" name="city" id="city" value="[[!+fi.city]]" />

								<label for="state">
									State:

									<span class="error">[[!+fi.error.state]]</span>
								</label>
								<input type="text" name="state" id="state" value="[[!+fi.state]]" />

								<label for="zip">
									Zip Code:

									<span class="error">[[!+fi.error.zip]]</span>
								</label>
								<input type="text" name="zip" id="zip" value="[[!+fi.zip]]" />
							</fieldset>

							<fieldset>
								<label for="phone">
									Phone:

									<span class="error">[[!+fi.error.phone]]</span>
								</label>
								<input type="text" name="phone" id="phone" value="[[!+fi.phone]]" />

								<label for="business">
									Business Name:

									<span class="error">[[!+fi.error.business]]</span>
								</label>
								<input type="text" name="business" id="business" value="[[!+fi.business]]" />

								<label for="website">
									Website:

									<span class="error">[[!+fi.error.website]]</span>
								</label>
								<input type="text" name="website" id="website" value="[[!+fi.website]]" />
							</fieldset>

							<input type="submit" name="adSubmit" value="Send" id="adSubmit" class="submitButton bttn" />
						</form>

Todd

483 Posts

Fuzzical Logic Reply #3, 11 years, 8 months ago

However it's when two forms are on the same page that's causing trouble. Below is the form that's not working.

This is not unusual if both forms use the same action URL. The result is that for every form submission one FormIt validates and the other fails. This was actually a driving force for AJAX Revolution, which when used properly, resolves this conflict. (This is not necessary nor is it desirable if you aren't using AJAX)

The concept is essentially this: Have your form action URLs go to different pages. Each should have its own FormIt call. This may not be necessary, however, I have found it to be a consistent fix.

Website: Extended Dialog Development Blog: on Extended Dialog
Add-ons: AJAX Revolution, RO.IDEs Editor & Framework (in works) Utilities: Plugin Compatibility List
Tutorials: Create Cross-Context Resources, Cross-Context AJAX Login, Template-Based Actions, Remove Extensions from URLs

Failure is just another word for saying you didn't want to try. "It can't be done" means "I don't know how".

708 Posts

Eko Reply #4, 11 years, 8 months ago

Quote from: fuzzicallogic at Sep 19, 2012, 07:49 AM

Have your form action URLs go to different pages. Each should have its own FormIt call.

When you say "form action URLs go to different pages" do you mean each should redirect to different pages upon success or something else?

Each form does use a separate FormIt call:

[[!FormIt?
					    	&hooks=`spam,email,redirect`
					    	&emailTpl=`subscribeEmail`
					    	&emailSubject=`New Subscriber`
					    	&emailTo=`[email protected]`
					    	&redirectTo=`2`
					    	&submitVar=`subscribeSubmit`
					    	&validate=`name:required,
					    	email:email:required`
					    ]]

[[!FormIt?
					    	&hooks=`spam,email,redirect`
					    	&emailTpl=`advertiseEmail`
					    	&emailSubject=`Advertising Inquiry`
					    	&emailTo=`[email protected]`
					    	&redirectTo=`2`
					    	&submitVar=`adSubmit`
					    	&validate=`first:required, last:required, mailing:required, city:required, state:required, zip:required, phone:required, business:required, website:required,
					    	email:email:required`
					    ]]

Todd

483 Posts

Fuzzical Logic Reply #5, 11 years, 8 months ago

When you say "form action URLs go to different pages" do you mean each should redirect to different pages upon success or something else?

Something else. FormIt is a "catcher" of submitted forms. The form's action is the actual "pitcher" and refers to the Form HTML element. This means they are "pitching" to the same page. It is possible that the "catchers" are arguing about who should grab the ball.

Since they are both submitting to [ [~[ [*id] ] ] ], you may be running into a conflict. By making the two form elements go to a different URL, you can eliminate this as a potential problem.

For Example:

<form action="[[~id1]]" method="post" id="advertiseForm">
   ... Form 1 contents
</form>
<form action="[[~id2]]" method="post" id="advertiseForm">
   ... Form 2 contents
</form>

Then in the Resources with the IDs, place the appropriate FormIt call for only that form.

ID1

[[!FormIt?
    &hooks=`spam,email,redirect`
    &emailTpl=`subscribeEmail`
    &emailSubject=`New Subscriber`
    &emailTo=`[email protected]`
    &redirectTo=`2`
    &submitVar=`subscribeSubmit`
    &validate=`name:required,
                            email:email:required`
]]

ID2

[[!FormIt?
    &hooks=`spam,email,redirect`
    &emailTpl=`advertiseEmail`
    &emailSubject=`Advertising Inquiry`
    &emailTo=`[email protected]`
    &redirectTo=`2`
    &submitVar=`adSubmit`
    &validate=`first:required, last:required, mailing:required, city:required, state:required, zip:required, phone:required, business:required, website:required,
                            email:email:required`
]]

[ed. note: fuzzicallogic last edited this post 11 years, 8 months ago.]

Website: Extended Dialog Development Blog: on Extended Dialog
Add-ons: AJAX Revolution, RO.IDEs Editor & Framework (in works) Utilities: Plugin Compatibility List
Tutorials: Create Cross-Context Resources, Cross-Context AJAX Login, Template-Based Actions, Remove Extensions from URLs

Failure is just another word for saying you didn't want to try. "It can't be done" means "I don't know how".

708 Posts

Eko Reply #6, 11 years, 8 months ago

Good explanation, but it's still not working.

Form 1 works fine but Form 2 does not. Also, submitting Form 2 throws an 'email' error in Form 1. See each below.

FORM 1

						[[!FormIt?
					    	&hooks=`spam,email,redirect`
					    	&emailTpl=`subscribeEmail`
					    	&emailSubject=`New Subscriber`
					    	&emailTo=`[email protected]`
					    	&redirectTo=`2`
					    	&submitVar=`subscribeSubmit`
					    	&validate=`name:required,
					    	email:email:required`
					    ]]
        				[[!+fi.error_message:notempty=`<p class="error">[[!+fi.error_message]]</p>`]]

						<form action="[[~id1]]" method="post" id="subscribeForm">
							<input type="hidden" name="nospam:blank" value="" />

							<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]]" />

							<input type="submit" name="subscribeSubmit" value="Subscribe" id="subscribeBttn" class="submitButton bttn" />
						</form>

FORM 2

						[[!FormIt?
					    	&hooks=`spam,email,redirect`
					    	&emailTpl=`advertiseEmail`
					    	&emailSubject=`Advertising Inquiry`
					    	&emailTo=`[email protected]`
					    	&redirectTo=`2`
					    	&submitVar=`adSubmit`
					    	&validate=`first:required, last:required, mailing:required, city:required, state:required, zip:required, phone:required, business:required, website:required,
					    	email:email:required`
					    ]]
        				[[!+fi.error_message:notempty=`<p class="error">[[!+fi.error_message]]</p>`]]

						<form action="[[~id2]]" method="post" id="advertiseForm">
							<input type="hidden" name="nospam:blank" value="" />

							<fieldset>
								<label class="floatLt" for="first">
									First:<br />
									<span class="error">[[!+fi.error.first]]</span>
								</label>
								<input type="text" name="first" id="first" value="[[!+fi.first]]" class="" />

								<label class="floatLt" for="last">
									Last:<br />
									<span class="error">[[!+fi.error.last]]</span>
								</label>
								<input type="text" name="last" id="last" value="[[!+fi.last]]" />
							</fieldset>

							<fieldset>
								<label class="floatLt" for="mailing">
									Mailing Address:<br />
									<span class="error">[[!+fi.error.mailing]]</span>
								</label>
								<input type="text" name="mailing" id="mailing" value="[[!+fi.mailing]]" />
							</fieldset>

							<fieldset>
								<label class="floatLt" for="city">
									City:<br />
									<span class="error">[[!+fi.error.city]]</span>
								</label>
								<input type="text" name="city" id="city" value="[[!+fi.city]]" />

								<label class="floatLt" for="state">
									State:<br />
									<span class="error">[[!+fi.error.state]]</span>
								</label>
								<input type="text" name="state" id="state" value="[[!+fi.state]]" />

								<label class="floatLt" for="zip">
									Zip Code:<br />
									<span class="error">[[!+fi.error.zip]]</span>
								</label>
								<input type="text" name="zip" id="zip" value="[[!+fi.zip]]" />
							</fieldset>

							<fieldset>
								<label class="floatLt" for="phone">
									Phone:<br />
									<span class="error">[[!+fi.error.phone]]</span>
								</label>
								<input type="text" name="phone" id="phone" value="[[!+fi.phone]]" />

								<label class="floatLt" for="business">
									Business Name:<br />
									<span class="error">[[!+fi.error.business]]</span>
								</label>
								<input type="text" name="business" id="business" value="[[!+fi.business]]" />

								<label class="floatLt" for="website">
									Website:<br />
									<span class="error">[[!+fi.error.website]]</span>
								</label>
								<input type="text" name="website" id="website" value="[[!+fi.website]]" />
							</fieldset>

							<input type="submit" name="adSubmit" value="Send" id="adSubmit" class="submitButton bttn" />
						</form>

Todd

483 Posts

Fuzzical Logic Reply #7, 11 years, 8 months ago

Unfortunately, based on the code you are presenting, I'm not sure that you got the idea... Can you confirm that you have the following 3 resources?

Primary Resource with both <forms>
Resource with just the FormIt Snippet call for the first form
Resource with just the FormIt Snippet call for the second form

Website: Extended Dialog Development Blog: on Extended Dialog
Add-ons: AJAX Revolution, RO.IDEs Editor & Framework (in works) Utilities: Plugin Compatibility List
Tutorials: Create Cross-Context Resources, Cross-Context AJAX Login, Template-Based Actions, Remove Extensions from URLs

Failure is just another word for saying you didn't want to try. "It can't be done" means "I don't know how".

708 Posts

Eko Reply #8, 11 years, 8 months ago

Sure, I have:

- One Primary Resource (page) with the 2 Chunk calls below.
- One Chunk for Form 1 (as shown above). Includes FormIt call and form structure.
- One Chunk for Form 2 (as shown above). Includes FormIt call and form structure.

Todd

☆ A M B ☆
24,524 Posts

sottwell Reply #9, 11 years, 8 months ago

Chunks are not resources. You need three resources, one for the initial page with both forms displayed, and two for the two different FormIt snippets to process the two different form posts.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

708 Posts

Eko Reply #10, 11 years, 7 months ago

I feel like I'm getting conflicting info. In the official FormIt docs it states:

Simply place the FormIt snippet call into the Resource that contains the form you want to use ... you literally put the snippet call along side the form you want it to process.

To me that means the Snippet call and form are placed in the same Resource (page) which means (in my case) 1 Resource, not three. Am I misunderstanding the docs?

But you guys are saying there needs to be 3 Resources: one for the 2 forms and two others for each of the Snippet calls.

I'm chasing my tail. No matter what I try I can only get one form to work. Further clarification?

Todd

Answered FormIt help