Adding a Form to Adobe Dreamweaver

November 12, 2024

Adobe Dreamweaver is a desktop tool that helps you quickly build and publish web pages, supporting languages like HTML, CSS, and JavaScript. With its easy-to-use design and code views, Dreamweaver makes it simple to create, edit, and preview your site all in one place. If you built your website in Dreamweaver and want to embed your form—whether it’s for contact, sign-ups, or feedback—this guide will show you how. Watch the quick video below or follow the steps to add your form to any page on your site.

Youtube Embed Poster: LkSO_EH3T3E

Getting the Embed Code

Follow these steps to copy the form embed code for your website created in Dreamweaver:

  1. In Form Builder, click on Publish.
  2. Next, click on Platforms.
Platforms tab of Form Builder Publish tab in Jotform
  1. Then, select Dreamweaver. You can use the search bar to find it easily.
Dreamweaver publish option in Platforms tab of Form Builder in Jotform
  1. In the next screen, click on Copy Code.
Dreamweaver Copy Code button in Platforms tab of Form Builder in Jotform

Embedding the Form

Launch Dreamweaver and load the web page file where you want to add your form. You can open the file from the Files panel or go to File menu at the top, then select Open. Once you have your file open in Dreamweaver, follow these steps to embed your form to your web page:

Pro Tip

Before making changes, consider backing up your original web page file.

  1. In your workspace, scroll through your file’s source code to locate the exact spot where you want your form embed code to be inserted. You can switch your workspace to Code view if needed.
  2. Place your cursor at the desired location and paste the code.
Form embed code in Adobe Dreamweaver Code view
  1. Next, go to the File menu again and select Save to save your changes to the file.
Save option in Adobe Dreamweaver File menu

And that’s it. To preview what your form looks like on your web page before uploading the updated file to your web server, click on Split or Live at the top of the Dreamweaver workspace.

Adobe Dreamweaver Live view

Pro Tip

After uploading, check the page in multiple browsers to ensure it displays correctly across different platforms.

Note

  • This guide uses Adobe Dreamweaver 21.4, the May 2024 release. The interface may differ slightly depending on your version of Adobe Dreamweaver, particularly if you’re using an older release, but the process for embedding your form should remain the same.
  • Since the Dreamweaver form embed code matches the full source code of your form, updates made in the Form Builder won’t automatically display on your web page unless you reinsert and save the updated code in Dreamweaver each time. To have changes from the Form Builder automatically reflected on your web page, consider using the form embed script or iframe embed code instead. This approach ensures that any edits in the Form Builder appear instantly on your site without needing manual updates in Dreamweaver.

Push Notifications for Jotform Apps
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.

Comments:

  • PAUL WILLIAMSON - Profile picture
  • MaheshTomar - Profile picture
  • Sunflowerwindy - Profile picture
  • Debrief - Profile picture
  • aytekin - Profile picture
  • andrewgresham - Profile picture
  • colindaykin - Profile picture
  • osm - Profile picture
  • rrw - Profile picture
  • altviewgraphics - Profile picture
  • osmads - Profile picture
  • jwdesignshop - Profile picture