HTML Submit button opens outlook web app not desktop app
I am VERY new to HTML. I have written a few things for offline websites for shared drive navigation, but I am trying my hand at offline form building.
I found a beautiful design on w3schools.com which I have adapted to fit what I need, more or less.
I have two queries mainly.
1 - How do I resize and re-position the form so it fits inside a dedicated window on the page?
2 - The submit button
The problem I am having, is that when the submit button is clicked it opens up the outlook web application instead of the Microsoft Office Desktop App I and the rest of the organisation have installed on their machines.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<h3>Contact Form</h3>
<div class="container">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>```
Hi there,
I'm just following up on some of the old questions on the site.
I believe that mailto opens up the default mail client defined by the user in their system preferences. If the user has not selected outlook, then you can't really change that.
Regarding the styling, it would depend on the other elements that you have, but what you could do is use a template from Tails for example:
Best,
Bobby