Form per inviare mail

[MaxP4]

Ho recuperato questo codice che mi permette di avere un (graficamente) bel form per inviare mail dal sito. Il codice è pubblicato in un modulo. Però manca tutta la parte che "invia" fisicamente i dati... qualcuno mi aiuta?



<h3>Contact Us</h3>
<form class="uk-form uk-width-1-1">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-1-1 uk-width-medium-1-2">
<div class="uk-form-controls">
<input type="text" placeholder="Your Name" class="uk-width-1-1">
<>
<>
<div class="uk-width-1-1 uk-width-medium-1-2">
<div class="uk-form-controls">
<input type="text" placeholder="Your E-Mail Adress" class="uk-width-1-1">
<>
<>
<!--<div class="uk-width-1-1">
<input type="text" placeholder="Your Topic" class="uk-width-1-1">
<>-->
<div class="uk-width-1-1">
<textarea id="form-h-t" class="uk-width-1-1" cols="30" rows="6" placeholder="Your Message"></textarea>
<>
<div class="uk-width-1-1">
<a class="uk-button uk-button-primary" href="#">send[/url]
<>
<>
</form>

[maicolstaip]

Ciao MaxP4,
ma il form di default di joomla non và bene?

[MaxP4]

Ciao MaxP4,
ma il form di default di joomla non và bene?

Beh, questo lo vorrei mettere in un modulo ed esteticamente si adatta meglio al sito su cui sto lavorando. Onestamente poi non sapendo niente di programmazione se non piccole cose, non ho nemmeno idea se sia possibile fare un override con questa grafica...

[MaxP4]

Sono ancora in alto mare con questo form...


reinserisco il codice perché mi sono accorto di un paio di cose errate...

Codice: [Seleziona]

<div class="uk-text-center">
  <h1 class="uk-heading-large">Contact Us</h1>
  <p class="uk-article-lead">If you have any questions or comments,<br class="uk-hidden-small"> don’t hesitate to contact us.</p>


  <form class="uk-form tm-form-primary uk-container-center uk-width-2-3">


    <div class="uk-grid" data-uk-grid-margin>
      <div class="uk-width-1-1 uk-width-medium-1-2">
        <div class="uk-form-controls">
          <input type="text" placeholder="Name" class="uk-width-1-1">
        <>
      <>
      <div class="uk-width-1-1 uk-width-medium-1-2">
        <div class="uk-form-controls">
          <input type="text" placeholder="E-Mail" class="uk-width-1-1">
        <>
      <>
      <div class="uk-width-1-1">
        <textarea id="form-h-t" class="uk-width-1-1" cols="30" rows="10" placeholder="Your Message"></textarea>
      <>
    <>
   
  </form>


  <a class="uk-button uk-button-large uk-margin-top" href="#">SEND MESSAGE</a>


<>


Il form attualmente si trova a questo indirizzo:
http://www.tuscanychefs.com/index.php
...e vorrei renderlo funzionante. Secondo voi esiste un modo?

[maicolstaip]

Ciao,
prova questo

http://extensions.joomla.org/extensions/contacts-and-feedback/contact-forms/8219

Ciao!

[giusebos]

usare chornoform e riprodurre il tuo form?

[MaxP4]

Ciao,prova questohttp://extensions.joomla.org/extensions/contacts-and-feedback/contact-forms/8219Ciao!

usare chornoform e riprodurre il tuo form?

Il punto è... posso applicare questa grafica ai due form?

[giusebos]

non so che tipo di grafica è perchè non ho fisto il form, ma penso proprio di si, la grafica non la fa il form, ma alcune ventuali regole da scrivere nel css

[MaxP4]

non so che tipo di grafica è perchè non ho fisto il form, ma penso proprio di si, la grafica non la fa il form, ma alcune ventuali regole da scrivere nel css

Il form si trova in fondo a questa pagina...


http://www.tuscanychefs.com/index.php

[giusebos]

Si Certo, ti confermo che agendo su i css replichi la grafica per sfondo, cornice, colore e raggio e caratteristiche estetiche del pulsante.

praticamente non fai altro che copiare i parametri che rilevi con firebug analizzando gli oggetti.

mentre per la la forma, le 2 finestre con sotto la textarea,
per avere affiancate finestra nome e email,
non devi far altro nelle impostazioni del form all'interno del textbox per il nome, di indicare che dopo questa finestra  ne verrà affiancata un'altra.

L'opzione è "Start a Multi field row"

per quanto riguarda il pulsante nelle impostazioni inserirai l'allineamento al centro

questo il codice di che regola forma e colori delle tre finestre

Codice: [Seleziona]

.tua_classe {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.;
  border: 6px solid #EEF3F5;
  border-radius: 10px;
  font-size: 18px;
  padding: 0 20px;
  transition: all 0.07s linear 0s;
}

questo il codice di base per il bottone

Codice: [Seleziona]

.tua_classe {
  background: #DA3845;
  border: medium none;
  border-radius: 50px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
  color: #FFFFFF;
  letter-spacing: normal;
  line-height: 30px;
  min-height: 30px;
  padding: 0 12px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  transition: background-color 0.15s ease-in-out 0s;
}
Sicuramente dovrai aggiungere qualche altra riga di codice per lo stato hover, la grandezza delle finestre e la grandezza e forma dei caratteri, ma lo vediamo dopo.