formit

8 Posts

robzy Reply #1, 15 years, 10 months ago

Hey guys,

i’m a newbie. I’m building my first Modx site for a client and i can’t get formit to work. My code is as followed:

Snippet call

[[!FormIt?
   &hooks=`recaptcha,spam,email,redirect`
   &emailTpl=`MyEmailChunk`
   &emailTo=`[email protected]`
   &redirectTo=`1`
   &validate=`name:required,
      email:email:required,
      subject:required,
      text:required:stripTags,
      numbers:required,
      colors:required`      
]]

Form stuff

<h2>Contact Form</h2>

[[!+fi.error.error_message:notempty=`<p>[[!+fi.error.error_message]]</p>`]]

<form action="[[~[[*id]]]]" method="post" class="form">
    <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]]" />

    <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="text" id="text" cols="55" rows="7" value="[[+fi.text]]">[[+fi.text]]</textarea>


    <label>
        Numbers:[[+fi.error.numbers]]
        <select name="numbers" value="[[+fi.numbers]]">
            <option value="">Select an option...</option>
            <option value="one" [[!+fi.numbers:FormItIsSelected=`one`]]>One</option>
            <option value="two" [[!+fi.numbers:FormItIsSelected=`two`]]>Two</option>
            <option value="three" [[!+fi.numbers:FormItIsSelected=`three`]]>Three</option>
        </select>
    </label>

    <label>
        Colors:[[+fi.error.colors]]
        <input type="hidden" name="colors[]" value="" />
    </label>
    <ul>
      <li>
        <label><input type="checkbox" name="colors[]" value="red" [[!+fi.colors:FormItIsChecked=`red`]] /> Red</label>
      </li>
      <li>
        <label><input type="checkbox" name="colors[]" value="blue" [[!+fi.colors:FormItIsChecked=`blue`]] /> Blue</label>
      </li>
      <li>
        <label><input type="checkbox" name="colors[]" value="green" [[!+fi.colors:FormItIsChecked=`green`]] /> Green</label>
      </li>
    </ul>

   <!-- <br class="clear" />
    [[!+formit.recaptcha_html]]
    [[!+fi.error.recaptcha]]-->

    <br class="clear" />

    <div class="form-buttons">
        <input type="submit" value="Send Contact Inquiry" />
    </div>
</form>

Chunk

MyEmailChunk

This is the Formit Email Chunk.

<br />[[+name]] ([[+email]]) Wrote: <br />

[[+text]]

when i click return i get no error message or anything it takes me back to the current page.

Any ideas?

Thanks

24,544 Posts

BobRay Reply #2, 15 years, 10 months ago

Try putting the validate parameter all on one line.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

8 Posts

robzy Reply #3, 15 years, 10 months ago

Ta

But not joy.

[[!FormIt?
   &hooks=`recaptcha,spam,email,redirect`
   &emailTpl=`MyEmailChunk`
   &emailTo=`[email protected]`
   &redirectTo=`1`
   &validate=`name:required, email:email:required, subject:required, text:required:stripTags, numbers:required, colors:required`]]

Contact Form
[[!+fi.error.error_message:notempty=` 
[[!+fi.error.error_message]]

`]] 
 Name: [[+fi.error.name]]  Email: [[+fi.error.email]]  Subject: [[+fi.error.subject]]  Message: [[+fi.error.text]] [[+fi.text]] Numbers:[[+fi.error.numbers]]  Select an option... One Two Three Colors:[[+fi.error.colors]]  
 Red 
 Blue 
 Green

Send Contact enquiry, just refreshes the same page when clicked.

24,544 Posts

BobRay Reply #4, 15 years, 10 months ago

I think you have to add the &submitVar parameter so FormIt knows it’s a repost.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

8 Posts

robzy Reply #5, 15 years, 9 months ago

Still, with or without entering the fields when i click the ’send contact enquiry button’ the page refreshes itself and sends nothing. I followed the tutorial. The code below is how it appears on my contact page. (Also please see attached image)

[[!FormIt?
   &hooks=`recaptcha,spam,email,redirect`
   &emailTpl=`MyEmailChunk`
   &emailTo=`[email protected]`
   &redirectTo=`2`
   &validate=`name:required,email:email:required,subject:required,text:required:stripTags,numbers:required,colors:required`&submitVar=`subtn`]]

<h2>Contact Form</h2>

[[!+fi.error.error_message:notempty=`<p>[[!+fi.error.error_message]]</p>`]]

<form action="[[~[[*id]]]]" method="post" class="form">
    <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]]" />

    <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="text" id="text" cols="55" rows="7" value="[[+fi.text]]">[[+fi.text]]</textarea>


    <label>
        Numbers:[[+fi.error.numbers]]
        <select name="numbers" value="[[+fi.numbers]]">
            <option value="">Select an option...</option>
            <option value="one" [[!+fi.numbers:FormItIsSelected=`one`]]>One</option>
            <option value="two" [[!+fi.numbers:FormItIsSelected=`two`]]>Two</option>
            <option value="three" [[!+fi.numbers:FormItIsSelected=`three`]]>Three</option>
        </select>
    </label>

    <label>
        Colors:[[+fi.error.colors]]
        <input type="hidden" name="colors[]" value="" />
    </label>
    <ul>
      <li>
        <label><input type="checkbox" name="colors[]" value="red" [[!+fi.colors:FormItIsChecked=`red`]] /> Red</label>
      </li>
      <li>
        <label><input type="checkbox" name="colors[]" value="blue" [[!+fi.colors:FormItIsChecked=`blue`]] /> Blue</label>
      </li>
      <li>
        <label><input type="checkbox" name="colors[]" value="green" [[!+fi.colors:FormItIsChecked=`green`]] /> Green</label>
      </li>
    </ul>

    <br class="clear" />
    [[!+formit.recaptcha_html]]
    [[!+fi.error.recaptcha]]

    <br class="clear" />

    <div class="form-buttons">
        <input type="submit" name="subtn" value="Send Contact Inquiry" />
    </div>
</form>

Also the tutorial, talks of reCaptcha support. And that it’s already, setup the public and private keys for reCaptcha via the System Settings "formit.recaptcha_public_key" and "formit.recaptcha_private_key".
I can’t see this, it doesn’t appear on the page. All I get is the http://recaptcha.net/api/getkey link, i have added my site to the recaptcha and have been given a public and private key. But I don’t know where in Modx this should go.

I would really like to know where I am going wrong from the tutorial: http://rtfm.modx.com/display/ADDON/FormIt.Examples.Simple+Contact+Page.

Thanks

8 Posts

robzy Reply #6, 15 years, 9 months ago

Has anybody managed to get a form working using formit or another package for revolution?

4 Posts

spitball Reply #7, 15 years, 9 months ago

I have it working... I don’t know if it’s the -best- way, but it’s working for me! I made a chunk called "form_contact" and called it in my template like: [[$form_contact]]

inside the form_contact chunk I have the following code:

[[!FormIt?
   &hooks=`recaptcha,spam,email,redirect`
   &emailTpl=`MyEmailChunk`
   &emailTo=`[email protected]`
   &redirectTo=`37`
   &validate=`name:required,
      email:email:required,
      subject:required,
      text:required:stripTags,
      service:required`      
]]
	 
            
<h2>Contact Form</h2>
[[!+fi.error.error_message:notempty=`<p>[[!+fi.error.error_message]]</p>`]]
<form action="[[~[[*id]]]]" method="post" class="contact_form">
<input type="hidden" name="nospam:blank" value="" />
<fieldset>    

<label for="name"> Name:</label>
<input type="text" name="name" id="name" value="[[+fi.name]]" />
<div class="error" align="center">[[+fi.error.name]]</div>


<label for="email">Email:</label>
<input type="text" name="email" id="email" value="[[+fi.email]]" />
<div class="error" align="center">[[+fi.error.email]]</div>

   
<label for="subject"> Subject:</label>

<select name="subject" id="subject" value="[[+fi.subject]]">
<option value="">Select an option...</option>
<option value="Branding and Identity" [[!+fi.subject:FormItIsSelected=`BrandingandIdentity`]]>Branding and Identity</option>
<option value="Web Development" [[!+fi.subject:FormItIsSelected=`WebDevelopment`]]>Web Development</option>
<option value="Design or Multimedia" [[!+fi.subject:FormItIsSelected=`DesignorMultimedia`]]>Design or Multimedia</option>
</select>
<div class="error" align="center">[[+fi.error.subject]]</div>


<label for="text">Message:</label>
<textarea name="text" id="text" cols="30" rows="4" value="[[+fi.text]]">[[+fi.text]]</textarea>
<div class="error" align="center">[[+fi.error.text]]</div>           



<div align="center">
[[!+formit.recaptcha_html]]
[[!+fi.error.recaptcha]]
</div>


<span class="small">The words above come from scanned books. 
By typing them, you help to digitize old texts.</span>
<div class="clear" ></div>

<div  align="center">    <input type="submit" value="Send Contact Inquiry" align="center" class="large orange form-buttons"/> </div>

</fieldset>
</form>

hope this helps someone

8 Posts

robzy Reply #8, 15 years, 9 months ago

Thanks spitball

I put the code you attached in a chunk and called it from the template. But still nothing. Did you get the recaptcha working?

http://www.cheshamcottage.co.uk/ra.html

275 Posts

skndn60 Reply #9, 15 years, 9 months ago

Here’s my Formit form. It works, including the recaptcha.

Did you configure your sendmail in MODx? Can’t remember whether that was a requirement...

Hope it helps...

[[!FormIt?
  &hooks=`recaptcha,spam,email,redirect`  
  &recaptchaTheme=`red`
  &emailTpl=`myTpl`
  &emailTo=`blablabla`
  &emailUseFieldForSubject=`1`  
  &emaiSubject=`bla bla bla`
  &redirectTo=`8`
  &validate=`name:required,
    email:email,
    message:stripTags:required`
]]

<div class="subpage-header">
  Contact
</div>

<div class="email-wrapper">

  <div class="email-form">

    <div style="padding: 0px 0px 0px -20px;">
      [[*contactIntroMessage]]
    </div>

    <div class="form-spacer">
    </div>

    <form method="post" action="[[~[[*id]]]]">

      <input type="hidden" name="nospam:blank" value="" />  

      <div class="form-label">
        Name<sup>*</sup>
      </div>

      <div class="form-element-wrapper">
        <input class="local-input" type="text" name="name" id="name" size="50" value="[[+fi.name]]"/>
      </div>

      <div class="form-error-wrapper">
        <span class="error">[[+fi.error.name]]</span>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        Your email address<sup>*</sup>
      </div>

      <div class="form-element-wrapper">
        <input class="local-input" type="text" name="email" id="email" size="50" value="[[+fi.email]]"/>
      </div>

      <div class="form-error-wrapper">
        <span class="error">[[+fi.error.email]]</span>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        Subject
      </div>

      <div class="form-element-wrapper">
        <input class="local-input" type="text" name="subject" id="subject" size="50"
          value="[[+fi.email]]"/>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        Message<sup>*</sup>
        <span class="error">[[+fi.error.message]]</span>
      </div>

      <div>
        <textarea class="local-text" name="text" id="text" cols="50" rows="6">[[+fi.text]]</textarea>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        Please enter these words<sup>*</sup>
      </div>

      <div class="form-element-wrapper">
        [[!+formit.recaptcha_html]]
      </div>

      <div class="form-error-wrapper">
        <span class="error">[[!+fi.error.recaptcha]]</span>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        <sup>*</sup>indicates a required field
      </div>

      <div style="float:right; padding: 0px 44px 0px 0px;">
        <input class="local-input" type="reset"/>
        <input class="local-input" type="submit" value="Send email"/></td>
      </div>

      <div style="clear: both;">
      </div>

    </form>

  </div>

</div>

MODx Revolution / MAMP / OS X

8 Posts

robzy Reply #10, 15 years, 9 months ago

Thanks skndn60, the validation is working but it’s not sending the form.

How do you configure the sendmail in MODx? i’ve had a look but i cannot see it. Also i don’t know where the settings for reCAPTCHa is, in modx? Please see attached.

Cheers

[[!FormIt?
   &hooks=`recaptcha,spam,email,redirect`
   &emailTpl=`MyEmailChunk`
   &emailTo=`[email protected]`
  &emailUseFieldForSubject=`1`  
  &emailSubject=`bla bla bla`
  &redirectTo=`5`
  &validate=`name:required,
    email:email,
    message:stripTags:required`
]]
            
<h2>Contact Form</h2>
<div class="subpage-header">
  Contact
</div>

<div class="email-wrapper">

  <div class="email-form">

    <div style="padding: 0px 0px 0px -20px;">
      [[*contactIntroMessage]]
    </div>

    <div class="form-spacer">
    </div>

    <form method="post" action="[[~[[*id]]]]">

      <input type="hidden" name="nospam:blank" value="" />  

      <div class="form-label">
        Name<sup>*</sup>
      </div>

      <div class="form-element-wrapper">
        <input class="local-input" type="text" name="name" id="name" size="50" value="[[+fi.name]]"/>
      </div>

      <div class="form-error-wrapper">
        <span class="error">[[+fi.error.name]]</span>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        Your email address<sup>*</sup>
      </div>

      <div class="form-element-wrapper">
        <input class="local-input" type="text" name="email" id="email" size="50" value="[[+fi.email]]"/>
      </div>

      <div class="form-error-wrapper">
        <span class="error">[[+fi.error.email]]</span>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        Subject
      </div>

      <div class="form-element-wrapper">
        <input class="local-input" type="text" name="subject" id="subject" size="50"
          value="[[+fi.email]]"/>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        Message<sup>*</sup>
        <span class="error">[[+fi.error.message]]</span>
      </div>

      <div>
        <textarea class="local-text" name="text" id="text" cols="50" rows="6">[[+fi.text]]</textarea>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        Please enter these words<sup>*</sup>
      </div>

      <div class="form-element-wrapper">
        [[!+formit.recaptcha_html]]
      </div>

      <div class="form-error-wrapper">
        <span class="error">[[!+fi.error.recaptcha]]</span>
      </div>

      <div class="form-spacer">
      </div>

      <div class="form-label">
        <sup>*</sup>indicates a required field
      </div>

      <div style="float:right; padding: 0px 44px 0px 0px;">
           <input class="local-input" type="submit" value="Send email"/></td>
      </div>

      <div style="clear: both;">
      </div>

    </form>

  </div>

</div>