New Contact Form 7 external package for Frontity

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?

Hi @luisherranz,
I am working on multiple projects with steep deadlines. Hopefully I should be able to work on it after 3 months.
The repo is open to public. We welcome anyone wants to contribute.

I’m happy to contribute, I just need some direction on what to try to do, as the field I’m referencing (acceptance) doesn’t seem to be read by the Contact Form 7 package at all :frowning:

1 Like

I think I figured out what the issue is, but i’m not good enough at React to solve it, so maybe could use some guidance here!

I think the issue is that the Input.js file only handles “values” and not if “checked or not checked” as checkboxes use checked instead of value to handle showing if they’ve been checked or not.

Thus I’m making the following changes to this:
Line 18:

    actions.cf7.changeInputValue({ id, inputName, value: inputProps.value, checked: inputProps.checked });
  }

After that I have to add a “checked” handler to cf7inputs.js here:


  name: "cf7Inputs",
  test: node => node.component === "input" && /wpcf7-form-control/.test( node.props.className ),
  process: node => {

  	const ariaInvalid  = ( 'undefined' === typeof ( node.props[ 'aria-invalid' ] ) ) ? '' : node.props[ 'aria-invalid' ];
  	const ariaRequired = ( 'undefined' === typeof ( node.props[ 'aria-required' ] ) ) ? '' : node.props[ 'aria-required' ];
  	const className    = ( 'undefined' === typeof ( node.props.className ) ) ? '' : node.props.className;
  	const name         = ( 'undefined' === typeof ( node.props.name ) ) ? '' : node.props.name;
  	const size         = ( 'undefined' === typeof ( node.props.size ) ) ? '' : node.props.size;
  	const type         = ( 'undefined' === typeof ( node.props.type ) ) ? '' : node.props.type;
  	const value        = ( 'undefined' === typeof ( node.props.value ) ) ? '' : node.props.value;
  	const checked        = ( 'undefined' === typeof ( node.props.checked ) ) ? '' : node.props.checked;
  	const placeholder  = ( 'undefined' === typeof ( node.props.placeholder ) ) ? '' : node.props.placeholder;

  	node.props.inputProps = {
  		ariaInvalid: ariaInvalid,
  		ariaRequired: ariaRequired,
  		className: className,
  		name: name,
  		size: size,
  		type: type,
  		value: value,
  		checked: checked,
  		placeholder: placeholder
  	};

  	node.component = Input;
  	return node;
  }

};

Then lastly, I think I have to add some logic to detect a checked vs a value entered in index.js, mirroring this code on line 57, though how, I am not sure

				state.cf7.forms[ id ].inputVals[ inputName ] = value;				
			}

if anyone else could help guide me through this, it’d be awesome :slight_smile: