Solved

Need assistance adding form fields to web page without altering formatting

Posted on 2014-02-20
5
294 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
  • 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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now