How I Build Websites For Clients SUPERFAST

custom forms in Framer

I made this video this week

It got a very good reception so I decided to give you some more detail here.

Framer is essentially Figma for webdev.

You can build websites superfast using their UI and pre-built components and sections.

But while working on more complex sites you’ll quickly realise that there are some limitations where you need to build custom components.

I built a custom form using their custom code section.

Here is the code:

export default function CustomFormExample(props) {
    
    const handleSubmit = (e) => {
        e.preventDefault()
        // Handle form submission logic here
    }

    return (
        <div style={{ ...containerStyle, maxWidth: "300px" }}>
            <form style={formStyle} onSubmit={handleSubmit}>
                <div style={inputGroupStyle}>
                    <label style={labelStyle}>
                        First Name *
                        <input
                            style={inputStyle}
                            type="text"
                            placeholder="Enter your first name"
                            required
                        />
                    </label>
                </div>
                <div style={inputGroupStyle}>
                    <label style={labelStyle}>
                        Email *
                        <input
                            style={inputStyle}
                            type="email"
                            placeholder="Enter your email"
                            required
                        />
                    </label>
                </div>
                <div style={inputGroupStyle}>
                    <label style={labelStyle}>
                        Message *
                        <textarea
                            style={{ ...inputStyle, height: "100px" }}
                            placeholder="Enter your message"
                            required
                        ></textarea>
                    </label>
                </div>
                <div style={inputGroupStyle}>
                    <label
                        style={{
                            ...labelStyle,
                            display: "flex",
                            alignItems: "center",
                        }}
                    >
                        <input
                            type="checkbox"
                            style={{ marginRight: "8px" }}
                            required
                        />
                        I agree to the terms and conditions *
                    </label>
                </div>
                <div style={buttonWrapper}>
                    <button style={buttonStyle} type="submit">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    )
}

// Styles are written in object syntax
const containerStyle = {
    height: "400px",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
    backgroundColor: "#eeee",
    padding: "24px",
    borderRadius: "16px",
}

const formStyle = {
    width: "100%",
}

const labelStyle = {
    marginBottom: "10px",
    display: "block",
    fontWeight: "bold",
}

const inputStyle = {
    borderRadius: "8px",
    padding: "8px",
    width: "100%",
    border: "gray solid 1px",
    marginTop: "8px",
}

const inputGroupStyle = {
    marginBottom: "20px",
}

const buttonWrapper = {
    width: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
}

const buttonStyle = {
    backgroundColor: "black",
    color: "#fff",
    borderRadius: "8px",
    padding: "10px 20px",
    border: "none",
    cursor: "pointer",
}

You can go as custom as you like with Framer.

If you want to get up and running with Framer as fast as possible, check my course out on

https://www.framer.courses/

Or skip the basic course and hop straight into the main course

If you want some more tutorial-based videos let me know and I’ll deliver

Tchau,

Danny