Suggerimenti per l'utilizzo di HTML e CSS nei moduli

In questo documento, we'll vi mostreremo come utilizzare il blocco di codice HTML e condividere con voi alcuni trucchi HTML e CSS di base che è possibile utilizzare per personalizzare i moduli.

Si prega di notare che questa è una funzionalità avanzata e richiede la conoscenza di CSS e HTML. Se non hai familiarità con HTML o CSS, ti consigliamo di lavorare con un membro del tuo team che lo è. Ci sono anche diverse grandi risorse là fuori dove si può imparare HTML e CSS come questo.

HTML

Il blocco HTML consente di aggiungere testo con collegamenti incorporati al modulo in linea. Si consiglia di utilizzare questo se si desidera collegare i contatti a un video o pagina di politica sulla privacy sul tuo sito. È inoltre possibile formattare il testo e il relativo allineamento in questo blocco specifico.

Si prega di notare che il blocco HTML può essere utilizzato solo su moduli inline. Casella mobile, barra mobile e moduli modali non hanno la possibilità di aggiungere un blocco HTML.

Aggiunta del blocco di codice HTML al modulo

Per iniziare, è sufficiente trascinare il " Codice HTML" blocco in qualsiasi punto del modulo. Questo blocco si trova sotto lo standard Fields >:

HTML_code_block.png

Per aggiungere il codice HTML personalizzato, fare clic sul blocco di codice HTML nel modulo. Una volta fatto, sarai in grado di inserire il codice nella casella sul lato destro dello schermo:

add_html_code.png

Ora sei pronto per aggiungere il tuo codice HTML al modulo.

Codice HTML di base

È possibile utilizzare quanto segue per aggiungere uno stile al testo nel blocco di codice HTML.

Centra il testo
Tag utilizzati: <center> </center>

In questo esempio, abbiamo inserito il testo che volevamo centrato tra i due tag. Ecco come lo abbiamo impostato: 

<centro>Inviaci il tuo nome e la tua email per iscriverti alla nostra newsletter.</center>

center_text_html.png

Aggiungi interruzione di riga
Tag utilizzati: <p> </p>

In questo esempio è stata aggiunta un'interruzione di collegamento tra due frasi nel blocco HTML. Ecco come lo abbiamo impostato:

Inviaci il tuo nome e l'e-mail per iscriverti alla nostra newsletter. <p>Non dimenticare di aggiungerci all'elenco contatti!</p>

Line_break_code.png
Grassetto
Tag utilizzati <b> </b>

In questo esempio, volevamo applicare un grassetto a una frase nel nostro blocco HTML. Ecco come lo abbiamo impostato: 

Inviaci il tuo nome e l'e-mail per iscriverti alla nostra newsletter. <b>Non dimenticare di aggiungerci all'elenco contatti!</b>

Bold_html.png

Sottolineare il testo
Tag utilizzati <u> </u>

In questo esempio, volevamo sottolineare una frase nel nostro blocco HTML. Ecco come lo abbiamo impostato:

Invia il tuo nome e l'e-mail per iscriverti alla nostra newsletter. <u>Non dimenticare di aggiungerci all'elenco contatti!</u>

Underline_html.png

Aggiungi collegamento
Tag utilizzati <a href> </a href>

In questo esempio, abbiamo voluto aggiungere un link alla nostra politica sulla privacy per gli abbonati a fare clic su. Ecco come lo abbiamo impostato:

Invia il tuo nome e l'e-mail per iscriverti alla nostra newsletter. <a href>"https://www.activecampaign.com/privacy-policy/">Leggi qui la nostra informativa sulla privacy.</a>

Link_html.png
Inserisci riga
Codice di esempio utilizzato: 
<stile div:"altezza:10px;bordo-inferiore:1px #CCCCCC">
 
</div>

In questo esempio è stato utilizzato un blocco di codice HTML separato per creare una riga da inserire tra due elementi del form.

Insert_line_html.png

example_of_line.png

Creare un elenco puntato
Tag utilizzati <li> </li>

In questo esempio, volevamo elencare ciò che gli abbonati possono aspettarsi di conoscere quando si iscrivano alla nostra newsletter. Ecco come lo abbiamo impostato:

Ulteriori informazioni su quanto segue: <li>Home energy check up</li><li>Solar consultation</li><li>Insulation</li>

bulleted_list_html.png

Aggiungere colore al testo
Codice di esempio utilizzato:
<span style:"color: #267ec2"; <p>Inviaci il tuo nome e la tua e-mail per iscriverti alla nostra newsletter</p> </span>

In questo esempio, volevamo aggiungere colore al testo nel nostro blocco di codice HTML. Il codice utilizzato si trova sopra.

apply_color_html.png

CSS

È possibile utilizzare la casella CSS personalizzata e la finestra di ispezione per modificare gli elementi visivi del modulo, ad esempio la regolazione della larghezza del pulsante di invio, la regolazione del tipo e delle dimensioni del carattere, la centramento del testo in un elemento, la modifica del colore del testo e altro ancora. Questa opzione si trova nella scheda Stile. Tutti i tipi di modulo includono la casella CSS personalizzata e Il controllo.

custom_css_box.png

Per utilizzare la casella e la finestra di ispezione CSS personalizzate, fare clic su "Stile" scheda che si trova in alto a destra nell'editor di moduli. Quindi fare clic sul pulsante di ispezione e scegliere come destinazione l'elemento a cui si desidera aggiungere uno stile personalizzato facendo clic su di esso.

Regolare la larghezza di un elemento modulo

È possibile utilizzare una percentuale o un pixel per determinare la larghezza di un elemento. In questo esempio, abbiamo're andando a regolare la larghezza del " Invia" Pulsante:

  1. Vai a "Stile" quindi fare clic su "Inspector."

    inspector_button.png

  2. Destinazione " Invia" pulsante da facendo clic su di esso.

    click_submit_button_to_adjust.png
  3. Nella casella CSS, enter:width: numberpx; E sostituire "number"con il tuo numero. In questo esempio, abbiamo usato 250px:

    example_width.png

Il pulsante di invio è ora largo 250 pixel:
wide_submit_button.png

Regolare il tipo e la dimensione del carattere

È possibile utilizzare la casella CSS per modificare il tipo di carattere per qualsiasi elemento del modulo. In questo esempio, modificheremo il pulsante di invio modificando il tipo di carattere in Georgia e regolando la dimensione del carattere su 25 pixel:

  1. Vai a "Stile" quindi fare clic su "Inspector."

    inspector_button.png

  2. Scegliere come destinazione l'elemento facendo clic su di esso. In questo esempio, scegliamo "Invia"Pulsante. click_submit_button_to_adjust.png
  3. Nella casella CSS, :font-size: 25px;font-family: Georgia !importante:

    css_for_font_type_and_size.png

La dimensione e il tipo di carattere del pulsante di invio e del tipo di carattere è ora regolato:
new_submit_button.png

Centra il testo utilizzando CSS

  1. Vai a "Stile" quindi fare clic su "Inspector."

    inspector_button.png

  2. Scegliere come destinazione l'elemento contenente il testo che si desidera centrare facendo clic su di esso

    center_text_using_css.png
  3. Nella casella CSS, :text-align: center

    center_text_using_css_1.png

Il testo è ora centrato:
text_centered.png

Aggiungi colore con CSS

  1. Vai a "Stile" quindi fare clic su "Inspector."

    inspector_button.png

  2. Impostare come destinazione l'elemento contenente il testo di cui si desidera modificare il colore facendo clic su di esso.

    Click_element_to_add_color.png
  3. Nella casella CSS, digitare: color:hexcodeforcolor; e sostituire "numero"con il tuo numero. In questo esempio è stato usato #f441b8

    hex_color.png

Al testo è ora applicato il colore:

blue_text.png

Se vuoi saperne di più su CSS, ci sono diverse grandi risorse là fuori come questa.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 4 su 17

Have more questions? Submit a request

Start free trial