I've got a little problem with CF7. The plugin works good in wordpress, but when I put the file field on the form, the wordpress doesn't send the e-mail, if I take off the file field, it works perfectly.
EDIT -----------
Form HTML:
<div class="row-fluid formulario-cotacao">
<div class="span12">
<h3>Seus Dados de Contato</h3>
[text* your-name watermark "Nome:"]
[email* your-email watermark "E-mail:"]
[tel* tel-987 id:telId class:telClass watermark "Telefone:"]
[textarea your-message watermark "Mensagem:"]
</div>
<div class="span12">
<h3>Tipo de Seguro Desejado</h3>
[checkbox* tipo-seguro id:tipo-seguro class:tipo-seguro label_first use_label_element "seguro de automóvel" "seguro de motos" "consórcio" "seguro de vida" "planos de saúde" "seguro de caminhões" "seguro prestamista" "carta verde" "previdência privada" "seguro viagem"]
</div>
<div class="span12">
[text outros id:outros class:outros watermark "Outros Seguros Desejados:"]
</div>
<div class="span12">
<p>Enviar arquivo</p>
<p>[file arquivo limit:3000000 filetypes:jpg|doc|png|pdf id:arquivo class:arquivo]</p>
</div>
<p class="text-center">[submit id:cotar class:cotar "solicitar cotação"] <input type="reset" value="limpar campos" /> </p>
</div>
IN MESSAGE BODY:
<h1 style="font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#06F;">Cotação do Web Site</h1>
<p><b>Nome: </b><br/> [your-name]</p>
<p><b>E-mail: </b><br/> [your-email]</p>
<p><b>Telefone: </b><br/> [tel-987]</p>
<p><b>Mensagem: </b><br/> [your-message]</p>
<p><b>Outros seguros desejados: </b> <br/> [outros]</p>
<p><b>Arquivo:</b> <img src="[arquivo]"> <br> [arquivo]</p>
<br/><br/><br/><br/>
<h3 style="font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#06F;">
<b>Tipo de Seguro Desejado</b>
</h3><br/>
<p> [tipo-seguro]</p>
IN ATTACHMENT FIELD:
[arquivo] // <-- this is my input file field
Someone already had the same problem?
Related
I've encountered a pretty weird CSS error which stops CSS from properly being applied. Check out the screenshot I took from the Chrome inspection tool.
Weird CSS in inspector
The code is pretty straightforward:
<div class="addownsong">
<span class="hidesongadder"><i class="fa fa-times"></i></span>
<h4>Artiest</h4>
<input id="artist-name" type="text" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
<h4>Titel</h4>
<input id="track-name" type="text">
<div class="minutes">
<h4>Minuten</h4>
<input id="track-minutes" type="text" min="0" max="59">
</div>
<div class="timedivider">
<h4>:</h4>
</div>
<div class="seconds">
<h4>Seconden</h4>
<input id="track-seconds" type="text" min="0" max="59">
</div>
<p><strong>Wil je een scanbare Spotify code toevoegen aan je topplaatje? Gebruik onderstaande zoekbalk om het juiste nummer te vinden!</strong></p>
<input style="text-align: center;border-color:#df0d84" id="songsearch2" type="text" placeholder="Vind je favoriete nummer op basis van titel">
<div id="songsearch2-results"></div>
<div id="selected-spotify-code"></div>
<input hidden="" id="uploaded-image">
<div class="dropzone dropzonebox dz-clickable" id="my-awesome-dropzone"><div class="dz-message" data-dz-message=""><span>Sleep een foto hierheen of klik om te uploaden</span></div></div>
<div style="color:#ff0000;margin-top:10px;"><center><strong>Let op: voor het beste resultaat, voeg je een vierkante foto toe</strong></center></div>
<div style="background-color:#ddd;color:#545454;border-color:#ddd;" class="createButton placeholderButton">Voeg eerst alle gegevens toe</div>
<div style="display: none;" class="createButton addCreation">Voeg je creatie toe!</div>
</div>
I tried uncovering closing/opening errors for divs, but they're all properly showing. Any ideas?
I can't for the life of me figure out the spacing on my form.
As you'll see the checkboxes are all bunched up and look rubbish... can you league of coding legends help?
http://200620.co.uk/
This is the layout...
<div class="wpcf7-wrap">
<div class="col-sm-6">
[text* your-name placeholder "Name:"]
</div>
<div class="col-sm-6">
[text* your-email placeholder "Email:"]
</div>
<div class="col-sm-6">
[select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"]
</div>
<div class="col-sm-6">
[select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"]
</div>
<div class="col-sm-6">
[text your-text-1 placeholder "Dietary Requirements:"]
</div>
<div class="col-sm-6">What do you drink?
[checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]
</div>
<div class="col-sm-6">
[text your-text-3 placeholder "What do you want to hear?"]
</div>
<div class="col-sm-12">
[textarea your-text-4 placeholder "Any Special Message for us?"]
</div>
<div class="col-xs-12 wpcf7-button-wrap">
[submit "RSVP Baby"]
</div>
</div>
Hopefully this puts you on the right track. I would move your checkboxes to after the other 2x2 columns so that it's all the way across. Also.. Wrap the whole thing in a div. Be careful not to add extra line breaks on your form, as Contact Form 7 uses the "Auto-P" function.
/*this should make the row stand on it's own*/
.checkbox-row {
margin: 1.5rem 0 .5rem 0;
}
<div class="wpcf7-wrap">
<div class="col-sm-6"> [text* your-name placeholder "Name:"] </div>
<div class="col-sm-6"> [text* your-email placeholder "Email:"] </div>
<div class="col-sm-6"> [select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"] </div>
<div class="col-sm-6"> [select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"] </div>
<div class="col-sm-6"> [text your-text-1 placeholder "Dietary Requirements:"] </div>
<div class="col-sm-6"> [text your-text-3 placeholder "What do you want to hear?"] </div>
<div class="col-sm-12 checkbox-row"><div>What do you drink? [checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]</div></div>
<div class="col-sm-12"> [textarea your-text-4 placeholder "Any Special Message for us?"] </div>
<div class="col-xs-12 wpcf7-button-wrap"> [submit "RSVP Baby"] </div>
</div>
Just add below CSS code. Hope this help you.
.wpcf7-form-control.wpcf7-checkbox{
float: left;
width: 100%;
margin: 0;
padding: 0;
}
I need to show an image next to a textarea using Bootstrap 4. But I have a display problem:
What I want is that image and textarea it looks like:
always look like the previous image both on the pc and in the responsive mode.
This is the code of my actual angular HTML component:
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4">
<img
data-src="holder.js/200x200"
class="rounded float-left"
alt="100x100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164e3f66702%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164e3f66702%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
style="width: 150px; height: 150px; margin:5px;">
</div>
<div class="col-lg-8">
<label for="modifications">Modificaciones al diseño</label>
<textarea
class="form-control"
id="modifications"
rows="4"
required
[(ngModel)]="mModifications"
name="modifications"
#modifications="ngModel"
[ngClass]="{'is-valid': modifications.valid && modifications.touched, 'is-invalid': modifications.invalid && modifications.touched}">
</textarea>
<small *ngIf="modifications.untouched || modifications.valid && modifications.touched" class="form-text text-muted">Se conciso en la descripción, esto ayuda a nuestros expertos a estar preparados el día de la visita.</small>
<small *ngIf="modifications.invalid && modifications.touched" class="form-text text-muted-error">Debes describir el trabajo a realizar</small>
</div>
</div>
</div>
</div>
I have tried several ways to change the css to get this, but I could not.
Thank you very much!
<div class="container">
<div class="row">
<div class="col-lg-4">
<img
data-src="holder.js/200x200"
class="rounded float-left"
alt="100x100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164e3f66702%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164e3f66702%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true">
</div>
<div class="col-lg-8">
<label for="modifications">Modificaciones al diseño</label>
<textarea
class="form-control"
id="modifications"
rows="4"
required
[(ngModel)]="mModifications"
name="modifications"
#modifications="ngModel"
[ngClass]="{'is-valid': modifications.valid && modifications.touched, 'is-invalid': modifications.invalid && modifications.touched}">
</textarea>
<small *ngIf="modifications.untouched || modifications.valid && modifications.touched" class="form-text text-muted">Se conciso en la descripción, esto ayuda a nuestros expertos a estar preparados el día de la visita.</small>
<small *ngIf="modifications.invalid && modifications.touched" class="form-text text-muted-error">Debes describir el trabajo a realizar</small>
</div>
</div>
</div>
Just remove the col-lg-12 div altogether.
https://codepen.io/anon/pen/jpYQQK
in your html
<div class="col-md-12" id="dvImageTextBox">
<input id="cc-cvc" placeholder="CVC" formControlName="cvc" type="text" autocomplete="off" ccCvc>
<img src="assets/citybook/images/CVV.png" height="45px" width="75px" />
</div>
css
#dvImageTextBox
{
position: relative;
}
#dvImageTextBox input
{
display: block;
width: 100%;
}
#dvImageTextBox img
{
position: absolute;
top: 5px;
right: 5px;
}
This is my first post here and I'm French, I beg your pardon for the language ...
I created a system columns in css, combining the display rule: table-cell and percentages with .columns class.
I would like a .columns child element may be equivalent in width to two or more default items if necessary. So I created classes (.C2, .C3, .C4 ...) to be affixed to the relevant child elements (.C2 class for 2 off items, etc).
This solution works very well in a form (exactly in the form element) but I can not reproduce this behaviour within a single div. So I tried to get all the features of the form element css to affix them to the div... without result.
Here is an example :
#import url(http://scriptura.github.io/Styles/Public/Main.css);
<html>
<body itemscope="itemscope" itemtype="https://schema.org/WebPage" class="onepage-color">
<section class="section">
<div class="wrap grid12">
<h2 class="highlight">Test Columns</h2>
<div class="columns">
<div>
<h2 class="h5 highlight">Test n°1</h2>
<p><code>form .columns</code></p>
<form>
<div class="columns-smallspace">
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c2">
<input type="text" value=".c2"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c3">
<input type="text" value=".c3"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
</form>
<p class="message-success">Ici, on voit que la colonne comportant l'input .c2, prend bien la place de deux colonnes quand elle est placée dans un <code>form</code>. Idem pour .c3 qui prend la place de trois colonnes.</p>
</div>
<div>
<h2 class="h5 highlight">Test n°2</h2>
<p><code>div .columns</code></p>
<div style="display:table;" class="elleEstIci">
<div class="columns-smallspace">
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c2">
<input type="text" value=".c2"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c3">
<input type="text" value=".c3"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
</div>
<p class="message-error">La même classe .c2 placée dans le même contexte, à l'exception notable d'une <code>div</code> à la place du <code>form</code>, donne lieu à une anarchie totale sur la deuxième ligne (idem pour .c3)...</p>
</div>
</div>
<h2 class="h5 highlight">Quid ?</h2>
<p class="message">Comment configurer la div parente du deuxième test (div.elleEstIci) de manière à arriver au même résultat que le premier exemple ?<br/>J'ai l'impression d'avoir tout essayé (display:table, etc)...</p>
<p class="message-info">Vous trouverez la feuille de style complète à cette addresse (cf. lignes 437+) : Scriptura sur Github.</p>
</div>
</section>
</body>
</html>
If you have a solution, and I'm interested, in advance, thank you.
All right, I found: it was necessary to declare a width: 100% on [class ^ = "columns"]> *.
So the child elements, and not the parent element as I thought at first. Sounds simple ... but afterwards I have brainstormed.
Subject resolved.
I wrote some code for an advanced liquid slider. But as my header slider contains some major content like h-tags p-tags and some images. I asked myself "can I consider each slide as an article". Because I can't find the correct answer maybe somebody can help me. The question is, is my code correctly nested and the right use of Semantic Elements. The code is:
<header id="masthead" class="site-header" role="banner">
<div id="main-slider" class="liquid-slider">
<article id="slider-1" class="liquid-slide-wrapper" style="background: url(images/back-99.jpg) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">Professionele, betaalbare website nodig?</h2>
<h2 style=" color:#fff; display:none;">Zelf uw website aanpassen?</h3>
</header>
<p style="display:none; color:#fff;">Onze unieke websites worden afgeleverd met een wordpress CMS systeem.<br>
Hiermee kan u zelf uw website aanpassen!<br> Vat de kudu bij de horens en contacteer ons voor meer info!
</p>
<p style="display:none;"><button type="button" class="btn btn-primary btn-lg">Mail Ons</button> <button type="button" class="btn btn-transparent btn-lg">0494 / 77 22 61</button></p>
</section>
<section class="section-img-right clearfix">
<img class="slider-img-right fadeInRight animated" style="display:none; width:100%; max-width:692px; height:auto;" src="images/imac.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/straf-webdesign.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/responsive-webdesign.png" />
</section>
</article>
<article id="slider-2" style="background: url(images/background-7.png) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">JustOnWeb wordt Kudu Concepts!</h2>
<h2 style="display:none; color:#000;">Een nieuwe naam, met een professionelere aanpak!</h3>
<header>
<p style="display:none; color:#fff;">Een website bestaat uit meer dan een lay-out. <br>Met kudu Concepts gaan we verder daar waar anderen stoppen!<br>
We bedenken een volledige filosofie voor uw website en <br> combineren dit met onze kennis van Online Marketing!
</p>
</section>
</article>
</div>
</header>
According to W3School semantic here : http://www.w3schools.com/html/html5_semantic_elements.asp
< section > contain < article >
it is not recommanded to use < section > inside < article > and inside < header >
According W3C, a section is "a thematic grouping of content, typically with a heading."
< header > is on top of parent element, so on top of body (the header) but also on top of sections or articles or any other div
In your code :
< h1 > should be close with < / h1 > and not h2, same for < h2 >