Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Need assistance adding form fields to web page without altering formatting

Posted on 2014-02-20
5
Medium Priority
?
303 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

575 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