How to Set a Social Media Sharing Preview in Forms

April 13, 2023

Social media platforms like Facebook, Twitter, Linkedin, etc., use a protocol called OpenGraph to show a preview of links. In particular, you must have the metadata properties such as og:image in the <head> section of your website to display a preview image when you share a link from your website.

Jotform supports this protocol without needing you to get the source code of your form and manually add the required metadata. The only requirement is to ensure the image is uploaded as a logo in your form.

Jotform has two Form Layouts; Classic and Card. The below steps are for the Classic Form layout. If you’re working with Card Form, visit How to Add a Logo in Jotform Cards instead.

  1. In the Form Builder, click the Add Your Logo at the top to open the Logo Properties panel.
Add Your Logo option in Jotform Form Builder
  1. Choose from the three (3) options to add a logo.
    • Upload — Click the Upload File button to upload a new logo in the form.
    • My Images — Go to this section to select an existing logo you previously uploaded.
    • Enter URL — If you’ve hosted the logo somewhere, enter the URL here.
Add Logo Properties panel of Jotform Form Builder
  1. Adjust your Logo Size and Alignment in the form, and that’s it.
Logo Size and Alignment options in the Logo Properties

Choosing the Best Size for Your Preview Image

Social media platforms have different rules from each other, so ensure that your image closely fits their standard. See the table below for proper image sizing.

PlatformImage SizeImage RatioImage TypeFile SizeReference
FacebookMin: 200 x 200 px
Recommended Min.: 1200 x 630 px
Page Post Min: 600 x 315 px
1.91:1 or closeJPG, PNG, WEBP, or GIF8 MBFacebook
TwitterMin: 300 x 157 px
Max: 4096 x 4096 px
Less than 2:1JPG, PNG, WEBP, or GIF5 MBCards Markup or Large Image
LinkedinMin: 1200 x 627 px1.91:1JPG, PNG, WEBP, or GIF5 MBLinkedin
iMessageIcon min: 108 x 108px
Image Min: 900 x * px
1 – 5 MBLink Previews in Messages
WhatsAppMin: 300 x 200 pxJPG, PNG, WEBP, or GIF300 kb

Troubleshooting Common Issues with Preview Image

If the intended preview image is not displayed when you share the form to any social media platform, it most likely does not comply with the above rules. However, if you are sure that it complies with the rules, give time for social media platforms to cache the form. For some platforms, you can request them to fetch new information from your form by providing its URL through their inspector, debugger, or validator.

PlatformLink
Facebook/WhatsAppSharing Debugger
TwitterTwitter Card Validator (3rd Party)
LinkedinPost Inspector

Here’s an example of how Facebook Sharing Debugger displays your preview image:

How to Set a Social Media Sharing Preview in Forms Image-1

If none of the above works, there may be another problem. Please contact us by creating a new support ticket.

Academy Logo

Introduction to Form Building

Sharing by Email, Link, and Social

Go to course :Sharing by Email, Link, and Social
lesson-2 - image
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comment:

Podo Comment Be the first to comment.