Manage-to-Style-the-contact-Page | brightlivingstone.com

How did we Manage to Style the contact Page of Trendzbook.com

Contact Form is not a default thing of wordpress website. We have to choose a method which is robust in architecture to support our requirement. We tried customizing a Contact Form which can suit our requirements. This Contact form customization in your WordPress Website will have come with the default input fields with no style. Today we gonna teach How to customize a Contact form.

In the contact us page first declare the required form fields based on the requirements. Here we gonna create a Text field, number field, data field, checkboxes, radio buttons file uploading and submit button.

Step one :

Declare a Div tag and inside the div tag declare a form

Code:

<div class=”submitform”>

[text BusinessName class:business-name placeholder “Business Name*”][email your-email placeholder”Email Address*”]

[text Address placeholder “Address*”][text City placeholder “City*”]

[text Map class:Map placeholder “Map: longitude”][text Map class:Map placeholder “Map: latitude”]

[tel Mobile class:mobile placeholder”Mobile*”][url Website class:website placeholder “Website*”]

[url facebook class:facebook placeholder “Facebook”]

[url twitter class:twitter placeholder “Twitter”]

</div>

<div>

<fieldset class=”-fieldset”>

<legend>TELL US MORE</legend>

<div class=”submitform typefieldset”>

<span class=”dirtyp”>Type of Business</span>

[radio typeofbusiness class:typeofbusiness use_label_element default:1 “Salon” “Freelance Artist” “Wedding Planner” “Photography” “Boutiques” “Jewellers”]

<span class=”dirser”>Services</span>

[checkbox services class:services use_label_element “Make up” “Hair” “Manicure/Pedicure” “Massage” “Facials” “Tanning” “Waxing” “Henna” “Video” “Photography” “Gold” “Handcrafted”]

</div>

<div class=”submitform typefieldset”>

<span class=”dirser”>Anything else ?</span>

[textarea anything-else class:anything-else]

</div>

</fieldset>

div>

<fieldset class=”-fieldset”>

<legend>TELL US MORE</legend>

<div class=”submitform typefieldset”>

<span class=”dirtyp”>Type of Business</span>

[radio typeofbusiness class:typeofbusiness use_label_element default:1 “Salon” “Freelance Artist” “Wedding Planner” “Photography” “Boutiques” “Jewellers”]

<span class=”dirser”>Services</span>

[checkbox services class:services use_label_element “Make up” “Hair” “Manicure/Pedicure” “Massage” “Facials” “Tanning” “Waxing” “Henna” “Video” “Photography” “Gold” “Handcrafted”]

</div>

<div class=”submitform typefieldset”>

<span class=”dirser”>Anything else ?</span>

[textarea anything-else class:anything-else]

</div>

</fieldset>

In above coding we have divide the form into three category first one for text and Number fields, second is for radio, checkbox, data field and third one is for File uploading and Attachment and Submit Button.

Step two:

Now declare a CSS for the class name submitform for input field in span tag.

Code:

.submitform span > input, .submitform span > textarea {

padding: 10px;

width: 100%;

clear: none !important;

border-radius: 10px;

box-sizing: border-box;

background-color: rgba(201, 162, 91, 0.65);

border: 0;

font-family: ‘Raleway’, sans-serif;

}

In the above code we have declared padding of 10px to make the text placed in center, border-radius of 10px to bring a curved edge to the input field and background-color with alpha 0.65.

That’s it!!! Do you see the difference now? You have successfully edited a Contact Form. Don’t hesitate to share you contact form customization strategy with us. If you stuck at some point in customizing or if you feel this that process of setting up the contact form is difficult don’t hesitate to contact us.

Ecommerce Web Development

Looking For Ecommerce Web Development?

How did we Manage to Style the contact Page of Trendzbook.com by

Comments