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 
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? 
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
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 <minhoq@gmail.com>
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!
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 
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
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 
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 
1 Like