?
Solved

Need assistance adding form fields to web page without altering formatting

Posted on 2014-02-20
5
Medium Priority
?
300 Views
Last Modified: 2014-02-25
I am attempting to help a friend add the proper form function to a snippet of code he likes from a similar web site he is working with.

The following is exactly how he wants the final look to be. We just need to replace the form submission and field information (below this snippet):


<div id="optin_area" class="full_width">
		<div class="page">
			<h3>Sign up now to start living the life you’ve dreamed about!</h3>

			<div class="moonray_forms moonray_smart_form">
<form action="https://forms.moon-ray.com/v2.4/form_processor.php?" id="moonray_forms_574" method="post" data-captcha="false">


<fieldset class="moonray_form_format_labels_inside">
<!-- EDITABLE PARTS BELOW -->
<div class="moonray_form_field_wrapper"><input name="firstname" value="First Name" label="First Name" class="moonray_input required text" size="30" onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" type="text"></div><div class="moonray_form_field_wrapper"><input name="email" value="E-Mail" label="E-Mail" class="moonray_input required text" size="30" onfocus="if (this.value == 'E-mail') {this.value = '';}" type="text"></div>

</fieldset>
<input class="optin_submit" value="Get It!" type="submit">
<!-- EDITABLE ENDS (DO NOT EDIT CONTENTS BELOW)-->
</form>
 <link rel="stylesheet" href="http://ginalamorte.raymondnorton.com/wp-content/themes/tempest/mf.css" type="text/css" media="all" />
    

 <link rel="stylesheet" href="http://ginalamorte.raymondnorton.com/wp-content/themes/tempest/forms.moon-ray.com.css" type="text/css" media="all" />

</div>

Open in new window

---------------------------------------------------------------
Form info to insert:

<form accept-charset="UTF-8" action="https://ex168.infusionsoft.com/app/form/process/6d64954beaead7c599b222d9e8391408" class="infusion-form" method="POST">
    <input name="inf_form_xid" type="hidden" value="6d64954beaead7c599b222d9e8391408" />
    <input name="inf_form_name" type="hidden" value="webform" />
    <input name="infusionsoft_version" type="hidden" value="1.29.10.21" />
    <div class="infusion-field">
        <label for="inf_field_FirstName">First Name *</label>
        <input class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" class="infusion-field">
        <label for="inf_field_Email">Email *</label>
        <input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="text" class="infusion-submit">
        <input type="submit" value="Submit" />
    </div>
</form>

Open in new window

0
Comment
Question by:tamray_tech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39875082
If the form is hosted on the other site, you need to copy the styles too.  Otherwise the formatting won't work.  

Please note that, at best, this is plagiarism.  At worst you could be in violation of a copyright and subject to legal action.
0
 

Author Comment

by:tamray_tech
ID: 39875095
No problem using code from scratch. Just want to achieve that look with the form data supplied.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39875108
Without any CSS we can't "see" the styles.  If you know how to use CSS and can reference the other form as you need to, this isn't tough to do.  

If you don't know CSS, you have some issues.
0
 

Accepted Solution

by:
tamray_tech earned 0 total points
ID: 39875134
I do have the css to reference, but Just got a message from my friend that he has an html instructor wiling to help him. Will delete question for now.
0
 

Author Closing Comment

by:tamray_tech
ID: 39885123
No longer need a solution to this question
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question