Compact Email Button Component

Copy component

Compact Email Button Component

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik

Created by

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

About the resource

Customizing the button

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

About the resource

Customizing the button

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

About the resource

Customizing the button

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

email button properties

Email button properties on the right panel.

email button properties

Email button properties on the right panel.

email button properties

Email button properties on the right panel.

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:

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:

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!

If you have any questions, let me know!

If you have any questions, let me know!

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Digital interface showcasing 'Shimmer Grid COMP' with a light blue dot matrix on a dark background, highlighting a UI component for web design

    Shimmer Grid Component in Framer

    Component

    Digital interface showcasing 'Shimmer Grid COMP' with a light blue dot matrix on a dark background, highlighting a UI component for web design

    Shimmer Grid Component in Framer

    Component

    Digital interface showcasing 'Shimmer Grid COMP' with a light blue dot matrix on a dark background, highlighting a UI component for web design

    Shimmer Grid Component in Framer

    Component

  • Graphic for an ASCII Art component in Framer, displaying a large ASCII-rendered letter 'V' with the caption 'Customizable component for converting images into ASCII art in Framer'

    ASCII Art Generator Component for Framer

    Component

    Graphic for an ASCII Art component in Framer, displaying a large ASCII-rendered letter 'V' with the caption 'Customizable component for converting images into ASCII art in Framer'

    ASCII Art Generator Component for Framer

    Component

    Graphic for an ASCII Art component in Framer, displaying a large ASCII-rendered letter 'V' with the caption 'Customizable component for converting images into ASCII art in Framer'

    ASCII Art Generator Component for Framer

    Component