Compact Email Button Component

Compact Email Button Component

Compact Email Button Component

Compact Email Button Component

Component

Component

Component

Component

Compact Email Button Component

Compact Email Button Component

Compact Email Button Component

Compact Email Button Component

This is a compact email button, initially spotted on the New Computer website, recreated in Framer. All you need to do is copy and paste it into your website, tailor it using the instructions below, and you're all set.

This is a compact email button, initially spotted on the New Computer website, recreated in Framer. All you need to do is copy and paste it into your website, tailor it using the instructions below, and you're all set.

This is a compact email button, initially spotted on the New Computer website, recreated in Framer. All you need to do is copy and paste it into your website, tailor it using the instructions below, and you're all set.

This is a compact email button, initially spotted on the New Computer website, recreated in Framer. All you need to do is copy and paste it into your website, tailor it using the instructions below, and you're all set.

Compact Email Button Component
Compact Email Button Component
Compact Email Button Component
Compact Email Button Component

Copy component

Copy component

Copy component

Copy component

Features

Customizing the button

When you select the component, you'll see the following properties in the right panel:

email button properties


You can change the "Label" of the button.

You're also able to switch up the success "Message" that's displayed after a successful email submission.

It's super important to match the "Site BG" property with your site's exact background color. If your website's background is white, make it white, or if your site's background is a unique shade of black, change it to that same shade of black.

Connecting a service

You can collect emails with Loops, FormSpark, Mailchimp, or GetWaitlist.

To sync the component with your service, double-click into the component. Then, in the primary variant, select the "Input" layer. On the right panel, choose your provider and set it up with the corresponding ID or URL.

Check out this brief video below:


If you have any questions, let me know!

Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how the component is built.

Step 3 outline

Step / 03

Try recreating it for practice or copy and paste it into your website.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.