There are two ways to show two photo’s next to each other in the PDF. Read this Help Center post to find out!

  

No MoreApp account yet? Sign up here.


Option 1: Subform-widget

1.1 MoreApp Platform

First, open your form in the MoreApp Platform and click on Edit Form.


1.2 Add Subform-widget

Add the Subform-widget to your form. Click on the Pencil and configure the Properties. Give the widget a name by Label and Add button text. For example Photos and Add Photos.



Click on Edit under the Subform field.


1.3 Add two Photo-widgets

You will be redirected to the subform. Drag two Photo-widgets into the subform. Click on the pencil and configure the Photo-widgets. If you are done, click Save. 


1.4 Email tab 

Go to the Email tab of the subform. Check the box: Use horizontal orientation for subform.



1.5 Save & Publish

Click on Save & Publish and fill in your form. 


1.6. Result in PDF

Option 2: HTML 

This feature is available in Branch, Tree and Forest plan. Check our plans! 


2.1  Code view

Go to the Email tab, check the Advanced mode and click on the Code view (</>).


Search for the data names of the two photo widgets that you want to place next to each other.  


2.2 Remove code

Remove the following code for both photo widgets.

<tr class="${_hideWhenEmpty(FOTO1)}"> 
        <td colspan="2">
              <span class="more-field-label">Foto 1</span><br/>
              <img src="${FOTO1}" alt="" style="max-width: 200px; max-height:
               200px;">


2.3 New code

Steps:

  1. Copy the code below and paste it on the desired place in the code view
  2. Place the Label of Photo 1 instead of: LABEL1 
  3. Place the data name of Photo 1 instead of: dataname1
  4. Place the Label of Photo 2 instead of: Label2
  5. Place the data name of Photo 2 instead of: dataname2
  6. Click on the Code view (</>) 
  7. Hit Save & Publish
<td class="more-field-label" style="text-align: center;">
  <span class="more-field-label">LABEL1</span>
  <br> 
  <img style="max-width: 300px; max-height: 300px;" src="${dataname1}" alt="">
</td>
<td style="text-align: center;">
  <span class="more-field-label">LABEL2</span>
  <br> 
  <img style="max-width: 300px; max-height: 300px;" src="${dataname2}" alt="">
</td>


2.4 Result in PDF

After you filled in a form the result in the PDF will look like:



Want to stay up to date with our latest tutorials? Go to YouTube and hit the Subscribe button!