Sending a pre-drafted email via a button

Classic General
1

Hey there,
I would like to increase the chance of people sharing my “lead-magnet” by adding a header and a button into the banner image inside the Thank you page of my website (people get there when they have subscribed to my newsletter via the landing page).

I would like to draft a simple sentence such as: “Hello, I’ve just signed up to receive a free guide about diet and nutrition for healthy bones and joints… I think you might like it too. This is the link …”

I want the button “” to open the user’s email app with the sentence above, so all they need to do is just put the email address of their friend.

Is it possible to do something like this within RW?

2

You can do it with HTML (HTML stack):

<a href="mailto:?subject=Check this out
&body=Hello, I’ve just signed up to receive a free guide about diet and nutrition for healthy bones and joints… I think you might like it too. This is the link …">Send to a Ref</a>
1 Like
3

Thanks Doug. Where should this HTML go?.. How can I make it work with the button?

4

The HTML above would go on the " Thank you page of my website". I did fix a typo. As for a button, it might be easier to style the link like a button than to try and make a standard stacks button work.

Do you have a button “look” you want?

5

Wow, okay. I was about to use the Button Plus 2 Stack like the picture below…

47
471240×794 331 KB

6

Without a URL it’s hard to get it exact with just a screenshot, but here is some code that should work.

The HTML stack should contain this:

<a class="mybutton" href="mailto:?subject=Check this out
&body=Hello, I’ve just signed up to receive a free guide about diet and nutrition for healthy bones and joints… I think you might like it too. This is the link …">SEND THEM A QUICK EMAIL</a>

Then put this custom CSS onto the page inspector:

.mybutton {
    display: inline-block;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 0.85rem 2rem;
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    background-color: rgb(249, 195, 58);
    color: #fff;
}

a.mybutton {
    color: #fff;
}

.mybutton:hover,
.mybutton:focus {
    background-color: rgb(123, 89, 4);
    }

a.mybutton:hover,
a.mybutton:focus {
    color: #fff;
}

You can play with the colors, sizing, padding., etc.

3 Likes
7

Thank you so much!.
I tried to customise the colours, but I didn’t quite grasp it… maybe I can see how it changes in CSS and next time I will be able to replicate it. I managed to change the padding and text size!

Could you help me with the following?

  • Button centered aligned

  • button background colour: #f6c631

  • On hover transparent background and white borders and text

The email works wonders… it is so cool!

9

As for the color changes that are pretty easy:
On the first background-color background-color: rgb(249, 195, 58);
2020-02-23_10-47-42
Replace the rgb(249, 195, 58) with #f6c631
So that line would be:

background-color: #f6c631;

For the hover/focus changes, again change the RGB value to transparent on the background-color and add a border:
2020-02-23_10-50-46

Should now be:

.mybutton:hover,
.mybutton:focus {
    background-color: transparent;
    border: 1px solid #fff;
 }

a.mybutton:hover,
a.mybutton:focus {
    color: #fff;
}

As for centered alignment of the button, without seeing the placement (within what container) on the page it’s hard to give an easy answer. So I’d need a URL.

10

Amazing Doug! I changed the colour and it looks super nice.

You will notice by the way that on mobile the button gets so “paddy” (does it exist a word as such? :sweat_smile:)… do you think it would be possible to make it more slim and less bulky?

The link for the page is this

11

Looks like you are using foundations 1 correct?

If you are using stacks 4 you can add a class to HTML stack to center it: text-center
2020-02-23_11-44-41

As for changing sizes on Mobile that can be done with a media query, just add this to the bottom of the CSS:

@media only screen and (max-width: 25em) {
   .mybutton {
     	font-size: 1.0rem;
		padding-right: 1rem;
		padding-left: 1rem;
	}
}

You can change the amounts and the breakpoint (max-width)

3 Likes
12

I don’t have Foundation 4 yet, but I’m looking to get it in the short future. Should I type “text -center” inside the CSS section in the page inspector of the page?. If yes, could you tell me how to generate its CSS code?

Thanks for this!. What I noticed is that the settings you have given me in the CSS shows on IPhone SE (320 x 568) and IPhone 8 (375 x 667), but NOT on IPhone XS (414 x 736). Is this anything to do with breakpoints… if yes can you tell me how to modify the settings? Is it something I have to do inside Site Style at all?

13

I was talking about stacks 4, not foundation 6. If you don’t yet have stacks 4 (It should be at the top of your list) then grab the CSS box stack from Joe Workman, it’s free.
Place the HTML stack inside the CSS box. Put the class name text-center on the CSS box stack.
2020-02-23_13-04-51

That should center the text. Foundation has that class built-in (both the older version and the newer).

I think Foundation by default uses a 16px font size. So the max-width on the media query above is set to 25em or (25 x 16) 400px. So if you wanted to change to include an XS than you would need to change it to at least 26em.

Instead of trying to match each possible device, it might be better to manually check (on the desktop) by shrinking the screen down, when it looks bad then make that the breakpoint. There are probably screens in every width out there.

1 Like
14

I upgraded to Stack 4. Everything is working well.
Thanks a lot for your help with this :+1:

1 Like
15

This is useful information - thanks for sharing!

1 Like
16

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.