Howto : Manual edit the webform? -...

User 131545 Photo


Registered User
687 posts

Hi support,

I want in the HTML element the CSS properties:

- height, width
- margins
- paddings

and added this html type element : "date" and "datetime-local"

This is the code:



<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Start of the headers for CoffeeCup Web Form Builder -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<script type="text/javascript" src="common/js/form_init.js" data-name=""
id="form_init_script">
</script>
<link rel="stylesheet" type="text/css" href="theme/default/css/default.css?version=110"
id="theme" />
<!-- End of the headers for CoffeeCup Web Form Builder -->
<title>
todo_list
</title>
</head>

<body><!-- Start of the body content for CoffeeCup Web Form Builder -->
<style>#docContainer .fb_cond_applied{ display:none; }</style><noscript><style>#docContainer .fb_cond_applied{ display:inline-block; }</style></noscript><form class="fb-toplabel fb-100-item-column selected-object" id="docContainer"
action="../todo_list.php" enctype="multipart/form-data" method="POST" novalidate="novalidate"
data-form="manual_iframe">
<div class="fb-form-header" id="fb-form-header1">
<a class="fb-link-logo" id="fb-link-logo1" style="max-width: 104px;" target="_blank"><img title="Alternative text" class="fb-logo" id="fb-logo1" style="width: 100%; display: none;" alt="Alternative text" src="common/images/image_default.png"/></a>
</div>
<div class="section fb-100-item-column" id="section1">
<div class="column ui-sortable" id="column1">
<div id="fb_confirm_inline" style="display: none; min-height: 200px;">
</div>
<div id="fb_error_report" style="display: none;">
</div>
<div class="fb-item fb-100-item-column" id="item1" style="opacity: 1;">
<div class="fb-header">
<h2 style="display: inline;">
To Do List
</h2>
</div>
</div>
<div class="fb-item fb-66-item-column" id="item2" style="padding-top: 0px; padding-bottom: 0px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item2_label_0" style="display: inline;">Item</label>
</div>
<div class="fb-input-box">
<input name="item" id="item2_text_1" type="text" maxlength="254" placeholder=""
data-hint="" autocomplete="off" />
</div>
</div>
<div class="fb-item fb-33-item-column" id="item7" style="padding-top: 0px; padding-bottom: 0px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item7_label_0" style="display: inline;">Date</label>
</div>
<div class="fb-input-date">
<input name="date" class="datepicker" id="item7_date_1" type="text" data-hint=""
/>
</div>
</div>
<div class="fb-item fb-100-item-column" id="item19" style="opacity: 1;">
<div class="fb-html" style="margin:20px;">
<div id="item19_div_0" > <!-- </div>style="margin-bottom:40px; margin-top:10px;"> -->
Select a week:
<input type="week" name="week_year">
</div>
</div>
</div>
<div class="fb-item fb-100-item-column" id="item3" style="padding-top: 0px; padding-bottom: 10px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item3_label_0" style="display: inline;">Description</label>
</div>
<div class="fb-textarea">
<textarea name="description" id="item3_textarea_1" style="resize: none;"
maxlength="10000" placeholder="" data-hint=""></textarea>
</div>
</div>
<div class="fb-item fb-50-item-column" id="item17" style="padding-top: 5px; padding-right: 4px; padding-bottom: 5px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item17_label_0" style="display: inline;">Type</label>
</div>
<div class="fb-dropdown">
<select name="type_field" id="item17_select_1" required data-hint="">
<option id="item17_0_option" selected value="">
Defect
</option>
<option id="item17_1_option" value="Enhancement">
Enhancement
</option>
<option id="item17_2_option" value="Task">
Task
</option>
<option id="item17_3_option" value="Discussion">
Discussion
</option>
</select>
</div>
</div>
<div class="fb-item fb-50-item-column" id="item6" style="padding-top: 5px; padding-bottom: 5px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item6_label_0" style="display: inline;">Priority</label>
</div>
<div class="fb-dropdown">
<select name="priority_field" id="item6_select_1" data-hint="">
<option id="item6_0_option" selected value="Low">
Low
</option>
<option id="item6_1_option" value="Medium">
Medium
</option>
<option id="item6_2_option" value="High">
High
</option>
<option id="item6_3_option" value="ASAP">
ASAP
</option>
</select>
</div>
</div>
<div class="fb-item fb-50-item-column" id="item10" style="padding-top: 5px; padding-right: 4px; padding-bottom: 5px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item10_label_0" style="display: inline;">Status</label>
</div>
<div class="fb-dropdown">
<select name="status_field" id="item10_select_1" required data-hint="">
<option id="item10_0_option" selected value="">
Choose one
</option>
<option id="item10_1_option" value="Revised">
Revised
</option>
<option id="item10_2_option" value="Done">
Done
</option>
</select>
</div>
</div>
<div class="fb-item fb-50-item-column" id="item18" style="padding-top: 5px; padding-right: 4px; padding-bottom: 5px; opacity: 1;">
<div class="fb-grouplabel">
<label id="item18_label_0" style="display: inline;">Time Estimate</label>
</div>
<div class="fb-dropdown">
<select name="time_field" id="item18_select_1" required data-hint="">
<option id="item18_0_option" selected value="">
Not Applicable
</option>
<option id="item18_1_option" value="Unknown">
Unknown
</option>
<option id="item18_2_option" value="Minutes">
Minutes
</option>
<option id="item18_3_option" value="Hours">
Hours
</option>
<option id="item18_4_option" value="Days">
Days
</option>
<option id="item18_5_option" value="One Week">
One Week
</option>
<option id="item18_6_option" value="Several Weeks">
Several Weeks
</option>
<option id="item18_7_option" value="Months">
Months
</option>
</select>
</div>
</div>
</div>
</div>
<div class="fb-item-alignment-left fb-footer" id="fb-submit-button-div"
style="padding-top: 20px; min-height: 1px;">
<input class="fb-button-special" id="fb-submit-button" type="submit" data-regular=""
value="Submit" />
</div>
<input name="fb_form_custom_html" type="hidden" />
<input name="fb_form_embedded" type="hidden" />
<input name="fb_js_enable" id="fb_js_enable" type="hidden" />
<input name="fb_url_embedded" id="fb_url_embedded" type="hidden" />
</form>
<!-- End of the body content for CoffeeCup Web Form Builder -->
</body>
</html>


I will edit this code:



<div class="fb-item fb-100-item-column" id="item19" style="opacity: 1;">
<div class="fb-html" style="margin:20px;">
<div id="item19_div_0" style="margin-bottom:40px; margin-top:10px;">
Birthday (date and time):
<input type="datetime-local" name="bdaytime">

</div>
</div>
</div>

<div class="fb-html" style="margin:20px;">
<div id="item19_div_1" style="margin-bottom:40px; margin-top:10px;">
Birthday:
<input type="date" name="bday">

</div>
</div>
</div>


1) I want see the text caption not on the left side but on the top side
2) how can I adjust the CSS properties : height, width, margin, padding in each HTML5 Form Element editing?
3) What are the steps and then sent to the server for display the changes

Kind regards
Stephane




Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Not sure what you mean by
'I want in the HTML element the CSS properties:'

Does it mean you want inline css? That shouldn't actually be necessary. When you create a form in the Form Builder, you create it visually, you place the fields where you want them. The labels can be placed left, right or on top within the programme. And when you export the form, the css is created in accordance with the margins, widths, colours etc that you have chosen.
By just reading your html code, we are no able to 'visualize' what you want the form to look like. It would be better if you posted your .fb file. Then we may be able to help you with changes/additional fields.

Regarding the second bit of code, do you really think everyone knows at what time of day they were born? ;)

Betekent het dat u wilt inline css? Dat is niet echt nodig. Wanneer u een formulier in de Form Builder te creëren, visueel maakt, geeft u de velden waar u ze wilt plaatsen. De labels kunnen worden geplaatst links, rechts of boven in het programma. En wanneer u het formulier exporteert, wordt het css gemaakt in overeenstemming met de marges, breedten, kleuren etc die u hebt gekozen.
Door gewoon het lezen van uw html-code, zijn we niet in staat om 'visualiseren' wat je wilt het formulier te lijken. Het zou beter zijn als u uw .fb bestand geplaatst. Dan kunnen we in staat om u te helpen met de veranderingen / extra velden.

Met betrekking tot de tweede stukje code, denk je echt dat iedereen weet op welk moment van de dag dat ze werden geboren? ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 1605411 Photo


Registered User
5 posts

Inger, just to put my two cents worth in (in fact and humor) , don't know about other countries but American birth certificates will show the time and date you were born. First thing the birthing nurse does when the baby is born, to look at the clock and verbally call out the time. The charting nurse will write down this time, in a small facility the birthing nurse will do both.
Life's journey is not to arrive at the grave safely in a well preserved body,
But rather to skid in sideways, totally used up and worn out,
Shouting '... MAN, WHAT A RIDE !'
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

It's the same here in Norway, and I guess in most places in the 'western' world. But I have been to countries where the most frequent birth date is January 1st, maybe also the 1st of another month. That is not because the people were actually born on that date, but it is the easiest for the father/grandfather/uncle/neighbour to remember when he makes his annual (or bi-annual) trip from his remote village into the next city's registration office. Heck, in many cases they don't even know the year they were born in...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 10077 Photo


Senior Advisor
1,095 posts

Stefke, Just design the form in Form Designer and use Web Form Builder for the processor. Form Designer will let you create a form with all kinds of CSS settings that you might want to use.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including training for Site Designer and Web Form Builder via Zoom.
Email me at support@usconsumernet.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.