Upload my own PDF design

Hello,

I have already designed a form, I'm wondering if it is possible to upload my own design (png, ai, pdf available) to jotform and add fields to be filled on top of it, as I have found that the layouts you provided are quite limited. And our form is actually not for customers, we would like to connect it to API so that the form can be automatically filled basing on the info of our database. Therefore I have a specific form layout that is much more flexible that what you allow me to create. Attached is one of the example.

Thanks in advance!

Best regards,

Angel

If you have a fillable PDF form, you can use it and import it into JotForm. So, the system will copy the fields and the design.

You need to make sure that you are importing a fillable PDF. This feature will not accept plain PDF files or documents. It has to be a fillable PDF and needs to have fillable form fields (like textboxes, textareas, radio buttons, etc.).

You can check and follow this guide:

https://www.jotform.com/help/548-How-Can-I-Import-My-Own-PDF-to-JotForm

You can also try to add your images and customize a regular JotForm form. You will be able to add a background image, adjust the Page and Form colors etc.

You can also use the Advanced Designer, in order to further customize the form.

Let us know if you need any further assistance.

Hi Ivaylok,

Thank you for your reply. Following your instruction, I created a fillable form with adobe (see attached), but when I import it, the system adapts my design in a very different way (see attached) and I cannot manage to adjust it back to how it looks in my original design. Is there any solution or it just doesn't work that way? Thanks in advance!

Best regards,

Angel 

I checked your form. It seems that some of the fields in your original PDF are not fillable.

The system will try to copy the original PDF as much as possible. You can also further connect and disconnect fields in the Form Builder.

May we ask why you need to create a PDF form outside JotForm and then import it?

If you create a form directly in JotForm, it will give you more flexibility. You can also create fillable PDF form in the PDF editor. Here is the guide:

https://www.jotform.com/help/552-How-to-Create-PDF-Forms-with-PDF-Editor

We will wait for your response.

Hi Ivaylok,

Thanks!

Angel

Since a ticket has been opened here regarding another matter, I have moved your last question to the following thread:

https://www.jotform.com/answers/2123874-I-need-to-use-API

I will reply to that thread shortly.

Hi again Ivaylok,

Just want to confirm, are you sure that I can reproduce a form with exactly the same layout and design as I showed you above? It is flexible in terms of the variety of fill-form elements but I do not see the flexibility in layout and design. For example can I produce the same thing as attached with Jotform? Could you please show me a more detailed guide for the design of the form?

Thanks in advance!

Best regards,

Angel

Hi Angel, 

Are you trying to create a PDF Document or Online Form with your own design? 

If you're referring to the Online Form, we can try to match the styles using custom CSS code or the Advanced Designer Tool.

If you're referring to the PDF Document, we can try to assist you using the PDF Editor tool. 

Relate guides:

Form-Designer-Tutorial-Let-s-create-fantastic-forms-

How-to-Customize-PDF-Submissions-Report

We'll wait for your reply. 

Hi VincentJay,

Thanks for your reply. I actually already created a fillable pdf form with Adobe. It is not for online use, it is to connect to API and allow an auto-fill of the form with our own data. It would be great if you can have a look at the pdf doc and adapt it with CSS. In this case do I have to upgrade my account? I tried to import the pdf but Jotform didn't adapt my design at all. Where can I attach the document for you? 

Thanks in advance!

Best regards,

Angel

As per checking, layout wise, you can achieve the design you have on your PDF to your JotForm.

To align / move / shrink your form fields, please see these guides:

https://www.jotform.com/help/90-Form-Field-Positioning

https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm

https://www.jotform.com/help/423-Setting-up-Form-Columns

To insert an image thin your form, you can either use the Image or Text element:

If you have done all the basic changes but still need further customization, you may add Custom CSS to your form.

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

All of these functions can be done even with our Free plan. Meanwhile, please note that the import PDF is still on its Beta phase, as such, there might still be some limitation.

Please note that we do not create our users' forms. However, should you face any difficulties, don't hesitate to contact us and we will try to help you as much as we can, just kindly elaborate on your needs.

Hi,

Thanks for the advice, can a pdf fillable form work the same in terms of design?

Actually I have a doubt. I am not sure if I should use a form builder (online form) or a pdf editor. I want to connect to API and have the form filled by the data back at our data-base. Which form should I use or it doesn't matter? I sent an email to your API support team but no one reply yet.

Thanks in advance!

Best regards,

Angel

As what I understand, you will only be filling out the form thru API call. If this is your intention, I am also uncertain why you need the form to be designed as the design wouldn't matter in API calls.

However, if you plan to fill the form thru API, then download a PDF copy, then you just have to import your fillable PDF.

Don't worry if the online form's layout is not the same as the PDF, since when you download, the imported PDFs design will be pre-filled then downloaded.

You can also share a link to your PDF to us and elaborate exactly your needs so we can give you the proper suggestions.

Hi Vanessa,

Thanks for the reply. Ok maybe I didn't get the idea before. Here's the link : https://documentcloud.adobe.com/link/track?uri=urn%3Aaaid%3Ascds%3AUS%3A83107b32-c218-4a3d-8f4f-dfde8cde9cc5

In general, I want to have this form filled by the data of my data-base through API.

I tried to  import this pdf copy to JotForm PDF Editor but the layout didn't adapt at all. 

So now let me begin with a basic question from zero. What is the appropriate workflow to reproduce the pdf form I designed before it can get connected to API? Shall I reproduce the form on pdf editor or I have to start from creating an online Jotform and then edit it with pdf editor so as to get the same layout as my pdf copy?

Thanks in advance for you explanation.

Best regards,

Angel

You need have an online form to call the API. You can either create the form from scratch or import your fillable PDF.

https://www.jotform.com/help/2-How-to-Create-Your-First-Web-Form

https://www.jotform.com/help/548-How-Can-I-Import-My-Own-PDF-to-JotForm

Meanwhile, to customize the design, you can do it whether you had the from from scratch or from importing your fillable PDF.

Just to clarify, there is no one-click way of having your design. You have to arrange the fields, customize their sizes, colors and others manually. Please see these guides to help you achieve the design you want:

https://www.jotform.com/help/90-Form-Field-Positioning

https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm

https://www.jotform.com/help/423-Setting-up-Form-Columns

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Hi again Vanessa,

OK I guess I get what you mean. The case is a bit complicated. It is true that I don't need a design if I only want the form to be filled thru API, in this case I simply have to create the fields on an online form. But later we need to generate these filled forms into beautiful pdf formats as we need to send it to our clients. That's why I need the design. So to make it clear, I'll explain what I do know, please tell me if I am on the good way.

Now I'll start from scratch. I begin with creating an online JotForm, plain, with no design but only the fields needed to be filled thru API later. Then I shall edit this online form with pdf editor to customise the design and layout, for complicated layouts, I need to adjust with CSS. Then I shall upgrade my programme and have this connected to API.

Sorry for this stupid way, but I am a bit lost and I just have to make it clear.

Best regards,

Angel

I see, just like what I imagined. So you'll be needing the online form to be able to fill it out thru API (so no need of fancy layout), then you need a PDF file with the design you have to be able to print / send it out when you need to.

Given that, please use the Import PDF tool, this will try to create all the fields within your PDF file. Once the form is created, review all the fields and see that it is linked to the correct fields within your PDF file (a tip though, it would be best if you have unique labels). You can delete / add new fields, then disconnect or connect form fields to the appropriate PDF fields so that user's answer will be displayed properly on your PDF.

Whenever you'd like to have a copy of the submission, you can simply go to your Inbox, Sheets or PDF-Editor page and download the PDF. You'll have the option to either download it using our default PDF layout, or to download it using the PDF format you have imported.

To simplify further, you only need to import your PDF file, fill your form thru api, and download the PDF file anywhere within JotForm and you'll be able to get the PDF layout you have designed with the user's answer.

Hope this helps clarify your confusion as well on the platform. 

Hi Vanessa, 

Thanks for your clear demos! Now I get it.

Just two other questions :

1. If a field is not detected from my original pdf, how can I add it?

2. How do I add a photo field? (not an image that I'll add, but the field will be filled with images in our database)

Thanks a lot!

Best regards,

Angel

Can you please let us know which question is not detected when you import PDF document?

Please note that if the question is already part of PDF, you can add a new question in web form and add the connection to PDF field. Please check the screenshot below:

Yes you can add file upload field in web form as textbox field is added in the screenshot above. When the form is submitted, the data will be sent to form's submission page but you cannot map it with PDF field as that field is not part of PDF already.

Hope this helps.

Do get back to us if you have any questions.

Hi,

Thanks for replying.

for example, the 'date' field is not detected, but it is surely fillable in my original pdf. So how can I add it?

and from the original pdf, I added an image import field, same question how can I add it back?

Would you please show me? Great thanks!

Best regards,

Angel

Hello Angel,

From your form, I can see that the Date field on your original PDF is correctly linked:

You can add an Image field directly into the form and upload your image file:

Please try this and let us know.

Hi again,

I think we don't see the same thing. From what I can see, the field is missing, same cases fro some other fields on other pages.

Same for the image field, it is not detected so I cannot add a function and link to it.

I did check your form in editor and date field seems to be connected correctly with the PDF date field. Please check the screenshot below:

Which browser you are using and having this issue with? 

We will wait for your response.

Hi,

I just used Chrome and now I checked with Safari and it is ok for the date field.

But for others, fields are still missing.

and the image field as well.

Would you please just tell me how to add the fields back manually if they are not detected from the original pdf?

Thanks!

Best regards,

Angel

I have checked your form and I was able to find the fields you are referring to:

To add the fields manually, click on Add form elements:

For Image field you can use our Image upload preview widget, as there is just the blank space in the PDF hence system was unable to detect that, you need to insert it manually:

Let us know if you need any additional assistance.

Regards.

Hi,

Yes I found the fields too, but the problem is there is no blue boxes next to them. You see there is a blue box next to the "local hour" which means it is connectable, whereas there is no such box next to "date" so I cannot connect a field to it.

Thanks!

Best regards,

Angel

Yes, if there is no blue box, this means that the system can not detect the field and you can not connect it.

You will need to manually add a field on the online form.

Let us know if you need any further assistance.

Yes, I know. Would you mind showing me with a gif about how to add the blue box at the circled position? I know the problem but I just don't see the solution.

I would also recommand JotForm creating a chatbot, it makes questions and answers much easier.

Great thanks!

Best regards,

Angel

Unfortunately, if the system does not detect it, you can not manually make it blue.

This is a new product and currently, it is in the Beta phase.

However, you can add any type of fields on the online form. Then you can rearrange them as you need, so the form meets your requirements.

Let us know if you need any further assistance.

So you mean I have to re-create an online form from zero since the few boxes are not detected from my original pdf?

And another question. How is the resolution of images imported thru api?

Apologies, unfortunately, it is not possible to upload images thru the API.

As for the undetected fields, I am afraid there is currently no way to link it to your original PDF. As the Import PDF tool is still on Beta phase, what I can guarantee is it will be enhanced to hopefully be able to detect all fillable fields.

As a workaround though, simply add all the fields that you need within the Form Builder. Then within the PDF-Editor, create a similar PDF format and arrange the field values as you desire.

https://www.jotform.com/help/384-How-to-Customize-PDF-Submissions-Report