I am using the contents-ops-starter template and trying to use the forms with below base
code:
As per link it says we cannot use server side code -
Is there a way to run this in dynamic code, unlike other examples of static code.
If so how do I write static code
My question is how do we change modify the index.ts file
I’m sorry, I don’t understand your question. Could you please try to rephrase?
I made following change to starter template typescript index.tsx in Forms block of above github url
import { useState } from 'react';
function encode(data) {
return Object.keys(data)
.map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
.join('&')
}
export default function FormBlock(props) {
const formRef = React.createRef<HTMLFormElement>();
const { fields = [], elementId, submitButton, className, styles = {}, 'data-sb-field-path': fieldPath } = props;
if (fields.length === 0) {
return null;
}
const [submitted, setSubmitted] = useState(false);
const [state, setState] = useState({})
const handleChange = (event) => {
setState({ ...state, [event.target.name]: event.target.value })
}
function handleSubmit(event): void {
event.preventDefault();
// const data = new FormData(formRef.current);
// const value = Object.fromEntries(data.entries());
// alert(`Form data: ${JSON.stringify(value)}`);
const form = event.target
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
...state,
}),
})
.then(() => console.log("Success!"))
.catch(error => console.log(error));
event.preventDefault();
setSubmitted(true);
}
return (
<div>
{ (!submitted) && <form
className={classNames(
'sb-component',
'sb-component-block',
'sb-component-form-block',
className,
styles?.self?.margin ? mapStyles({ margin: styles?.self?.margin }) : undefined,
styles?.self?.padding ? mapStyles({ padding: styles?.self?.padding }) : undefined,
styles?.self?.borderWidth && styles?.self?.borderWidth !== 0 && styles?.self?.borderStyle !== 'none'
? mapStyles({
borderWidth: styles?.self?.borderWidth,
borderStyle: styles?.self?.borderStyle,
borderColor: styles?.self?.borderColor ?? 'border-primary'
})
: undefined,
styles?.self?.borderRadius ? mapStyles({ borderRadius: styles?.self?.borderRadius }) : undefined
)}
name={elementId}
id={elementId}
data-netlify="true"
data-netlify-honeypot="bot-field"
onSubmit={handleSubmit}
ref={formRef}
data-sb-field-path={fieldPath}
>
<input type="hidden" name="form-name" value={elementId} />
<p hidden>
<label>
Don’t fill this out: <input name="bot-field" onChange={handleChange} />
</label>
</p>
// REST OF CODE FROM TEMPLATE
<div>
{submitButton && (
<div className={classNames('mt-8', 'flex', mapStyles({ justifyContent: styles?.self?.justifyContent ?? 'flex-start' }))}>
<SubmitButtonFormControl {...submitButton} {...(fieldPath && { 'data-sb-field-path': '.submitButton' })} />
</div>
)}
</form>
There is something wrong with my fetch logic, the form is submitted but I don’t see submissions in netlify forms
hi, can you share the link to your live form?
Ended up deprecating the nextjs to 4
thanks for sharing your solution with the community!
