Framer

Adding a Form to Framer

Framer lets you drop raw HTML into any page via an Embed component, the fastest way to wire up a Formward-powered contact form without writing a custom code component.

1. 01Create your form in Formward

   Sign up at formward.eu and create a new form. Give it a name, configure notification email addresses, and copy the endpoint URL. It looks like https://formward.eu/f/your-form-id.

2. 02Add an Embed component in Framer

   Open your Framer project and drag an Embed component from the Insert panel onto the canvas. Paste the HTML below into the Embed code field, replacing the action URL with your own endpoint.

   <form action="https://formward.eu/f/your-form-id" method="POST" style="display:flex;flex-direction:column;gap:12px;font-family:inherit">
     <input type="text"  name="name"    placeholder="Your name"    required style="padding:10px;border:1px solid #ccc;border-radius:6px" />
     <input type="email" name="email"   placeholder="Email address" required style="padding:10px;border:1px solid #ccc;border-radius:6px" />
     <textarea           name="message" placeholder="Message"       required rows="4" style="padding:10px;border:1px solid #ccc;border-radius:6px;resize:vertical"></textarea>
     <!-- honeypot: keep hidden -->
     <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
     <button type="submit" style="padding:10px 20px;background:#000;color:#fff;border:none;border-radius:6px;cursor:pointer">Send</button>
   </form>

3. 03Size and style the embed

   In the Embed panel set a fixed height (300–400 px is typical for a three-field form) and set the width to Fill. Framer renders the HTML in an iframe, so the form inherits the inline styles you provide rather than the page's CSS. Adjust padding, colors, and font-size to match your design.

4. 04Test and view submissions

   Publish your Framer site, open the live page, fill out the form, and click Send. The browser redirects to Formward's thank-you page by default. Log in to the Formward dashboard and open your form's Submissions tab to confirm the entry arrived.