How can I add Contact Form 7 shortcode fields to custom HTML?
I also would like to keep the template (HTML) appearance.
For reference, this template form can be seen in this link right here.
My HTML code:
<div class="background">
<div class="container">
<div class="screen">
<div class="screen-header">
<div class="screen-header-left">
<div class="screen-header-button close"></div>
<div class="screen-header-button maximize"></div>
<div class="screen-header-button minimize"></div>
</div>
<div class="screen-header-right">
<div class="screen-header-ellipsis"></div>
<div class="screen-header-ellipsis"></div>
<div class="screen-header-ellipsis"></div>
</div>
</div>
<div class="screen-body">
<div class="screen-body-item left">
<div class="app-title">
<span>CONTACT</span>
<span>US</span>
</div>
<div class="app-contact">CONTACT INFO : HELLO#CROWNSDEV.COM</div>
</div>
<div class="screen-body-item">
<div class="app-form">
<div class="app-form-group">
<input class="app-form-control" placeholder="NAME">
</div>
<div class="app-form-group">
<input class="app-form-control" placeholder="EMAIL">
</div>
<div class="app-form-group">
<input class="app-form-control" placeholder="SUBJECT">
</div>
<div class="app-form-group message">
<input class="app-form-control" placeholder="MESSAGE">
</div>
<div class="app-form-group buttons">
<button class="app-form-button">SEND</button>
</div>
</div>
</div>
Contact form 7 form:
<label> Your name
[text* your-name] </label>
<label> Your email
[email* your-email] </label>
<label> Subject
[text* your-subject] </label>
<label> Your message
[textarea your-message] </label>
[submit "Send"]
Related
I want to change the innerCircle's background-color when clicking a checkbox with css only. How can I access the innerCircle div?
<section>
<label class="button" for="select1">
<input id="select1" type="checkbox">
<span class="slider round"></span>
</label>
<div class="outerCircle">
<div id='chh' class="innerCircle">
<div class="sun"></div>
</div>
<div class="catBody">
<div class="leftear"></div>
<div class="rightear"></div>
<div class="leftEye"></div>
<div class="rightEye"></div>
<div class="noise"></div>
<div class="neck"></div>
</div>
</div>
</section>
move your wanted element after that checkbox and you can get access by css pseudo element like this example
input:checked~.innerCircle {
background: red;
}
<section>
<label class="button" for="select1">
<input id="select1" type="checkbox">
<span class="slider round"></span>
<div id="chh" class="innerCircle">
<div class="sun"></div>
</div>
</label>
<div class="outerCircle">
<div class="catBody">
<div class="leftear"></div>
<div class="rightear"></div>
<div class="leftEye"></div>
<div class="rightEye"></div>
<div class="noise"></div>
<div class="neck"></div>
</div>
</div>
</section>
I just want each label to take up only one line.
<div class="container">
<div class="columns">
<div class="column">
</div>
<div class="column is-one-third">
<form>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class = "label" for="p1Name">PLAYER ONE</label>
</div>
<div class="field-body">
<input type="text" id="p1Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class = "label" for="p2Name">PLAYER TWO</label>
</div>
<div class="field-body">
<input type="text" id="p2Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
</form>
</div>
<div class="column">
</div>
</div>
</div>
This is what's happening. The labels don't fit an input, They take up more than one line
So I try to add other containers to each input. It does work, but there is a lot of work we need to do more. Also, there is a big gap between labels and inputs.
<div class="column is-one-third">
<form>
<div class="field is-horizontal">
<div class="container">
<div class="columns">
<div class="column is-4">
<div class="field-label is-normal has-text-left">
<label class = "label" for="p1Name">PLAYER ONE</label>
</div>
</div>
<div class="column">
<div class="field-body">
<input type="text" id="p1Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="container">
<div class="columns">
<div class="column is-4">
<div class="field-label is-normal has-text-left">
<label class = "label" for="p2Name">PLAYER TWO</label>
</div>
</div>
<div class="column">
<div class="field-body">
<input type="text" id="p2Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="column">
</div>
There is a big gap between labels and inputs
Is there any better approach?
I'm trying to build a form which is divided in two columns in the top portion, and one column for the bottom portion, similar to what is shown in this image:
I created a template using Bulma columns, but the fields are not aligning the way I want them to. Below is a sample code I've been playing with:
<section class="section">
<div class="columns">
<div class="column">
<div class="columns">
<div class="column">
<div class="field is-horizontal has-background-danger">
<div class="field-label is-small">
<label class="label">Info 1</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field is-horizontal has-background-warning">
<div class="field-label is-small">
<label class="label">Info 2</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal has-background-primary">
<div class="field-label is-small">
<label class="label">Info 0</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And this is what I'm getting
What I'd like to achieve instead is the following:
Does anybody know how can I fix this? I'm not really experienced doing CSS or web in general. Please feel free to suggest a different layout if you think this is not a good design.
Thanks for any help on this.
<section class="section">
<div class="columns">
<div class="column">
<div class="columns" style="margin-left: 5px;margin-right: 5px">
<div class="column" style="margin-right: 5px">
<div class="field is-horizontal columns">
<div class="column is-2 is-small has-background-danger">
<label class="label">Info 1</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
<div class="column" style="margin-left: 5px">
<div class="field is-horizontal columns" >
<div class="column is-2 is-small has-background-warning">
<label class="label">Info 2</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal columns" style="margin: 5px;">
<div class="column is-1 is-small has-background-primary">
<label class="label">Info 0</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I'm attempting to group input controls in panels to make a page look cleaner. Before using panels the controls looked like this:
markup for above:
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Patient Name, First</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Mother Name, First</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Patient Name, Last</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Mother Name, Last</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
When I try to nest that same group in a panel, the columns break:
markup:
<nav class="panel">
<p class="panel-heading">
Account Basics
</p>
<div class="panel-block">
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Patient Name, First</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Mother Name, First</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Patient Name, Last</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Mother Name, Last</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
</div>
</nav>
Is there a way to do what I am wanting, to just group an existing control structure inside of a panel?
I think you may want to try to remove the columns and try something similar to the "From" field in this Bulma example. You can see this with your form in this JSFiddle
<nav class="panel">
<p class="panel-heading">
Account Basics
</p>
<div class="panel-block">
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<label class="label">Patient Name, First</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
<div class="field">
<label class="label">Mother Name, First</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
<div class="field">
<label class="label">Patient Name, Last</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
<div class="field">
<label class="label">Mother Name, Last</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
</div>
</nav>
The form fails to work, when the subscribe button is clicked, and there is no reaction or error.
See the code here:
<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
<header>
<h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
</header>
<div class="subscription-form">
<form action="email-subscribe.html">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
<div class="input-group-addon subscribe-addons">subscribe</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
You have to use a button in order to submit your data. And additionally in your form, I have added a way to pass data, in method="post".
Please refer the doc.
https://www.w3schools.com/css/css_form.asp
<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
<header>
<h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
</header>
<div class="subscription-form">
<form method="post" action="email-subscribe.html">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
<input type="submit" value="Subscribe">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
You're not using an input you're simply styling a div, change the subscribe div to an input with the type="submit" like below and it'll fire. Also add a method to the form.
<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
<header>
<h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
</header>
<div class="subscription-form">
<form method="post" action="email-subscribe.html">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
<input type="submit" value="subscribe" class="input-group-addon subscribe-addons">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>