Is it possible to change CSS of Thank you page?

  • iondjp
    Asked on April 25, 2017 at 1:01 AM

    I am very impressed with JotForms for the most part, but it appears that I and many others have a problem trying to get forms to print as desired. It is an issue when I need a form to print out so it looks the same as it's paper equivalent. This is particularly important for Quotations Forms.They must look like the paper forms.

    I tried to use the HTML editor of the Thank You page to mock up my paper form using tables and images in the Thank You page but that has two inherent problems:

    1. I can't put a Print button on Thank You Page. Of course I could use the print command of the browser, but would rather have a button for my users.

    2. The width of the Thank You page appears to be restricted to 690px wide and therefore when printed out, it is too narrow and the margins on the page are too wide.

    I have solved this in the past, by redirecting my first form to a second form. This does the trick, but it is a lot more time consuming because it requires me to use URL Parameters to transfer the data between the two forms. I am aware I can't use POST method to transfer the data without knowing PHP and setting up a page on another web host. Using URL parameters becomes an even greater problem when my form has several (2 dozen) fields to transfer. This seems to be another common frustration with other users.

    So, the problem would be less of a problem if it was possible to do one of the following;

    a. modify the Thank You page more extensively and integrate Print Widget or script

    b. insert a PHP widget that will allow me to GET form field data without having to use URL Parameters

    c. devise a way for me to draw data from submissions into a different form. This would allow me to, for example, use one form with 30 fields to enter the submission and then use another less complicated form with only 10 fields to display and print the data.

    d. If I was able to place an image as a background on the Thank You page and then place form fields over top so that when the form prints out the data appears to be in the place on the form.

    Hopefully some thought will be given to this.

    Thanks

     

     

  • Nik_C
    Replied on April 25, 2017 at 3:45 AM

    1) That is true, you can not add a print button to the Thank you page and unfortunately, you can not add it by using script code since it is not allowed for security reasons. What you could do is to redirect your thank you page to some other form (as you mentioned in the second question) that will have an only print button in it, maybe that could work for you.

    Regarding your other questions, there are several different features you mentioned there. 

    We could create a feature request for our backend team to review, but first, did you consider creating a separate page, I mean completely independent which you can custom as you wish and then you forward your form to it? Could that work for you?

    Please let us know so we can proceed.

    Thank you!

  • iondjp
    Replied on April 25, 2017 at 9:32 AM

    As I said, I have used the 2 form method to get around this before. That method has 3 drawbacks;

    1. it means I have to maintain 2 forms

    2. using URL parameters is cumbersome with several fields to share

    3. I am restricted to 2000 characters in a URL string, which means I may need trim my questions and responses. I'm not excited about that prospect and it may not be technically possible no matter what.

    BTW: I tried to use the URL creation tool (http://prepopulate.jotform.io/) but for some reason it only produces a URL with very few random selection of fields (eg. 5 out of 52)

    So, moving forward, I think removing the restrictions on the Thank You page editor would be very helpful for me and others.

    As far as security, I am not clear whether it would be a security risk to my form submissions, or a broader security risk to the server. If it is the former, then personally it would be an acceptable trade-off is some cases.

    Thanks.

  • Kiran Support Team Lead
    Replied on April 25, 2017 at 11:01 AM

    Sending the form information to another form URL may not work correctly sometimes when you have several fields to be passed. The restriction of 2000 characters in the URL is set by the browsers and unfortunately, there is nothing we can do about this. 

    In order to add a Print button to the Thank you page, it is required to inject some Javascript code. Allowing javascript code to the forms is vulnerable by XSS injections and so it is restricted to inject any codes to the forms.

    If you only want to customize the display of the Thank you page, you may consider using the source code option to design the Thank you page such as increasing the width, inserting background, etc.

    Is it possible to change CSS of Thank you page? Image 1 Screenshot 20

    This way, you can also display the form fields on the Thank you page itself. The other alternative is to design a custom web page with your requirements and redirect the form to the page. 

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help. 

  • iondjp
    Replied on April 25, 2017 at 3:32 PM

    I'll try to make that work for now. Can you provide some assistance with changing the width of the Thank You page? I do not see anyway to insert CSS.

  • Nik_C
    Replied on April 25, 2017 at 5:01 PM

    Well, you can insert the DIV in the Source code of the Thank you page:

    Is it possible to change CSS of Thank you page? Image 1 Screenshot 20

    For example:

    <div style="width: 100%; height: 100%; background-color: red; text-align: center;">

    <h1>Thank You!</h1>

    <div style="text-align: center;">&nbsp;</div>

    <div style="text-align: center;">

    <div><span style="font-size: medium;">Your submission has been received.</span></div>

    </div>

    And you can play with width there and insert the additional code between the div.

    Or you can use this code that will make the Thank you page spread over the window:

    <div style="background: #6a8778; width: 100%; height: 100%; text-align: center; position: absolute; top: -8px; left: -8px;">

    <div style="background: #f8f8f8; width: 100%; height: 100%; text-align: center; position: absolute; top: 8px; left: 8px;">

    <h1>Thank You!</h1>

    <div style="text-align: center;">&nbsp;</div>

    <div style="text-align: center;">

    <div><span style="font-size: medium;">Your submission has been received.</span></div>

    </div>

    </div>

    </div>

    Let us know if you have any further questions.

    Thank you!

  • iondjp
    Replied on April 25, 2017 at 8:09 PM

    That should work. Thanks for all your assistance.

    Update may 1, 2017

    Just thought I would offer some follow-up to this. I was able to use the Thank You page quite successfully. The trick was to use inline CSS. Although it is not recommended by the HTML/CSS experts, it does manage to over come the inability to inject styles into the header of the page.

    I am not permitted to share the full form, but I have pasted a portion and then below it a look at the script associated.

     

     

    <table style="width: 96%; margin-left: auto; margin-right: auto; border-collapse: collapse;" cellspacing="0" cellpadding="0">
    <tbody>
    <tr style="text-align: center;">
    <td style="background-color: #a6a6a6; border-style: double; border-top-color: #050505; border-width: 5px 0px 0px 0px;" colspan="4">
    <p style="font-size: 12pt; font-weight: bold; margin-top: 1pt; margin-bottom: 1pt;">Customer Detail and Agreement</p>
    </td>
    </tr>
    <tr style="text-align: left; vertical-align: top; border-style: solid; border-color: black; border-width: 1px 0px 0px 0px;">
    <td colspan="4">
    <p style="margin-top: 1pt; margin-bottom: 1pt; padding-bottom: 0px; font-size: 8pt;"><strong>Name:</strong> {name}</p>
    </td>
    </tr>
    <tr style="text-align: left; vertical-align: top; border-style: solid; border-color: black; border-width: 1px 0px 0px 0px;">
    <td colspan="4">
    <p style="margin-top: 1pt; margin-bottom: 1pt; padding-bottom: 0px; font-size: 8pt;"><strong>To Start:</strong>{start}</p>
    </td>
    </tr>
    <tr style="height: 50px; text-align: left; vertical-align: top; border-style: solid; border-color: black; border-width: 1px 0px 0px 0px;">
    <td style="width: 50%;" colspan="2">
    <p style="margin-top: 1pt; margin-bottom: 1pt; padding-bottom: 0px; font-size: 8pt;"><strong>Job Location:<br /></strong>{address}</p>
    </td>
    <td style="width: 50%;" colspan="2">
    <p style="margin-top: -2px; padding-bottom: 5px;"><strong>Directions/Notes:</strong><br />{directions}</p>
    </td>
    </tr>
    <tr style="text-align: left; vertical-align: top; border-style: solid; border-color: black; border-width: 1px 0px 0px 0px;">
    <td style="width: 50%;" colspan="2">
    <p style="margin-top: 1pt; margin-bottom: 1pt; padding-bottom: 0px; font-size: 8pt;"><strong>Preferred Phone:</strong>{homePhone}</p>
    </td>
    <td style="width: 50%;" colspan="2">
    <p style="margin-top: 1pt; margin-bottom: 1pt; padding-bottom: 0px; font-size: 8pt;"><strong>Alternate Phone:</strong>{workPhone}</p>
    </td>
    </tr>
    <tr style="text-align: left; vertical-align: top; border-style: solid; border-color: black; border-width: 1px 0px 0px 0px;">
    <td style="width: 50%;" colspan="2">
    <p style="margin-top: 1pt; margin-bottom: 1pt; padding-bottom: 0px; font-size: 8pt;"><strong>Email:</strong>{email}</p>
    </td>
    <td style="width: 50%;" colspan="2">
    <p style="margin-top: 1pt; margin-bottom: 1pt; padding-bottom: 0px; font-size: 8pt;"><strong>Project Mgr:</strong>{projectMgr}</p>
    </td>
    </tr>
    </tbody>
    </table>

     

    Hope this helps others.