Support for checkboxes in Contact Form 7 package

[min]

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

[min]

Is anyone willing to provide any help with this? Sorry, it’s just somewhat critical for my project and I’m not 100% certain which direction to take.

[luisherranz]

Hey @min, I’m really sorry about this. We’re going to talk with @imranhsayed to see how we can unblock this situation because as he is not going to be able to work on this for the next 3 months, maybe we can take over the development. We’ll let you know.

[min]

Thank you! Please keep me posted! I want to help as well but there are a lot of things I don’t fully understand about how the plugin works so I need some help

[luisherranz]

I have talked with Imran and he agreed so we are going to take over the development. I’ll talk with the team this week to see how we can proceed with this.

[min]

Perfect! Let me know if there’s anything I can do to assist!

[min]

Any progress or insight on this?

[modyydom]

I made a quick code for my current project which works good for my needs.
I think it will be a good start to take it and generalize it instead of starting from scratch.

I hope to help

[min]

Curious to see what you’ve come up with? =D

[SantosGuillamot]

Hi guys!

We’re going to take over the development of the package, but to be honest, it’s going to take some time as we need to move it to our repo, move it to TypeScript, add end to end test to check everything works fine, add the lack functionality… We want it to be fully reliable, and we think this is the best approach. Apart from that, we have tons of things in our roadmap, although we know the Contact Form 7 is really important.

Until we develop it, I would recommend you to move the current package from node_modules to local packages (as there aren’t going to be more versions), and take control over the code. You can share it with us and we’ll take a deep look at it.

@modyydom Could you share with us the code that works for your needs to check it out and see if it can help @min too please??

---

By the way, in order to move it from node_modules to local packages you just have to move the frontity-contact-form-7 package folder to your-project/packages and update your package.json file dependencies to point to your local folder instead of the last version. Something like waht we’re doing with @frontity/mars-theme:

{
  "name": "blog-frontity",
  ...
  "dependencies": {
    "frontity": "^1.4.4",
    "@frontity/core": "^1.4.1",
    "@frontity/wp-source": "^1.4.3",
    "@frontity/tiny-router": "^1.0.18",
    "@frontity/html2react": "^1.1.15",
    "@frontity/mars-theme": "./packages/mars-theme" //SOMETHING LIKE THIS
  }
}

[min]

Hello! Any progress on this at all? Anything I can do?

[mmczaplinski]

Hi @min!

I have to report that we haven’t made any progress on this so far, so our current recommendation is still to follow @SantosGuillamot’s instructions to fork the package yourself:

@SantosGuillamot

By the way, in order to move it from node_modules to local packages you just have to move the frontity-contact-form-7 package folder to your-project/packages and update your package.json file dependencies to point to your local folder instead of the last version. Something like what we’re doing with @frontity/mars-theme :

{
  "name": "blog-frontity",
  ...
  "dependencies": {
    "frontity": "^1.4.4",
    "@frontity/core": "^1.4.1",
    "@frontity/wp-source": "^1.4.3",
    "@frontity/tiny-router": "^1.0.18",
    "@frontity/html2react": "^1.1.15",
    "@frontity/mars-theme": "./packages/mars-theme" //SOMETHING LIKE THIS
  }
}