We help IT Professionals succeed at work.

Add a phone number to this form

Computer Guy
Computer Guy asked
on
Hi,

Based on this HTML - if I want to add a hard coded phone number to show directly above the phone line

See HTML:

http://codepen.io/jamesbarnett/pen/kdcCL
Comment
Watch Question

Distinguished Expert 2019

Commented:
Simply add the phone number you want right after the phone : 12345678 in the HTML section.

Author

Commented:
Hi,

I'm sorry. I meant this for the the title area.
Distinguished Expert 2019

Commented:
I am uncertain I understand what it is you want.

Author

Commented:
I want to have text directly above the title and printed name right above,signature

Author

Commented:
Any ideas?
Distinguished Expert 2019

Commented:
Not sure what or how you are meaning.
you can look at the example: using codegen.io
<div>
  <span class="Signature_name">FirstName Lastname</span> 
  <span class="Title_name"> President</span>
</div>

<div> 
  <span class = "completed-by">Form completed by:</span>
  <span class ="signature">Signature</span>    
  <span class ="title">Title</span>
  <span class ="phone">Phone: <span class = "line"></span></span> 
  <span class ="date">Date: <span class = "line"></span></span> 
</div>

Open in new window

div {margin: 25px; }
.Signature_name { 
margin: 50px 150px;
}
div { margin: 10px; }

/* signature & title part */
.completed-by, .signature, .title  { float: left; }
.signature, .title { 
  margin: 20px 10px;
  border-top: 1px solid #000;
  width: 200px; 
  text-align: center;
}

/* phone & date part */
 .date > .line, .phone > .line {
  display: inline-block;
  border-bottom: 1px solid #000;
  width: 100px; 
}

Open in new window


But using two divs to position one a top the other.
reducing the second div's margin gets the space between the name and the line....

Not sure why you are trying to use D/HTML for this where getting info and possibly outputing the complete form using PDF ..........

Author

Commented:
I am outputting to PDF.
Distinguished Expert 2019

Commented:
You are doing a HTML to PDF versus creating the document as you want it in PDF?
Not sure why not placed the name instead of the signature.

I think you would need to layer div to position one in the same space (over) as another.

Author

Commented:
This is for a premade form that is going to be printed as a PDF.

I played with this code, and can't get it right. I want to get the Name and Date automatically centered above the lines without having to manipulate it.

div {margin: 40px; }
.Signature_name { 
margin: 100px 50px;
}
div { margin: 10px; }

/* signature & title part */
.signature, .title  { float: left; }
.signature, .title { 
  margin: -10px 10px;
  border-top: 1px solid #000;
  width: 350px; 
  text-align: center;
}

.Title_name {
	margin: 200px 50px;
}

Open in new window


<div>
  <span class="Signature_name">FirstName Lastname</span> 
  <span class="Title_name">Date</span>
</div>

<div> 
  <span class ="signature">Signed</span>    
  <span class ="title">Title</span>
</div>

Open in new window

Distinguished Expert 2019

Commented:
you are mixing title/date and I am not sure what it is you are looking for.

Use the codepen.io and adjust the margin/width on the CSS side to shift the items around.

What are you using to process the data a user enters? You seem to focus on rendering the data in an HTML format which will then be printed through the browser using a PDF printer?
A more direct approach to have the submitted form available as a PDF document for download.
I realize it might require additional steps/pdf formatting to get the data you want in the layout you want.

IMHO, though, this will give you a more direct control over the formating of the PDF without regard to the resolution/browser window size of the user viewing/accessing it.

Given the CSS uses fixed lenghts (pixels) the resolution and browser size will/could .... cause display issues/formatting.

Author

Commented:
Sorry for the confusion.

There are 2 fields Signature and date

I want the firstname lastname above the signature line and the word date above the title line

Author

Commented:
I tried to figure it out and couldn't.
Distinguished Expert 2019
Commented:
The CSS
div {margin: 20px; }
.Signature_name { 
margin: 50px 80px;
}
div { margin: 10px; }

/* signature & title part */
.signature, .title  { float: left; }
.signature, .title { 
  margin: 10px 10px;
  border-top: 1px solid #000;
  width: 350px; 
  text-align: center;
}

.Title_name {
	margin: 200px 530px;
}

                

Open in new window


Your issue is that you are binding the siganture_name and the date into a single DIV, if you want to manipulate each parameter individually, they have to be in separate div sections.