I’ve not had this issue before. I have a WP site that I am moving over to my server and converting it to Modx. I am recreating the forms on the site with FormIt. The forms work fine until I add 6 or more inputs to the form, then it just outputs all the raw tags onto the frontend and the form no longer works. It does not seem to matter what input I remove, as long as there are less than 6 inputs the form works fine.
Here is current code for the form:
[[!FormIt?
&hooks=`recaptchaV2,email`
&emailTpl=`myEmailChunk`
&emailTo=`email@email.com`
&validate=`nospan:blank,
name:required,
phone:required,
email:email:required,
position:required,
zip:required`,
college:required`
]]
[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]
<form action="[[~[[*id]]]]" method="post" class="form">
<input type="hidden" name="nospam" value="" />
<p>
<label for="name">
Name (required)
<span class="error">[[!+fi.error.name]]</span>
</label>
<br>
<input size="40" class="wpcf7-form-control wpcf7-text" type="text" name="name" id="name" value="[[!+fi.name]]" />
</p>
<p>
<label for="phone">
Phone Number (required)
<span class="error">[[!+fi.error.phone]]</span>
</label>
<br>
<input size="40" class="wpcf7-form-control wpcf7-text" type="tel" name="phone" id="phone" value="[[!+fi.phone]]" />
</p>
<p>
<label for="email">
Email (required)
<span class="error">[[!+fi.error.email]]</span>
</label>
<br>
<input size="40" class="wpcf7-form-control wpcf7-text" type="text" name="email" id="email" value="[[!+fi.email]]" />
</p>
<p>
<label for="zip">
Zip Code (required)
<span class="error">[[!+fi.error.zip]]</span>
</label>
<br>
<input size="40" class="wpcf7-form-control wpcf7-text" type="text" name="zip" id="zip" value="[[!+fi.zip]]" />
</p>
<p>
<label for="position">
Position Seeking (required)
<span class="error">[[!+fi.error.position]]</span>
</label>
<br>
<select name="position" class="wpcf7-form-control wpcf7-select">
<option value="medical" [[!+fi.color:FormItIsSelected=`medical`]] >Medical</option>
<option value="dental" [[!+fi.color:FormItIsSelected=`dental`]] >Dental</option>
<option value="veterinary" [[!+fi.color:FormItIsSelected=`veterinary`]] >Veterinary</option>
<option value="optometry" [[!+fi.color:FormItIsSelected=`optometry`]] >Optometry</option>
<option value="psy" [[!+fi.color:FormItIsSelected=`psy`]] >Psychology Services</option>
<option value="counceling" [[!+fi.color:FormItIsSelected=`counceling`]] >Counseling Services</option>
<option value="legal" [[!+fi.color:FormItIsSelected=`legal`]] >Legal</option>
<option value="clerical" [[!+fi.color:FormItIsSelected=`clerical`]] >Clerical</option>
<option value="other" [[!+fi.color:FormItIsSelected=`other`]] >Other</option>
</select>
</p>
<p>
<label for="college">
College Attended (required)
<span class="error">[[!+fi.error.college]]</span>
</label>
<br>
<input size="40" class="wpcf7-form-control wpcf7-text" type="text" name="college" id="college" value="[[!+fi.college]]" placeholder="Name of College" />
</p>
<br class="clear" />
[[!recaptchav2_render]]
[[!+fi.error.recaptchav2_error]]
<br class="clear" />
<div class="form-buttons">
<button class="wpcf7-form-control wpcf7-submit">Send</button>
</div>
</form>
Here is an image of what the front-end looks like after a 6th input is added:
To clarify, if I delete just one of those inputs, it looks like a normal form.
Thank you!