New Contact Form 7 external package for Frontity

We’re happy to announce that Imran Sayed and Smit Patadiya have released a new package for Frontity that adds support for the popular Contact Form 7 WordPress plugin.

By default, the Contact Form 7 plugin adds a number of fields to new forms, including name, email, subject, message and send. These fields are all included in this pre-release and a few extra will be supported in the final release.

Useful resources:

Installation guide

  1. Do npm install frontity-contact-form-7 in the root of your project.
  2. Add the package name in frontity-settings.js .
"packages": [
  "frontity-contact-form-7"
  // other packages ...
]
  1. Run npx frontity dev again.

That’s it! The package doesn’t need any settings. You should be able to see the form in any page or post that contains one.

How to contribute

If you want to contribute to the package, you can do so by following these steps:

  1. Fork this repository
  2. Clone it in your local machine
  3. Run npm install
  4. Run npx frontity dev
  5. Do the changes to the code
  6. Submit the pull request! :slight_smile:

You can change the state.source.api setting on the frontity.settings.js file to point the project to your own WordPress if you want but please do not include those changes in your PR.


A big thank you to @imranhsayed and @smit.soni22 for this contribution to the project! :raised_hands:

3 Likes

Thank you Frontity for your guidance and support.
We really enjoyed making this package :slightly_smiling_face:

Thank you @Reyes

2 Likes

How would I go about extending it and implementing a Checkbox field?
Also there appears to be a bug with Select fields in that I can’t click around and select something from the dropdown at all. Would be nice to be able to save Checkboxes if the select component is broken :slight_smile:

I think it is already supported with the input processor right? It’s an <input> tag with type=checkbox. You can take a look at its code,, maybe you find it useful. I have tested a form with a Checkbox field and it’s already working in my case.

I am not able to reproduce this bug. I’ve tested this too and it works in my case. Could you provide a bit more info please? :relaxed:

Checkbox appears yes, but when the form is submitted, Checkbox selections did not return.
I’ll check the select issue, could be something with my project

@min if you can share your project with us somehow we could take a further look :slight_smile:

This is the form specifically: https://fortstudio2019.now.sh/contact
And my source code:
https://github.com/minnifer/FortStudio2019

Whenever a check box is selected, and the form is submitted, it looks like this:
From: Test <[email protected]>
Subject: Contact!
Checked:
[checkbox-689]

Message Body:
test

As you can see, the checkbox data is not returning, just the name of the checkbox is.

Oh, I’ve seen that there are two different options in Contact Form 7 that are pretty similar. I was testing the field Checkboxes and it seems your Contact page is using Acceptance. I’ll take a deeper look at them and let u know.

By the way, the web looks awesome! :relaxed:

I’ve been taking a look at React forms and I think Checkboxes are handled a bit different, but not sure.

According to this code in React docs, maybe we have to do something similar for Checkboxes at Contact Form 7.

@luisherranz Do you think that changing this function could we solve this issue? Could it be something like this?

const onChange = ( event ) => {
        value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
        actions.cf7.changeInputValue( { id, inputName, value } );
};

I could try implementing this in my project and let you know if that fixes it?

I also have a couple of other questions I’d love to talk through in finishing this project but I don’t want to spam the forum here. Is there a slack/email/discord I can try to contact someone through to help with some silly questions I could have?

Yes, checkboxes work differently because they use checked instead of value.

@imranhsayed what do you think? Could you add support for checkboxes following Mario’s code example?

On the contrary, you are super welcome to ask as many questions as you want. For us, it’s crucial to know where people are getting stuck to be able to improve the product and the documentation.

We know a public forum it’s sometimes more intimidating than a chat were things will get lost eventually, but we think it adds more value to the community in the long run because all this knowledge will start to accumulate. So please bear with us and stay here :pray::smile:

If you feel like the questions are rather small and don’t deserve their own topic, you can always open a general topic for your project and ask all of them there. By the way, congratulations on the design. It does look incredible!


A couple of comments about your repo: you don’t need to commit your node_modules folder. That’s usually meant to be ignored with a .gitignore file. If you clone it on a new computer, you just run npm install to generate it again. The same happens with the build folder, you can safely exclude it.

I also see you have a now.json with the old recommendation. We have released a builder for now, which is much simpler:

{
 "alias": "www.your-site.com",
 "version": 2,
 "builds": [
   {
     "src": "package.json",
     "use": "@frontity/now"
   }
 ]
}

It’s explained here: https://docs.frontity.org/installation-and-deploy/deploy-on-now

This builder runs npx frontity build in the cloud, so you don’t need to run it yourself in your local machine anymore. npx now or npx now --prod is enough. With this builder you can also start using the GitHub integration of Now that automatically deploys your site to production/staging when you push your code to GitHub.

1 Like

Hi! Thanks, I got the deploy and git integration working just fine on my end :slight_smile:
I’m still at a loss for the checkbox/acceptance box issue and would really really love to be able to solve it. My site launches soon and this is integral to its functionality.

Sadly it looks like @imranhsayed is missing. I pinged him on GitHub a few days ago but he hasn’t answered yet.

If you clone his repo, change the frontity.settings.js file to point to your WP and do the change that @SantosGuillamot suggested, does it work? If that’s the case, we can guide you to do a pull request with the improvement.

Hi @luisherranz,
I am preoccupied with a lot of work lately. Just had a look at your message.
We can certainly add support for checkboxes as soon as I get free.
Thank you :blush:

1 Like

Hey, thanks @imranhsayed.

@min this is the component you have to change:

And this is the code you can try (made by @SantosGuillamot):

const Input = ({ state, actions, inputProps }) => {
  // Context is used so that we can pass the form id to different components.
  const id = useContext(FormIdContext);
  const inputName = inputProps.name;

  if ("undefined" === typeof state.cf7.forms[id].inputVals[inputName]) {
    actions.cf7.changeInputValue({ id, inputName, value: inputProps.value });
  }

  /**
   * OnChange handler for input.
   *
   * @param {Object} event Event.
   *
   * @return {void}
   */
  const onChange = event => {
    const value =
      inputProps.type === "checkbox"
        ? event.target.checked
        : event.target.value;
    actions.cf7.changeInputValue({ id, inputName, value });
  };

  return inputProps.type === "checkbox" ? (
    <input
      name={inputProps.name}
      className={inputProps.className}
      aria-invalid={inputProps.ariaInvalid}
      aria-required={inputProps.ariaRequired}
      size={inputProps.size}
      type="checkbox"
      value={state.cf7.forms[id].inputVals[inputName]}
      onChange={onChange}
      placeholder={inputProps.placeholder}
    />
  ) : (
    <input
      name={inputProps.name}
      className={inputProps.className}
      aria-invalid={inputProps.ariaInvalid}
      aria-required={inputProps.ariaRequired}
      size={inputProps.size}
      type={inputProps.type}
      checked={state.cf7.forms[id].inputVals[inputName]}
      onChange={onChange}
      placeholder={inputProps.placeholder}
    />
  );
};

I still don’t understand why Imran is using a new object to store the input props (node.props.inputProps) instead of using the ones that are in node.props. @imranhsayed could you please clarify that part?

Hey @luisherranz . Smit had used new object for input related properties for readability. However like you mentioned we can directly use the ones in node.props

Will this also work for the Acceptance field in Contact Form 7? the proposed solution?
It looks like the “Input.js” file isn’t even used for Acceptance fields?

I don’t really know. @imranhsayed or @smit.soni22 could you please take a look and let us know?

I know you are super busy, but when do you plan to finish the package? Could you give us an ETA?