Highlighted

Abobe Muse Forms Page to HTML and Opened in Dreamweaver

Contributor ,
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

677

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

Abobe Muse Forms Page to HTML and Opened in Dreamweaver

Contributor ,
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

678

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
Mar 27, 2020 0
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Mar 27, 2020 1
Adobe Community Professional ,
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.


Ben

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
Reply
Loading...
Mar 27, 2020 0
Contributor ,
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
Reply
Loading...
Mar 27, 2020 0
Adobe Community Professional ,
Mar 27, 2020

Copy link to clipboard

Copied

I am sorry, but I cannot replicate the problem. 

junk.png


Ben

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
Reply
Loading...
Mar 27, 2020 1
Adobe Community Professional ,
Mar 28, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Mar 28, 2020 1