Hi, we are using this to replace the FILLOUT app that we had initially.
The two tools are quite comparable, except the results email that FILLOUT sends when a user fills out the form has the data much more clearly displayed:
TIA.
2 Likes
Hi there, @user28501 and welcome to the Community 
Unfortunately, it’s impossible to add a button to the form emails, but we can customize the design of the form fields like in your screenshot.
If you’d like to implement this customization, please let us know the colors and font size you’d like to use there 
1 Like
Hi Max, thx for the reply. I don’t mind about the button, and also not fussed about the exact fonts / colours etc, just if it can be setout more clearly more like the example? That woud be brilliant.
Also, please clarify - would this then be some CSS that you give me, so that we can use it again for others forms as we need?
Or how would this customisation work for future forms?
TIA.
1 Like
Hi there, @user2665
It will be the HTML code, which will be added to the Message Field through the Code Editor mode in the Notify Me section on the Email tab:
I’ve passed your request on to the dev team and will update you once the solution is ready
Here is a code that should be added through the Code Editor mode in the Message field of the Notify Me section on the Email tab:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
font-family: Arial, sans-serif;
max-width: 600px;
color: black;
background-color: #e6f0f7;
border-radius: 12px;
padding: 20px;
margin: 0 auto;
}
.title {
text-align: center;
}
.subtitle {
color: gray;
padding-left: 20px;
}
.section-wrapper {
background-color: #fff;
border-radius: 12px;
padding: 20px 30px;
margin-bottom: 20px;
}
.section-wrapper h4 {
margin-top: 0;
margin-bottom: 8px;
}
.section-wrapper p {
color: gray;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<h2 class="title">Fillout</h2>
<div class="section-wrapper">
<h4>
You receive a new submission for your SAHBA Career Matching Event form.
</h4>
<p>Below is a copy of the response.</p>
</div>
<h3 class="subtitle">Responses</h3>
<div class="section-wrapper">
<h4>Date of Registration:</h4>
<p>[date-of-registration:]</p>
</div>
<div class="section-wrapper">
<h4>Fulll Name:</h4>
<p>[fulll-name:-*]</p>
</div>
<div class="section-wrapper">
<h4>Salon Name:</h4>
<p>[salon-name:-*]</p>
</div>
<div class="section-wrapper">
<h4>Salon Address:</h4>
<p>[salon-address:-*]</p>
</div>
<div class="section-wrapper">
<h4>Phone Number:</h4>
<p>[phone-number:-*]</p>
</div>
<div class="section-wrapper">
<h4>Email:</h4>
<p>[email:-*]</p>
</div>
<div class="section-wrapper">
<h4>Are you looking to employ a hairdresser or barber?</h4>
<p>[are-you-looking-to-employ-a-hairdresser-or-barber?]</p>
</div>
<div class="section-wrapper">
<h4>What qualities are you looking for in your apprentice?</h4>
<p>[-what-qualities-are-you-looking-for-in-your-apprentice?]</p>
</div>
<div class="section-wrapper">
<h4>When would you like to start your apprentice?</h4>
<p>[when-would-you-like-to-start-your-apprentice?]</p>
</div>
<div class="section-wrapper">
<h4>Any other questions?</h4>
<p>[[any-other-questions?]</p>
</div>
</div>
</body>
</html>
If you’d like to add new fields to the form, you should add them to the code in this format:
<div class="section-wrapper">
<h4>Email:</h4>
<p>[email:-*]</p>
</div>
If you’d like to use this style in the emails sent to your customers, just replace this text with the needed:
After that, add it through the Code Editor mode to the Message field in the Notify Respondents section on the Email tab:
Check it out and let me know if you like the result
1 Like
Hi Max,
Thanks so much for your time putting this together for us, much appreciated, however it’s not viable, because:
1:
I tested it out to be able to see your solution ‘in action’ and for future reference.. BUT as you can see in the screenshots, it’s not working the HTML is not being processed as HTML it’s just displaying the code as code in the email.
And
2:
Even if it HAD worked, we couldn’t use the solution because it requires hard coding every time we do a form.. and the clients that will be building these forms are not web designers, so they will not be able to add this coding to each form they create.
__________________
When I made the enquiry and showed the example of how much nicer the FILLLOUT form data display in the email was, I was asking if thee as a way to get that email to be better formatted by default for the whole APP, not as something we need to manually code, as this defeats the purposes of having an easy to use widget.
I can see there is not, so this is probably something I should add to the WISHLIST requests.
Thanks again,
Kirstie
1 Like
Thank you so much for such a detailed comment!
The code didn’t work because you’ve added it as a plain text. To add it as a code, you should open the Code Editor mode first, then remove the existing code and the code I’ve shared there:
Here is how the submissions look after adding the code through the Code Editor:
However, I completely understand your point and agree that it can be a pain to customize the code for each new widget.
I’ve added this idea back to the Wishlist and if it gets more votes, we’ll try to consider it in the future
Thanks SO much! I completely missed that we had a separate code view n the Message field! I though that it waa the same place for code or plain text .. I see where you mean now and I adde dit again and it’s perfect now, thx.
Fingers crossed this is considered as I am sure all you form clients would love this in comparison to the plain text email that is the currently the default.
Thanks again!
KIrstie
1 Like
No problem!
And if you need with customization of your new forms, feel free to let us know. We’ll be happy to help😊
1 Like
Hello!
Thanks for offering to so this again for us for additional forms… we do have another form please, if you could send me the code to make the email notification look attractive like you did above?
To clarify, this the for that you gave me the new code for: Elfsight
And this is the new form that we need the same styling for on the email notification: Elfsight
Thanks so much,
Kirstie
1 Like
Hi @user2665
Sure! I’ll let you know once it’s done
Hi, @user2665
We’ve added the code to your widget. Basically, it’s the same but with different field names and field ids. Please check it out and let me know if it’s fine
Fantastic! Thanks so much!
1 Like
It’s my pleasure 