Fred and FormIt

Is it possible to use FormIt with Fred? I’ve tried making a really simple form work but it doesn’t send the email and it doesn’t redirect to the success page. If I use the same code on a non-Fred page it works though.

Fred element:

<div data-fred-name="formitcall" data-fred-editable="false">

    &emailSubject=`Test Fred`

     <form action="[[~[[*id]]]]" method="post" class="form">
        <div class="form-group">
              <label for="contactMessage" accesskey="m">Message</label>
              <textarea value="[[!+fi.contactMessage]]" class="form-control" id="contactMessage" name="contactMessage" rows="3"></textarea>
         <button class="btn btn-primary" type="submit">Submit</button>



  "remote": true

If you have "remote":true as an option then it should be working.
I’ve got FormIt and Fred working together on a couple of sites without issue.

Try removing the attributes from the containing div i.e. data-fred-name="formitcall" data-fred-editable="false"
Those shouldn’t be there.

Are you getting any errors in the MODX log?

I did as you suggested and removed data-fred-name and data-fred-editable from the containing div but still no luck I’m afraid. Nothing useful in the error log either :woman_shrugging:

Well actually, it seems to be working now! I forgot to click Rebuild before testing again.

I originally didn’t have data-fred-name or data-fred-editable in the div but then probably something else was making it fail. That’s great, then I just have to add the additional stuff back in that I removed for testing and find out what made it fail.

Thanks for your help!

Right, I seem to have narrowed it down to trying to use an option setting in the FormIt call:


Option setting:

  "name": "recipient",
  "label": "Recipient (e-mail)",
  "type": "text",
  "value": ""

Perhaps option settings aren’t allowed within a snippet call?

Hi @sketchi,
That’s something I haven’t tested actually. It should work, but It could be also be something related to which type of tags get parsed first.
It might be an idea to open an issue of the Fred Github repo:

If you’d like to test exactly what values the FormIt snippet is receiving, you could add this log line to the top of the FormIt snippet:


Add it around line 32:

Then run the form and check the MODX log to see the output. (Remember to remove the line again once you’re done)

As a quick fix, for now you could use something like ClientConfig to hold the email value, and then just add it to your element e.g.