Abobe Muse Forms Page to HTML and Opened in Dreamweaver

Contributor ,
Mar 27, 2020 Mar 27, 2020

Copy link to clipboard

Copied

Very new to Dreamweaver.

 

I have exported from Adobe Muse to HTML a website I developed. When I open a page on this site that includes fillable form fields for Name/Email/Company/Part Numbers, in Dreamweaver, I get all the header/footer graphics, but the form section is blank and I cannot see any forms elements.

 

Am I not getting how forms function in DW? Or do I have to recreate these pages from scrath at this point.

 

Thanks in advance.

TOPICS
How to , Import and export , Other

Views

757

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 27, 2020 Mar 27, 2020

Copy link to clipboard

Copied

Anything you create in Muse is likely to look off in Dreamweaver because Muse's machine generated code is not web standards compliant.   If this were my project, I would re-build from scratch with a fresh, clean document and modern HTML and CSS code.

 

That said, an HTML form doesn't DO anything.  You need a form-to-email processing script in a programming language supported by your server.  Ask your host if they have scripts you can use.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 27, 2020 Mar 27, 2020

Copy link to clipboard

Copied

Could you show us the code that produces the form? Or better, give us the URL to the site.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 27, 2020 Mar 27, 2020

Copy link to clipboard

Copied

Thanks.

Here is the URL: www.prime-industrial.com

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 27, 2020 Mar 27, 2020

Copy link to clipboard

Copied

I am sorry, but I cannot replicate the problem. 

junk.png

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 28, 2020 Mar 28, 2020

Copy link to clipboard

Copied

LATEST

I didn't download the various CSS files.  But I can see the HTML code rendered in DW Design and Live view. 

 

That said, the site needs to be re-built responsively.  Having a JS re-direct to a different page for mobile and tablet devices is total nonsense.  Especially when some browsers ignore redirects for security reasons. 

 

Below is a quick example of a responsive layout using Bootstrap.  Copy & paste this code into a new, blank document.  To see it in action, save and preview in various browsers and web devices.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.4.1 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.4.1 CSS-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style>
/**minor customizations**/
.jumbotron {
	background: url(https://placeimg.com/1200/500/arch) no-repeat center center fixed;
	background-size: cover;
	margin-bottom: 0;
	padding-bottom: 0;
}
.jumbotron > .container {
	background: rgba(0,0,0,0.5);
	padding: 5%;
	color: #FFF;
}
.navbar { margin-bottom: 4rem; }

/**Tooltips on bottom images**/
figure {
	position: relative;
	cursor: pointer;
}
div[role='tooltip2'] {
	position: relative;
	z-index: 1;
}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: rgba(0,0,0,0.4);
	text-align: center;
	display: none;
	color:#FFF;
}
figcaption h4 {
	margin-top: 25%;
	font-size: 2.5rem;
}
</style>
</head>
<body>
<header class="jumbotron">
<div class="container text-center rounded">
<div class="float-left"> <img class="rounded-circle img-fluid" src="https://dummyimage.com/400x350" alt="logo"> </div>
<h1 class="display-3">Hello, world!</h1>

<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p class="float-right"><a class="btn btn-light btn-lg" href="#" role="button">Learn more &raquo;</a></p>
<div class="clearfix"></div>
</div>
</header>

<!--responsive navbar-->
<nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center sticky-top"> <a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resum&eacute;</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<main class="container-fluid">
<div class="col-sm-11 mx-auto">
<h3>Equal Height Cards </h3>
<div class="row row-eq-height"> 

<!--BEGIN 3 COLUMNS & CARDS-->
<div class="col-sm-7 col-lg-6 py-2">
<div class="card h-100 bg-light text-dark">
<div class="card-body">
<form>
<div class="form-group">
<label for="Name1">Name:</label>
<input type="text" class="form-control" id="Name1" placeholder="First &amp; Last" required>
</div>
<div class="form-group">
<label for="Email1">E-mail:</label>
<input type="email" class="form-control" id="Email1" placeholder="you@domain.com" required>
<small id="Email1Help" class="form-text text-muted">We'll never share your e-mail with anyone.</small> </div>
<div class="form-group">
<label for="Phone1">Phone: </label>
<input type="tel" class="form-control" id="Phone1" placeholder="123-456-7890" >
</div>

<div class="form-group">
<label for="OptionList1">Select one: </label>
<select id="OptionList1" required class="form-control">
<option value="1" selected="selected">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4">Item4</option>
</select>
</div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!--/card-body--></div>
<!--/card--></div>
<!--/col--></div>
<div class="col-sm-5 col-lg-4 py-2">
<div class="card h-100 bg-dark text-light">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit</p>
<a href="#" class="btn btn-danger">MORE +</a> 
<!--/card-body--></div>
<!--/card--></div>
<!--/col--></div>
<div class="col-md-12 col-lg-2 py-2">
<div class="card h-100 bg-danger text-light">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-light">MORE +</a> 
<!--/card-body--></div>
<!--/card--></div>
<!--/col--></div>
<!--/row--></div>
</div>

<!--one column-->
<div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 rounded mx-auto text-center p-5">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
</div>
</div>
</main>

<!-- 2 columns small, 4 columns large-->
<div class="container">
<div class="row text-center">
<div class="col-sm-6 col-lg-3">
<figure> <img class="img-thumbnail rounded-circle" src="https://placeimg.com/300/300/nature" alt="placeholder">
<figcaption class="rounded-circle">
<h4>Heading</h4>
<p>Some text</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-3">
<figure><img class="img-thumbnail rounded-circle" src="https://placeimg.com/300/300/arch" alt="placeholder">
<figcaption class="rounded-circle">
<h4>Heading</h4>
<p>Some text</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-3">
<figure> <img class="img-thumbnail rounded-circle" src="https://placeimg.com/300/300/tech" alt="placeholder">
<figcaption class="rounded-circle">
<h4>Heading</h4>
<p>Some text</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-3">
<figure> <img class="img-thumbnail rounded-circle" src="https://placeimg.com/300/300/people" alt="placeholder">
<figcaption class="rounded-circle">
<h4>Heading</h4>
<p>Some text</p>
</figcaption>
</figure>
</div>
</div>
</div>
<!--footer-->
<footer class="container-fluid bg-dark">
<div class="row">
<div class="col text-center text-light">
<p>&copy; Company Name 2020</p>
</div>
</div>
</footer>

<!--latest jQuery Core--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--Popper JS--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
<!--latest Bootstrap 4.4.1 JS--> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

<script>
//Invoke tooltips on page load-->
$(document).ready(function() {       
  $("[rel='tooltip2']").tooltip();    
  $('figure').hover(function(){        
  $(this).find('figcaption').fadeIn('slow');   
    },       
    function(){$(this).find('figcaption').fadeOut('fast');    
    });   
});  
</script>
</body>
</html>
Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines