Embed a DocuSign power form

  • 1
  • Question
  • Updated 4 months ago
  • In Progress
I think this should be simple... 

I want to embed a DocuSign PowerForm on a Skuid page.  (This allows for self-service signature - website visitor lands on a page, signs the form, and is then redirected to another page upon successful completion.)

I've thrown the following HTML into a Template component.  It looks great, except that I can't get the IFrame to resize to fit the page dynamically.  I am not great with HTML but tried a few different things in place of the "width" tags below (i'm trying "width: 100%;").  Any thoughts on this, or might there be some issue with the way the HTML is interacting with my Skuid page Theme?

<html>
  <head>
    <title>IFrame PowerForm Sample</title>
    <style type="text/css">       body { background-color: #fefdfc;}       p.description { width: 500px; border: 1px solid #cfc; padding: 20px; }       .form_cont { border: 1px solid #cfc; padding: 20px; width: 1024px; background-color: #cd9;}       .top_cont { width: 1124px; margin-left: auto; margin-right: auto; }       #dswpf { width: 1024px; height: 700px;} </style>   </head>   <body>     <div class="top_cont">       <p class="description">This page embeds a DocuSign Web PowerForm into an HTML iframe. This allows a website's branding and design to be retained while a user fills out and signs a form.</p>       <div class="form_cont">         <iframe id="dswpf" src="https://demo.docusign.net/MEMBER/PowerFormSigning.aspx?PowerFormId= 8968380d-16da-447c-97d7-fa989ed11082&Signer%201_UserName=James%20Smith"/>   </div>     </div>   </body> 
</html>
Photo of Elissa Bradley

Elissa Bradley

  • 1,786 Points 1k badge 2x thumb

Posted 9 months ago

  • 1
Photo of Luzie Baumgart

Luzie Baumgart, Official Rep

  • 3,406 Points 3k badge 2x thumb
Hi Elissa, I'm sorry to see that your post remained without a response and I was wondering if you found a solution for this? Have you tried to only use the "iframe" tag in the template component, without the "html" and "head" etc., and add the width to that, similar to this:

<iframe id="dswpf" src="https://demo.docusign.net/MEMBER/PowerFormSigning.aspx?PowerFormId=
8968380d-16da-447c-97d7-fa989ed11082&Signer%201_UserName=James%20Smith" width=100%>test</iframe>