How to create a button in my email invitation to take participants to the survey instead of the link

Hi npearce15 ,
Yes, it is possible to use HTML to insert a button in the email that links to a survey. When you tried doing this, did you insert the html into the message after clicking the Source icon (see below), or did you enter it in the same editor window where the message is composed?

Hi MatthewM
I tried to insert my HTML into the source. I would have cases in the preview window after I returned from the source that would look like a button. But then when I sent it to my email to test functionality it would show up as plain text. I am not an expert on HTML so I'm sure it is something in my syntax that was incorrect. Do you happen to have a simple example of how to use the generated survey link to show up in button format?

MatthewM
Thank you! this worked like a charm. you saved me from a lot of trial and error this evening 😊

Thanks for letting me know it worked. Glad it could save you from some mindless repetitive work!

This worked great. I don't understand why, but every other button I made didn't work. Thanks for the post.

Can you guys please help me to repeat this process, I'm still a bit confused on where to insert the above HTML. Do I need to insert it in the bottom section before the string of code ends or do I need to replace the current code?

Thanks

Hi GIntegrity ,
If you have not started to write your email in the editor, you can replace the default code from Qualtrics.
If you have already drafted your message in the editor, select the position in your message where you want to insert the button.
In either case, make sure to toggle the Source icon to HTML view before you insert the HTML.

Works perfect :-)

Hi! I can't view the html code. If someone could share it, I'd be very grateful, as I also need to make a similar button and have limited knowledge of html. Thanks in advance!

Hello @Paula_978 , thank you for  bringing this post to our attention! The correct code has now been added to the original solution!

Let me know if you can see it correctly on your end now. 🙂

Thank you very much for the reply and for fixing the issue so that the code shows. 

I finally found a similar code on a different thread, and adapted that. It works well, and it was possible for us to send the survey invitation with the button included.

Can anyone advise how to make this a oval button rather than a rectangle? 

Add border-radius and you can smooth out the corner: Tweak it a litlle bit for the oval button

<table border="0" cellpadding="0" cellspacing="0">

    <tbody>

        <tr>

            <td bgcolor="#0076be" class="cta_style" style="padding: 10px 15px; line-height: 20px; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; background-color: rgb(0, 118, 190);border-radius: 16px;"><span style="line-height: 20px; font-weight: normal; display: inline-block;"><a href="${l://SurveyURL}​" style="color: rgb(255, 255, 255); line-height: 20px; display: inline-block;" target="_blank">Begin the Survey</a></span></td>

        </tr>

    </tbody>

</table>

</br>

<table border="0" cellpadding="0" cellspacing="0">

    <tbody>

        <tr>

            <td bgcolor="#0076be" class="cta_style" style="padding: 10px 15px; line-height: 20px; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; background-color: rgb(0, 118, 190);border-radius: 50%;"><span style="line-height: 20px; font-weight: normal; display: inline-block;"><a href="${l://SurveyURL}​" style="color: rgb(255, 255, 255); line-height: 20px; display: inline-block;" target="_blank">Oval Button</a></span></td>

        </tr>

    </tbody>

</table>

Thank you, this is perfect!

Hey,

I tried using the code from above:

<table border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td bgcolor="#0076be" class="cta_style" style="padding: 10px 15px; line-height: 20px; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; background-color: rgb(0, 118, 190);"><span style="line-height: 20px; font-weight: normal; display: inline-block;"><a ${l://EmployeeEngagementURL} style="color: rgb(255, 255, 255); line-height: 20px; display: inline-block;" target="_blank">Begin the Survey</a></span></td>
		</tr>
	</tbody>
</table>

But when I paste it into the message editor, it changes the href=”${l://EmployeeEngagementURL}” to href="%24{l://EmployeeEngagementURL}" and that seems to mess up the link completely, when I try to open the Link in the Email, it redirects me to “file:///Applications/Microsoft%20Outlook.app/Contents/Frameworks/EmailRendererKit.framework/Resources/%24%7Bl://EmployeeEngagementURL%7D”

Can anyone help with this?