How to get the HTML and CSS of the form - html

Question

I've seen a page here:
https://thrivecompany.le-vel.com/Login?ReturnUrl=%2fAccount
Now I want to copy the exact HTML + CSS of it entirely of the registration part.
How do I do that? Can you also pull it up for me and paste it here if it's possible?
thanks!
Is there a way guys you can pull it out here or paste on JSFIDDLE?

Answer 1

Control + Shift + J on google chrome will open up the developer window. Go to the Element tab and you will be able to see the entire HTML+CSS. Try by your self so that you will also be able to learn, debug and play with CSS inline.

Answer 2

Basic Implementation (without To much styling)
https://jsfiddle.net/ashwinshenoy/vmubcaq6/1/\
<div class="content-block">
<h3><span class="icon16 profile"></span>Create New Customer Account</h3>
<form action="/Login/CreateAccount" id="CreateAccountForm" method="post">
<input name="__RequestVerificationToken" type="hidden" value="86bIeUrxTBQdZS06SchMTRYnReJ5oRfLYtSgGdAcw637GrhUoaAUdwv6AE1NCQyEe3pZim2SjMvoDkEmKleviECcJT3HACv9GzOvZtH_GVg1">
<div class="content-block">
<div class="FormRow">
<strong>Please confirm your referring Promoter:</strong>
</div>
<div class="FormRow">
<label class="auto">
<input checked="checked" data-val="true" data-val-booleanrequired="You Must Confirm Your Retailer" data-val-required="You Must Confirm Your Retailer" id="ConfirmRetailer" name="ConfirmRetailer" type="radio" value="True">
<span class="field-validation-valid" data-valmsg-for="ConfirmRetailer" data-valmsg-replace="true"></span> I was referred by <strong>Nicole Anderson (thrivecompany)</strong>
</label>
</div>
<div class="FormRow">
<label class="auto">
<input id="ConfirmRetailer" name="ConfirmRetailer" type="radio" value="False"> I was referred by someone else
</label>
</div>
<div id="CreateAccount_ChangeReferralForm" class="center" style="display: none;">
<div class="FormRow">
<strong>http://
<input data-val="true" data-val-regex="Invalid Characters" data-val-regex-pattern="(?!^\d+$)^[a-zA-Z0-9_]{3,15}$" data-val-remote="That Username does not exist" data-val-remote-additionalfields="*.ChangeUsername" data-val-remote-url="/JSON/CheckUsernameExists" id="ChangeUsername" name="ChangeUsername" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="ChangeUsername" data-valmsg-replace="true"></span>
.le-vel.com</strong>
</div>
<div class="FormRow">
<a class="Button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="ChangeReferralButton" href="/Login/ClearReferral" role="button" aria-disabled="false"><span class="ui-button-text">Update My Referrer</span></a>
</div>
</div>
</div>
<div id="CreateAccount_MainForm" style="display: block;">
<div class="FormRow">
<label>Country:</label>
<select id="ShipCountry" name="ShipCountry">
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="NZ">New Zealand</option>
<option selected="selected" value="US">United States</option>
</select>
<span class="field-validation-valid" data-valmsg-for="ShipCountry" data-valmsg-replace="true"></span>
</div>
<div class="FormRow">
<label>First Name:</label>
<input data-val="true" data-val-required="Please Enter Your First Name" id="FirstName" name="FirstName" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
</div>
<div class="FormRow">
<label>Last Name:</label>
<input data-val="true" data-val-required="Please Enter Your Last Name" id="LastName" name="LastName" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
</div>
<div class="FormRow">
<label>Email Address:</label>
<input data-val="true" data-val-email="Please Enter a Valid Email Address" data-val-remote="Your Email Address Has Been Used Already" data-val-remote-additionalfields="*.Email" data-val-remote-url="/JSON/CheckEmailAvailable" data-val-required="An Email Address is Required"
id="Email" name="Email" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
<div class="FormRow">
<label>Choose Username:</label>
<input data-val="true" data-val-length="Must Be 5 to 15 Characaters" data-val-length-max="15" data-val-length-min="3" data-val-regex="Invalid Characters" data-val-regex-pattern="(?!^\d+$)^[a-zA-Z0-9_]{3,15}$" data-val-remote="Username Already Taken" data-val-remote-additionalfields="*.UserName"
data-val-remote-url="/JSON/CheckUsernameAvailable" data-val-required="A Username is Required" id="UserName" name="UserName" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
</div>
<div class="FormRow">
<label>Password:</label>
<input data-val="true" data-val-length="Minimum 6 Characters" data-val-length-max="25" data-val-length-min="6" data-val-required="A Password is Required" id="Password" name="Password" type="password">
<span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>
<div class="FormRow">
<label>Confirm Password:</label>
<input data-val="true" data-val-equalto="Passwords Don't Match" data-val-equalto-other="*.Password" data-val-required="Please Confirm Your Password" id="PasswordConfirm" name="PasswordConfirm" type="password">
<span class="field-validation-valid" data-valmsg-for="PasswordConfirm" data-valmsg-replace="true"></span>
</div>
<div class="FormRow">
<label></label>
<button type="submit" id="CustomerLoginButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Create Customer Account</span></button>
</div>
<input type="hidden" name="returnUrl">
</div>
</form>
</div>

Answer 3

This is what I get. Try the code below and have fun.
<div class="content-block">
<h3><span class="icon16 profile"></span>Create New Customer Account</h3>
<form action="/Login/CreateAccount" id="CreateAccountForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="4FW5wggFH2JRvjlOtLdoLf-myfT3aJ0xz8I_NYrsf2RZvufijY9M__XhgrGDrNExAtpRe3nVzBG3ErIuHVScfnNUGTUlsvWHHGJE_cz2uiI1"> <div class="content-block">
<div class="FormRow">
<strong>Please confirm your referring Promoter:</strong>
</div>
<div class="FormRow">
<label class="auto">
<input checked="checked" data-val="true" data-val-booleanrequired="You Must Confirm Your Retailer" data-val-required="You Must Confirm Your Retailer" id="ConfirmRetailer" name="ConfirmRetailer" type="radio" value="True">
<span class="field-validation-valid" data-valmsg-for="ConfirmRetailer" data-valmsg-replace="true"></span>
I was referred by <strong>Nicole Anderson (thrivecompany)</strong>
</label>
</div>
<div class="FormRow">
And this is the link of the CSS

Answer 4

You can inspect it on Google Chrome with F12 key to see what form is and what CSS is asociated with it. You can also download the code of the webpage if you right click on the webpage and press "Save As...". It will be stored in your computer a folder with all the CSS, JS, HTML, resources, etc that the webpage has.