PHP Form Dropdown Has Default Font Instead Of Embedded Font?

Report · Aug 25, 2021

So I have a contact.php with a form area that contains a drop down, using an embedded font (Fig. 1 below).

Everything displays fine, except, on the dropdown menu items area the font defaults to a sans-serif instead of the embedded font (Fig. 2 below).

Is there are way to force the dropdown menu items to be shown in the embedded font, just like the front facing part of the form does?

1. contact.php with embedded fonts displayed fine.

Screen Shot 2021-08-25 at 12.51.01.png

2. contact.php drop down menu item defaulting to san-serif font.

Screen Shot 2021-08-25 at 12.50.45.png

Report · Aug 25, 2021

Can we see your html and css?
I suspect that your css doesn't define a font for the <select> tag.

Report · Aug 25, 2021

I'm not at my machine right now, but I have select and option as well as other IDs, classes, etc., all listed on the same CSS line, pointing to the same font.

Which is why it works on every other part of the form.

But as soon as I get the chance I'll post the code, maybe there's something else wrong that other will be able to see.

Report · Aug 25, 2021

I don't think you can specify a specific font within a default <select></select> form. You would have to build a custom drop-down menu using javascript.

Report · Aug 25, 2021

I went to https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_form and added this code

<head>
<style>
select{
font-family: times;
}
</style>
</head>

and re ran it and it altered the font.

Report · Aug 25, 2021

btw, the font does seem to work correctly in Chrome, for me, but not in Firefox.

Report · Aug 25, 2021

btw, the font does seem to work correctly in Chrome, for me, but not in Firefox.

By wake6

Yes, the styling of certain form aspects with css, like 'select', 'option' is limited and not hugely stable in all browsers, they treat them differently. You can get better looking styling by creating your own dropdowns but this requires some coding knowledge.

Report · Aug 25, 2021

Yeah, more and more I'm realizing that creating a drop down on javascript is the way I'm going ti have to go, to get the more concise uniformity I'm looking for.

My only question now is, can I build onto this preexisting php form, with ecerything in place as it is, and add the javascript drop downs (there are two drop downs on this form) to the preexisting php page and form?

Report · Aug 25, 2021

My only question now is, can I build onto this preexisting php form, with ecerything in place as it is, and add the javascript drop downs (there are two drop downs on this form) to the preexisting php page and form?

By PleaseWork1978

Yes, just add a hidden form field and populate it's value with whatever option the user chooses from the javascript dropdown and then collect that value from the hidden form field as you normally would using php.

If you're around tomorrow I'll post an example.

Report · Aug 26, 2021

Okay, so update, it seems to be displaying now as expected, with the embedded font, in Safari and Firefox (Fig. 1 below). I think it was the .select-items class I added to the CSS that got it to display finally (fig. 3 below).

But Chrome is a problem still (fig. 2 below). Even after adding:

-webkit-appearance: none;
appearance: none;

…to the CSS (fig. 3 below).

1. Safari and Firefox displays the font now!

Screen Shot 2021-08-26 at 08.59.14.png Screen Shot 2021-08-26 at 08.43.56.png

2. Chrome is still not recognizing the font?

Screen Shot 2021-08-26 at 08.45.53.png

3. The current CSS

Screen Shot 2021-08-26 at 10.30.18.png

Report · Aug 25, 2021

Have you tried advanced CSS form stylying with appearance:none?

https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling

I find it interesting that Firefox now supports the vendor prefix for -webkit. I guess if you can't beat 'em, join 'em. 🙂

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 26, 2021

I placed it, but I must be missing something else, because it’s still failing to show with the correct font in Chrome.

It’s working great now in Safari and Firefox though.

Screenshot posted in the above reponse btw.

Report · Aug 26, 2021

It is working in Chrome on Windows:

Report · Aug 26, 2021

Whoa, that’s awesome.

It’s so ridiculous that Chrome is being so stubborn on mac. 🤔

Which reminds me, I need to get Chrome and Explorer on crossover to test for PC users.

But thanks for letting me know.

Report · Aug 26, 2021

I'm not sure the below code will help much but you can have a play around with it. I don't advise using that Virtual DJ typeface, its pretty ugly and unreadable so I've swapped it for a more readable font but you can always swap it back if really want to use it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Customised Form Select List</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400&display=swap" rel="stylesheet"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: 'Roboto Slab', serif;
font-size: 16px;
}
.formSelect {
width: 60%;
margin: 0 auto;
}
.formSelect h2 {
font-size: 30px;
font-weight: 400;
text-align: center;
margin: 0 0 15px 0;
padding: 0;
}
.formSelect h3 {
font-size: 22px;
font-weight: 400;
text-align: center;
margin: 0;
padding: 0;
}
.formSelect h4 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
box-sizing: border-box;
margin: 25px 0 0 0;
padding: 0;
background-color: #f2f2f2;
border: 1px solid #ccc;
color: #000;
padding: 10px 15px;
font-weight: 400;
cursor: pointer;
}
.formSelect ul {
margin: 0 0 20px 0;
padding: 0;
border: 1px solid #ccc;
box-sizing: border-box;
display: none;
}
.formSelect li {
box-sizing: border-box;
line-height: 22px;
margin: 0;
padding: 10px 15px;
list-style: none;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.formSelect li:hover {
background-color: #007bff;
color: #fff;
}
.formSelect li:last-child {
border-bottom: none;
}
.formSelect .label {
display: block;
margin: 25px 0 0 0;
}
.formSelect input {
font-size: 16px;
padding: 10px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
font-family: 'Roboto Slab', serif;
}
textarea.projectBudget {
width: 100%;
border: 1px solid #ccc;
min-height: 200px;
font-size: 16px;
box-sizing: border-box;
padding: 15px;
font-family: 'Roboto Slab', serif;
}
.show {
display: block!important;
}
.showOptions span {
display: flex;
justify-content: center;
align-items: center;
background-color: #007bff;
color: #fff;
width: 22px;
height: 22px;
border-radius: 4px;
}
.showOptions span i {
font-size: 18px;
}
.hideOptions {
display: none;
margin-left: auto;
background-color: #000;
color: #fff;
border: none;
padding: 3px 10px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.chosenOption {
box-sizing: border-box;
display: none;
width: 100%;
}
.submit {
background-color: #f2f2f2;
color: #000;
border: 0;
padding: 10px 15px;
margin: 25px 0 0 0;
width: 100px!important;
border-radius: 5px;
}
.formGroup {
display: flex;
justify-content: space-between;
}
.formGroup label {
width: 48%;
}
</style>
</head>
<body>

<div class="formSelect">
<h2>Let's Work Together</h2>
<h3>Start a project, schedule a chat or just say hello</h3>
	
<form name="feedbackForm" method="post" action="" class="feedbackForm">

<h4 class="showOptions">How can Solar Ink help you?<span><i class="fa fa-angle-down"></i></span></h4>
<ul class="optionsList">
<li>Start a design project</li>
<li>Start a production project</li>
<li>Schedule a chat via messaging, phone, facetime, or skype</li>
<li>Inquire about employing me within your organisation</li>
<li>General inquires</li>

</ul>
<label for="chosenOption" class="chosenOption">
<input type="text" class="chosenOptionInput" name="chosenOption" id="chosenOption" readonly>
</label>

<label for="name" class="label">Name<br>
<input type="text" class="name" name="name" id="name">
</label>

<div class="formGroup">
	
<label for="emailAddress" class="label">Email Address<br>
<input type="text" class="emailAddress" name="emailAddress" id="emailAddress">
</label>

<label for="phoneNumber" class="label">Phone Number<br>
<input type="text" class="phoneNumber" name="phoneNumber" id="phoneNumber">
</label>

</div>
<!-- end formGroup -->

<div class="formGroup">
	
<label for="location" class="label">Location<br>
<input type="text" class="location" name="location" id="location">
</label>

<label for="searchEngine" class="label">Search Engine<br>
<input type="text" class="searchEngine" name="searchEngine" id="searchEngine">
</label>

</div>
<!-- end formGroup -->

<label for="projectBudget" class="label">Tell me a bit about your project, timeline and budget<br>
<textarea class="projectBudget"></textarea>
</label>
<input type="submit" class="submit" value="Submit">
</form>
</div>

<script>
const showOptions = document.querySelectorAll('.showOptions');
const optionsList = document.querySelectorAll('.optionsList');
const options = document.querySelectorAll('.optionsList li');
const chosenOption = document.querySelectorAll('.chosenOption');
let indexCount;

showOptions.forEach(function(showOptions, index) {
showOptions.onclick = function() {
optionsList.forEach(function(optionsList) {
optionsList.classList.remove('show')
});
indexCount = index;
this.nextElementSibling.classList.toggle('show');	
}
})
options.forEach(function(option) {
option.onclick = function() {
const chosenOptionInput = document.querySelectorAll('.chosenOptionInput');
optionsList.forEach(function(optionsList) {
optionsList.classList.remove('show');
})
let selectedOption = option.innerText;
chosenOptionInput[indexCount].value = selectedOption;
chosenOption[indexCount].classList.add('show');
}
});
</script>
</body>
</html>

Report · Aug 26, 2021

Whoa this looks great, I haven’t tested it yet though.

My initial concern is whether I can get the current PHP script to work with this, because my original PHP page builds the form with <select> <option> tags.

But I’l try to check on this when I get the chance.

Thanks so much.

The fonts I’m not too worried about right now, I’m just trying to get it to function correctly. But thanks for the input. Ha. I don’t know, virtual DJ has character. I guess when I get the chance I’ll run it by some folks and see how they feel.

Cheers.

Report · Aug 26, 2021

My initial concern is whether I can get the current PHP script to work with this, because my original PHP page builds the form with <select> <option> tags.

By PleaseWork1978

If you make sure the 'name' attribute of the form inputs match with the name passed to the php $_POST[' '] in your php script then it will work. PHP looks for the form 'name' attribute and gets the value of the input.

So subject, which you have used to name YOUR <select> would be:

$subject = $_POST['chosenOption'];

OR just change the 'name' of that input field in the code to 'subject':

<input type="text" class="chosenOptionInput" name="subject" id="chosenOption" readonly>

Then you can leave the php script as it currently stands:

$subject = $_POST['subject'];

Do the same for the other form input 'names'.

Report · Aug 26, 2021

Oh awesome, nice.

I'll look over this when I get the chance.

But it seems like this might just get Chrome to behave appropriately.

Post soon.

Report · Aug 31, 2021

Sorry I haven’t gotten back to this.

I’ve been working on converting the site from static to responsive.

Once I’ve sorted that out, I’ll come back to this Chrome issue.

Then I’m all but certain this will most likely be marked the right answer.

Report · Aug 26, 2021

Just for reference, here are the php page and the php script that helps it function.

Will follow up hopefully before the weekend.

1. PHP page.

<div id="contact_swf">
</div>

<div id="contactFormWrap" >
<h4 id="subtitle" >LE<span id="apostrophy">T'</span>S WORK TOGETHER</h4>
<h5 id="subtitle" >START A PROJEC<span id="apostrophy">T,</span> SCHEDULE A CHA<span id="apostrophy">T,</span> OR JUST SAY HELLO</h5>
<br>

<form id="formstyle" class="contact-form" action="contactForm.php" method="post">

<div class="box1">
<select onchange="this.className = 'blackText'" type="text" name="subject" >
<option value='How can Solar Ink help you?' selected="true" disabled="disabled" >How can Solar Ink help you?</option>
<option value='Start a design project' >Start a design project</option>
<option value='Start a production project' >Start a production project</option>
<option value='Schedule a chat via messaging, phone, facetime, or skype' >Schedule a chat via messaging, phone, facetime, or skype</option>
<option value='Inquire about employing me within your organization' >Inquire about employing me within your organization</option>
<option value='General inquiries' >General inquiries</option>
</select>

</div>
<input type="text" name="name" placeholder="Full name" >&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="company" placeholder="Company or organization" ><br>
<input type="text" name="email" placeholder="Email address" >&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="phone" placeholder="Phone number" ><br>
<input type="text" name="location" placeholder="Location" >&nbsp;&nbsp;&nbsp;&nbsp;



<div class="box2" >
<select onchange="this.className = 'blackText'" type="text" name="input_7">
<option value='How did you hear about Solar Ink?' selected="true" disabled="disabled">How did you hear about Solar Ink?</option>
<option value='Social Media' >Social Media</option>
<option value='Search Engine' >Search Engine</option>
<option value='Referrals / Recommendations' >Referrals / Recommendations</option>
<option value='Others' >Others</option>
</select>
</div>
<textarea name="message" placeholder="Tell me a bit about your project, timeline, and budget" rows=10 cols=50></textarea> <br>

<button id="submit" type="submit" name="submit" autocomplete="off" value="Send Request">SEND</button>

</form>



</div>

2. PHP script.

<?php

if (isset($_POST['submit'])){

$subject = $_POST['subject'];
$name = $_POST['name'];
$company = $_POST['company'];
$emailFrom = $_POST['email'];
$phone = $_POST['phone'];
$location = $_POST['location'];
$input7 = $_POST['input_7'];
$message = $_POST['message'];

$mailTo = "email removed by moderator";

$headers = "From: ".$emailFrom;
$txt = "You have received a message from ".$name.".\n\n"
."Company: ".$company.".\n\n"
."Phone ".$phone.".\n\n"
."Located in ".$location.".\n\n"
."Heard about Solar Ink from ".$input7
.".\n\n".$message;


mail($mailTo, $subject, $txt, $headers);
header("Location: contact.php?mailsend");


}


?>

Report · Aug 31, 2021

FYI, that PHP script is vulnerable. It's not secure and it contains no form field validation or data sanitizing. This makes your form easy to exploit by would-be hackers. I wouldn't use it.

PHP Mailer is the form sending library recommended by most hosting providers.
https://github.com/PHPMailer/PHPMailer
Wufoo.com and Jotform.com are 3rd party services.

Nancy O'Shea— Product User, Community Expert & Moderator

PHP Form Dropdown Has Default Font Instead Of Embedded Font?

Photos