SiteLink eSign - how to make mobile-friendly e-document?

dc2000 · March 2020

I am a web developer and I'm currently trying to help someone to design their contract for your eSign document. But I'm having a hard time making it look good on a mobile device. So some help from your dev team will be appreciated?

Here's the steps that I've taken so far:

I see that your Lease #1 form supports HTML format. So to test it, I completely replaced it with my simple test text. (Just basic HTML). Here it is (I didn't include the middle here that contains just long paragraphs of text):

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>

<h1>Title Of The Page</h1>

<h2>Subtitle goes here</h2>

<p>This is a short paragraph that should be readable on all devices without distortion.</p>

<!-- blah-blah-blah -->

</body>
</html>

This HTML layout is entirely mobile-responsive, as I can test it on my own website. Here's how that HTML is rendered on my iPhone. As you can see the page only has plain clear text and is only scrollable vertically:
But when I try to use the same HTML markup for your eSign process (in the Lease #1 template), the markup that is received via email looks like this on the same iPhone:

Note that the page has overlapping elements (preventing buttons and controls from being clicked) and worse still, the page becomes scrollable horizontally that makes it very difficult for the end-user to navigate through it, especially if they need to sign and initial paragraphs in some area.

From a cursory look of things, it looks like that the eSign contract/page is converted from HTML to PDF before it's emailed to the customer. Which is a problem.

So any suggestions how to make the eSign page readable on the small devices? (Or how do I disable conversion to PDF?)

SiteLink eSign - how to make mobile-friendly e-document?

Categories