Add a phone number to this form

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
LVL 3
Computer GuyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

arnoldCommented:
Simply add the phone number you want right after the phone : 12345678 in the HTML section.
0
Computer GuyAuthor Commented:
Hi,

I'm sorry. I meant this for the the title area.
0
arnoldCommented:
I am uncertain I understand what it is you want.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Computer GuyAuthor Commented:
I want to have text directly above the title and printed name right above,signature
0
Computer GuyAuthor Commented:
Any ideas?
0
arnoldCommented:
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 ..........
0
Computer GuyAuthor Commented:
I am outputting to PDF.
0
arnoldCommented:
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.
0
Computer GuyAuthor 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

0
arnoldCommented:
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.
0
Computer GuyAuthor 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
0
Computer GuyAuthor Commented:
I tried to figure it out and couldn't.
0
arnoldCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.