Hi! Thanks, I got the deploy and git integration working just fine on my end
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
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
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
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.
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.
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
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.
Perfect! Let me know if there’s anything I can do to assist!
Any progress or insight on this?
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
Curious to see what you’ve come up with? =D
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
}
}
Hello! Any progress on this at all? Anything I can do?