Creating forms in Adobe InDesign is nothing new, however they aren't supported for digital publishing projects viewed in a web browser. Forms work great for PDF Interactive, but what if you want to add one to a contact page that will be published online?
In this tutorial, learn how to design a contact page for an iPad sized digital publishing project, and use Elfsight to create a HTML form that can be inserted into the layout.
We'll also publish the document and test the form in a web browser.
Click the link below to download the assets for this class and follow along step-by-step.
The first step will be creating the iPad sized page for this tutorial. Keep in mind that the form setup for this class will work best for the iPad document size.
Document Setup
Click on New File
Click on the Mobile tab to launch the screen presets for devices.
Choose the iPad 768 x 1024 option.
Set the orientation to Landscape.
De-select the Primary Text Frame box.
Set the top, bottom and right side Margins to 60. Set the left side to 34. (Note: You will have to break the link to change the fields individually.
Click Create.
Here's a look at the settings as explained above:
Let's focus on adding the main image, titles, logo and social media icons to build out the contact page design. This part will also look at creating a swatch color and setting a blending mode to the main image.
Placing Image
To import the main image, go to File > Place and locate the image in the lesson files saved as City Main.jpeg.
With the content loaded in your cursor, click and drag a vertical frame.
With the frame selected, set the width of the frame to 488 px. This can be adjusted in the Control Panel by typing 488 in the Width field.
To make the content fit the frame, use the Fill Frame Proportionally icon located in the Control Panel or Properties Panel. You can also right-click the content, go to Fitting > Fill Frame Proportionally.
Place the image to the left of the page.
Dragging two guides on to the page will help when inserting the HTML form and aligning the content when placed in the layout.
From the left side ruler, click and drag a guide and snap it to the right edge of the image frame.
Drag a second guide and place it at the 536 X position.
The image and two guides are placed on the page and should appear like the example below:
To add a blending mode, we'll first have to create the theme color for the design.
Open the Swatches Panel and click the options icon in the upper right corner of the window.
In the fly-out, choose New Color Swatch...
In the Hex # field at the bottom of the New Color Swatch window, type in the code 92a69a. It is the same green color that will be used throughout the theme.
Click OK.
The swatch has been added and the next step is applying it to the image frame.
Click on the image frame and then in the Swatches Panel, click on the green color.
Click on the Content Grabber to select the content within the frame.
In the Properties Panel, click on Opacity and in the Blending Mode dropdown, change the setting from Normal to Multiply.
Set the opacity from 100% to 50%.
Here's a look at the Blending Mode and Opacity settings as explained above:
Next let's bring in the main title and sub-title, which will be placed on top of the image. For this next part, we'll be using the Karla font, which you can download here.
Select the Type Tool and draw a text frame on the page.
Type the text: List your property with confidence.
Make the font Karla (Bold) and point size to 52.
Set the Line Spacing (Leading) to 56.
Press Return or Enter on your keyboard to create a return.
Type the text: Contact an agent today.
Make the font Karla (Regular) and point size 28.
Set the Line Spacing (Leading) to 40.
Once the type has been set, bring in the logo for this fictitious real estate company called Montclair. Go to File > Place and choose the SVG file saved as Montclair Logo. Place the logo above the titles.
To finish off the design for this contact page, add the four social media icons included in the lesson files. Place them in the upper left corner of the right side of the page.
Here's a good placement for the icons:
Finally add the email, info@montclairrealty.com in the upper right corner, inside the margin and the web address www.montclairrealty.com in the bottom left corner. Make both sets Karla (Regular) with a point size of 10. The email will have the text aligned to the right, while the website will have text aligned to the left as covered in the video.
Here's good placement for both text pieces:
The remaining space on the page will be occupied by the HTML form, which we'll create in the next step using the Elfsight platform.
Visit elfsight.com and create a free account, which will allow you to build one free form widget. Once you have created the account, make your way to the Widgets option and then from the left side menu options, choose Forms. Lastly, choose Form Builder to launch the widget editor.
This is where you can build and customize the form to align with your InDesign look and feel. To remain on brand for the contact page we're creating, we'll use the Karla font and stick to the green color from the InDesign layout.
For this specific contact page, we'll customize the fields so it fits appropriately.
Click on the Build Form button in the left side menu options in the editor.
Click the Name options icon and click the pencil icon to edit the field. Change the Label to Name and click back.
Delete the Last Name field and the Phone number field so we're left with Name, Email Address, Message and Consent.
Click on Layout and ensure the Embed Type is set to Inline, the Form Width is 620 px and the Form Layout is Vertical.
Click Appearance to customize the design. Choose the Light theme and set the accent color to the 92a69a HEX code.
Choose the style from the carousel options. For this tutorial, let's go with the second option.
Set the Font to Karla.
Under Customize Elements, choose Header and set the title color and links color to 92a69a.
The Title size is 32 px and the Caption size is 14 px.
Click Back.
Choose Form Fields and set the Active Color to 92a69a. Set the Fill color to a darker grey in the color picker menu for added contrast. You can leave the label and text field colors black.
Click Back.
Choose Submit Button and set the Style to Outline and make the color 92a69a.
Set the Horizontal Spacing to 27 px and Vertical Spacing to 12 px.
Click Back
The form has been built with the settings applied above. The preview in the widget editor should appear like this:
Let's now copy the HTML code and insert the form in the space left in the InDesign layout.
At the bottom left of the editor, there's an option to add to website for free. Click that button, which will allow you to now publish the form and get the HTML code.
Once published, you can also rename the form Get in Touch.
Finally, click the Install button, which will launch another window to copy the embed code.
With the code copied to your clipboard, let's jump back to InDesign to insert the HTML into the layout.
Insert HTML
Go to Object > Insert HTML.
Paste the HTML code from Elfsight.
Click OK.
It should take a few seconds before you see the form appear in the layout. If you don't see it or it doesn't load, repeat the same steps to insert the code again.
To test the form, publish the document online. This can be done by going to File > Publish Online.
Once the project is published online, test out the form by filling in the fields and clicking Submit. Messages sent to will go to the email address you used when signing up for the Elfsight account.
Comments